私の位置をLocationpicker jqueryプラグインを有効にしました

Question

現在の位置を取得するには、Googleマップにボタンを表示する必要があります。

私は、ポップアップGoogleマップオプションにlocationpickerプラグインを使用しています。現在、私は

CURRENT_LOCATION使用しています..真

オプションを、それは私のために何もしないです

Answer 1

例を提供フィドル次使用してください： https://jsfiddle.net/mi3afzal/ogsvzacz/2/

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(); 
}); `