Skip to Content

Customising Googlemap Markers

This tutorial will help you customise the plain old Googlemap icons you are stuck with when you use Googlemaps on your website. You don't need to use these default marker icons and there are plenty of resources out there where you can find other alternatives for your markers. For instance, here is a site where they have collected over 900 free Googlemap icons in different sets.

The basic map and marker

So, first let's setup a basic map and marker, for this you will need a GoogleMaps API key. You can get all that here and view the developer documentation for Googlemaps as well. Here is the code to setup our example map:

google.load("maps", "2");
function initialise() { 
    longitude = 172.63250827789307;
    latitude = -43.53226262777692;
    var map = new google.maps.Map2(document.getElementById("map")); 
    map.setCenter(new google.maps.LatLng(latitude, longitude), 15); 
    var marker = new google.maps.Marker(
        new google.maps.LatLng(latitude, longitude)
    );
   	google.maps.Event.addListener (marker, 'click', function() { 
        marker.openInfoWindowHtml('Christchurch Police Station');
    });
    map.addOverlay(marker);
}
google.setOnLoadCallback(initialise);

And here is what that will look like:

The standard Googlemap and marker

Adding a custom marker

So, to this map let's change the default marker, which is set at the location of the Christchurch city police station, to something that looks more like a police station. Using the icon set above, we found this icon which looks more like a police station.

Police marker

To change the marker, you then need to create a new GoogleMap icon and pass this as an option to the marker when adding it to the map. The icon size is the width and height of the image in pixels, while the icon anchor is the point where the icon will 'touch' the map to mark the location. Here is the code for this custom icon:

police_icon = new GIcon();
police_icon.image = "police.png";
police_icon.iconSize = new GSize(32.0, 37.0);
police_icon.iconAnchor = new GPoint(16.0, 37.0);
police_icon.infoWindowAnchor = new GPoint(16.0, 0.0);

Then to add this custom marker to this map, you need to pass it as an option when creating the marker. Here is the modified code to add a custom marker:

var marker = new google.maps.Marker(
    new google.maps.LatLng(latitude, longitude),{icon:police_icon}
);

Adding the icon shadow

Having added the custom icon to the map, we now need to add a shadow to it. It is easy to use a photo-editing program to do this but the easiest solution is to use this site which automates the shadow and gives you most of the icon values as well. So, the code for the marker shadow is:

police_icon.shadow = "police_shadow.png";
police_icon.shadowSize = new GSize(51.0, 37.0);

The results of this are:

Googlemap with custom marker and shadow

Final step: Aligning the infowindow

The final step of adding a custom marker is ensuring that the marker's infowindow is aligned properly. To do this, click the marker, which will open an infowindow, and change the coordinates in infoWindowAnchor until the infowindow is aligned. Our code for the modified coordinates that best fit the infowindow is:

police_icon.infoWindowAnchor = new GPoint(16.0, 5.0);

That's it, you have now successfully added a custom Googlemap marker to your map. The final product should look like this:

Googlemap with custom marker and shadow and infowindow alignment

Click here to view the Googlemap custom icon live demo of this tutorial.

DId you like this?

If you liked this, why not make a donation and help support ongoing development.