How to add my location button in Google Maps?

As @Praveen said, you have to do it on your own. Here is a piece of code to add a “Your Location” button.

JS fiddle link

HTML

<div id="map">Map will be here</div>

CSS

#map {width:100%;height: 400px;}

JS

var map;
var faisalabad = {lat:31.4181, lng:73.0776};

function addYourLocationButton(map, marker) 
{
    var controlDiv = document.createElement('div');
    
    var firstChild = document.createElement('button');
    firstChild.style.backgroundColor="#fff";
    firstChild.style.border="none";
    firstChild.style.outline="none";
    firstChild.style.width="28px";
    firstChild.style.height="28px";
    firstChild.style.borderRadius="2px";
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor="pointer";
    firstChild.style.marginRight="10px";
    firstChild.style.padding = '0px';
    firstChild.title="Your Location";
    controlDiv.appendChild(firstChild);
    
    var secondChild = document.createElement('div');
    secondChild.style.margin = '5px';
    secondChild.style.width="18px";
    secondChild.style.height="18px";
    secondChild.style.backgroundImage="url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)";
    secondChild.style.backgroundSize="180px 18px";
    secondChild.style.backgroundPosition = '0px 0px';
    secondChild.style.backgroundRepeat="no-repeat";
    secondChild.id = 'you_location_img';
    firstChild.appendChild(secondChild);
    
    google.maps.event.addListener(map, 'dragend', function() {
        $('#you_location_img').css('background-position', '0px 0px');
    });

    firstChild.addEventListener('click', function() {
        var imgX = '0';
        var animationInterval = setInterval(function(){
            if(imgX == '-18') imgX = '0';
            else imgX = '-18';
            $('#you_location_img').css('background-position', imgX+'px 0px');
        }, 500);
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(latlng);
                map.setCenter(latlng);
                clearInterval(animationInterval);
                $('#you_location_img').css('background-position', '-144px 0px');
            });
        }
        else{
            clearInterval(animationInterval);
            $('#you_location_img').css('background-position', '0px 0px');
        }
    });
    
    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: faisalabad
    });
    var myMarker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: faisalabad
    });
    addYourLocationButton(map, myMarker);
}

$(document).ready(function(e) {
    initMap();
}); 

Leave a Comment