Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Google Maps API: How to Make a Custom Marker

DZone's Guide to

Google Maps API: How to Make a Custom Marker

Google Maps is probably the most widely used cartographic service today. Learn how to create a custom marker using their API.

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

What’s up guys, Eze is here. Today I want to show you how easy is to create a custom marker using the Google Maps API. First, let's create a map reference using the Google Maps API. We will be using this object to place our marker.

// Create a map centered in NY
vm.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.7128 , lng: 74.0059},
zoom: 15
});

As you can see in our code above, we only need to pass the element reference as a parameter, in my case, it's just a div element with id = 'map'. The API will create the map view in this element. Then using the PlacesService we get the details of a specific place. I'm using this service because in my working example (you can check the code here) I have an input element where the user can select a place, this input is populated using the autocomplete service so basically I have the place_id parameter to provide, but if you don't want to use it in this way in the request object you can provide a reference property to search different places.

var request = {
placeId: place.placeId
};
 
var service = new google.maps.places.PlacesService(vm.map);
service.getDetails(request, callback);
 
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: vm.map,
position: results.geometry.location,
title: results.formatted_address
});
var infowindow = new google.maps.InfoWindow();
vm.map.setCenter({lat: results.geometry.location.lat(), lng: results.geometry.location.lng()})
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('
<div><img src="'+ vm.place.photoUrl + '" style="width:128px;height:128px;"/></div>
');
infowindow.open(vm.map, this);
});
}

Once I get the details for a specific place I use the Marker object to create a new marker on the map. The object I'm using to create this instance contains the reference to my map, the geometry location object which I get from PlacesService, and a title. And that's it, this is all you need to create a new marker on a map using the JavaScript library for Google Maps API.

places.PNG

For a complete reference of Google Maps API use this link.

If you found this post useful please don't forget to press the like button and share it. If you are in doubt don't hesitate to ask a question and, as always, thank you for reading.

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:
google maps api ,api calls ,web dev ,javascript

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}