Zentrum Karte zu meinem Standort

Question

Ich habe den folgenden Code:

map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 13, 
    center: new google.maps.LatLng(53.529773,-113.509387), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

Wie kann ich ersetzen:

center: new google.maps.LatLng(53.529773,-113.509387)

mit meinem aktuellen Standort, programmatisch

Answer 1

Ihr Code korrekt aussieht, Ich vermute, dass Ihr Problem darin besteht, dass auf Ihrem Gerät keine Standortdienste aktiviert sind. Wenn dies der Fall ist, müssen Sie die Sicherheitsabfrage nicht akzeptieren, wenn sie ausgeführt wird Das erste Mal.

Die folgende Demo-I aus der Google-modifizierten Karten-API-Referenz https://developers.google.com/maps/documentation/javascript/

HTML Demo

<div id="map"></div> 
<!-- Replace the value of the key parameter with your own API key. --> 
<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> 
</script> 

CSS

/* Always set the map height explicitly to define the size of the div 
* element that contains the map. */ 
#map { 
    height: 100%; 
} 
/* Optional: Makes the sample page fill the window. */ 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

JS

function initMap() { 

    // Pick a start point, I live in Australia, so just picked the middle of OZ 
    var myLatLng = {lat: -25.363, lng: 131.044}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: myLatLng 
    }); 

    // Mark it on the map, this is the original center 
    var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: 'Hello World!' 
    }); 

    // If location services is enabled, the following should center the map on your location. 
    if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
      var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      map.setCenter(location); 
       }); 
    } 
}