Custom marker icons using the Google Maps API

22 November 2011

After creating a routeplanner using the Google Maps API (v3) it would also be supercool to add a custom marker icon to mark your home, business or sportsclub.



You could have guessed it: that's really easy too. Let me show you the code to create the marker shown in the screenshot above, and i'll explain what everything does later.

This is the complete code you'll need to put in your head (or a seperate JS file) to initialize the map, center it around a position and add a marker:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initializeMaps() {
    var latlng = new google.maps.LatLng(51.764696,5.526042);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("google_maps"),myOptions);
 
    var image = new google.maps.MarkerImage('marker.png',
        new google.maps.Size(65, 124),
        new google.maps.Point(0,0),
        new google.maps.Point(56, 122)
    );

    var shadow = new google.maps.MarkerImage('marker_shadow.png',
        new google.maps.Size(96, 59),
        new google.maps.Point(0,0),
        new google.maps.Point(32, 59)
    );

    var customMarker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: shadow,
        title:"Carlos Gallupa HQ",
        icon: image
    });
}

As we've seen in the previous tutorial the first part is pretty straight forward, but the last few lines are new. That's where the marker-magic happens. Let me explain the three parts of the custom marker:

// This first line initializes a new custom
// marker and point to the image file which
// should be used as marker image
var image = new google.maps.MarkerImage('marker.png',
    // second line defines the dimensions of the image
    new google.maps.Size(65, 124),
    // third line defines the origin of the custom icon
    new google.maps.Point(0,0),
    // and the last line defines the offset for the image
    new google.maps.Point(56, 122)
);

The dificulty is in the last line. If you set this value to 0,0 the marker will be put on the map with the top left corner on the location defined earlier. Switch back to photoshop (or whatever you're using) and measure where the point of your marker is.



Width (W) is the X position, height (H) is the Y position.

The shadow of the marker is the second part. Actually this is the same as the first part defining the marker itself, but as the markers shadow has different dimensions, it needs another size and offset.

That's all!
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

10 comments

  1. Gravatar

    ermy

    19 September 2017

    hello sir or ma'am

    i just reading your tutorials but my question is how do you change the icon from your own custom directly to the google map? if there is code where should i input the code? waiting from your reply thanks

  2. Gravatar

    deadshot

    02 September 2016

    Good. .

  3. Gravatar

    Steve Dondley

    26 May 2015

    This method has been deprecated by Google.

  4. Gravatar

    Leandra

    18 May 2015

    Hi Johan,
    I copied the code in, changed the lat/long to my location, changed my image names to those in the code, but it's still not showing up on my custom map.
    Am I missing something? Do the images need to be in a certain folder?
    Thanks,
    Leandra

  5. Gravatar

    Jay

    04 October 2013

    I want Custom marker on Different Different Waypoints..
    plz help me..
    thanks..

  6. Gravatar

    Johan

    15 January 2013

    Hi Ilya... in short: you can't. At least, not easily. You can create a marker image for each number available, but if there's more than ten I would not do this and try to create some dynamic (php)script that returns an image with the number embedded. Or maybe SVG images will work? I don't know... good question!

  7. Gravatar

    Ilya Karnaukhov

    15 January 2013

    Hey Johan, thanks for the tutorial. I created a custom marker with a space in it for a number, i want my markers to be numbered you see, how can i dynamically put numbers inside the markers?

  8. Gravatar

    Johan

    13 December 2012

    Haha, thanks for the heads up, Chad :) I've changed it right away!

  9. Gravatar

    Chad Arsenault

    13 December 2012

    Thanks for the tutorial! Very helpful. Just a heads up, one of your sentences reads, "Ass we've seen in the previous tutorial[...]" :)

  10. Gravatar

    Robert Bellandi

    12 October 2012

    Your work is very helpful to me. I am just beginning to learn Javascript, and I find the Google mapping application fun.

    I'm trying to set up a script that piggy-backs on your travel directions script. In the first part, the browser asks if it may find your location. If you say "yes," it takes the latitude and longitude it found and inserts it as the start point for your travel directions program.

    But, it won't quite work. Would you be willing to take just a minute to look at it? If so, I will send it to you.

    Thank you for your consideration!