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

A battle hardened software developer with a mixed and colorful background, who can't come up with a decent author bio More articles by Jonny Schnittger
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress