How to add my location button in Google Maps?

Question

I'd like to know if it's possible to add as default controls option my location button.

Is there any way to make it as default or I need to make button with geolocation and then trigger the click event on that button in order to navigate user to the current location?

Answer 1

I've slightly amended mi3afzal's fiddle to drop the jQuery dependency and add retina support. Also, I suggest using the center_changed event rather then dragend as the center could be changed programatically, e.g. when adding markers and extending bounds.

https://jsfiddle.net/ogsvzacz/6/.

var map,     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 = '0';     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-2x.png)';     secondChild.style.backgroundSize = '180px 18px';     secondChild.style.backgroundPosition = '0 0';     secondChild.style.backgroundRepeat = 'no-repeat';     firstChild.appendChild(secondChild);      google.maps.event.addListener(map, 'center_changed', function () {         secondChild.style['background-position'] = '0 0';     });      firstChild.addEventListener('click', function () {         var imgX = 0,             animationInterval = setInterval(function () {                 imgX = -imgX - 18 ;                 secondChild.style['background-position'] = imgX+'px 0';             }, 500);          if(navigator.geolocation) {             navigator.geolocation.getCurrentPosition(function(position) {                 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);                 map.setCenter(latlng);                 clearInterval(animationInterval);                 secondChild.style['background-position'] = '-144px 0';             });         } else {             clearInterval(animationInterval);             secondChild.style['background-position'] = '0 0';         }     });      controlDiv.index = 1;     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); }   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); 

Answer 2

As @Praveen said, you have to do it by your own. Here is a piece of code to add "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(); });