Adding a custom icon to a Google Maps Marker

I’ve used the Google Maps API a few times over the last while and one thing that I’ve never really touched on is it’s fantastic customization options. You can pretty much style or customize everything. In this quick post I’ll show you how to change the default marker (or pin) to something else.

This is handy if you want to display your company logo or some other icon on the map. I’ll also detail the other configurable options that you can change in the google.maps.Marker class.

Getting Started

We saw earlier in the week how to use the Geo-location API to request the current position of a device or user. Here we’re going to build on that tutorial to customize the marker. If you haven’t read that tutorial, please do!

Here is the basic jQuery plugin code that we’ll need

(function ( $ ) {
    $.fn.CustomMarker = function( options ) {
        var settings = $.extend({
        }, options );
        
        return this.each(function() {    
            var element = $(this);
            element.text('Attempting to find your location');
            
            function displayCurrentPosition(data) {
                element.html('<div class="map-canvas"></div>');
                
                var current = new google.maps.LatLng(data.coords.latitude, data.coords.longitude);
                
                var options = {
                    center: current,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    zoom: 10,
                };
                
                var map = new google.maps.Map(element[0], options);
            }
            
            function onError(error) {
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        element.text('Access to location API denied by user');
                        break;
                    case error.POSITION_UNAVAILABLE:
                        element.text('Unable to determine location');
                        break;
                    case error.TIMEOUT:
                        element.text('Unable to determine location, the request timed out');
                        break;
                    case error.UNKNOWN_ERROR:
                        element.text('An unknown error occurred!');
                        break;
                }
            }
            
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(displayCurrentPosition, onError);
            } else {
                element.text('Geolocation is not supported by this browser, please upgrade to a more recent version');
            }
        });
    };
}( jQuery ));
no-mark

The above code will request access to the Geo-location API and center the Map on the users current location. To actually show the exact point we need to add a Marker.

Adding the Marker

ddrive

Adding a marker is easy, all you do is create a new instance of the google.maps.Marker class, passing in at a minimum the map it will be on and the position you want it to be in.

var marker = new google.maps.Marker({
    position: current,
    map: map
});

Today though, we’re also going to specify a few additional options. First we’re going to create a new object which will represent our icon. It needs to have the url of the image to use, but you can also specify additional values such as size or the anchor position (used to position the image relative to the center point)

var icon = { 
    url: 'http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png'
};

Next we just have to update the Marker definition to specify the icon.

var icon = { 
    url: 'http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png'
};

var marker = new google.maps.Marker({
    position: current,
    map: map,
    icon: icon
});
san-fran

You can see a full list of Marker options here

In the final download, I’ve updated the plugin to take the icon url as a parameter to make it more functional.

jQuery(document).ready(function() {
    jQuery('div.location').CustomMarker({icon_url: 'http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png'});
});

If there is any interest in it, for an upcoming full tutorial I can go into more depth and cover more Google Map customizations

Author: Jonny Schnittger
A battle hardened software developer with a mixed and colorful background, who can't come up with a decent author bio
  • http://www.kizi10.info/ Kizi 10

    It is a significant addition, it can make things better when we use.

  • Lando

    Hi!

    Great tutorial thank you very much!

    Little problem: the old default icon is still showing on top of my new custom icon, and even if I change the zIndex of my new custom icon, I can still see the old default icon underneath it! How can I get rid of the old icon once and for all?

    Thank you very much for your help!

  • Lando

    Great post!

    One question: when I have directions say from A to B, how do I change both start and end icons?

  • buehgam

    UcWU Lately I was so lacking in money and debits were eating me from everywhere!! that was Until i found out how to earn money on the INTERNET. I landed on surveymoneymaker period net, and started filling in surveys for cash, and yes, I have been much more able to do my things!! i am very glad, that I did this.. With all the financial stress these years, I really hope all of you will give it a chance. – ODAx