Add Icon On Google Maps Marker

I’ve utilized the Google Maps API many times over the final whereas and one thing that I’ve never truly touched on is it’s incredible customization alternatives. You’ll beautiful much fashion or customize everything. In this fast post I’ll appear you how to alter the default marker (or stick) to something else.

This is helpful in case you need to show your company symbol or a few other symbol on the outline. I’ll also detail the other configurable choices merely can alter within the google.maps.Marker lesson.

GETTING STARTED

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 ));

The over code will ask get to to the Geo-location API and center the Outline on the clients current area. To really appear the precise point we have to be include a Marker.

ADD THE MARKER

Add a marker is simple, all you are doing is make a unused occurrence of the google.maps.Marker lesson, passing in at a least the outline it’ll be on and the position you need it to be in.

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

Nowadays in spite of the fact that, we’re too progressing to specify a couple of extra options. First we’re getting to make a modern question which is able speak to our icon. It has to have the url of the picture to utilize, but you’ll too indicate extra values such as measure or the stay position (utilized to position the picture 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
});

You can see a full list of Marker options here

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