web-dev-qa-db-fra.com

À l'aide de l'API Google Maps, comment définir l'emplacement actuel comme emplacement par défaut à l'aide de la fonction map.setCenter?

J'écris du code JavaScript à l'aide de l'API Google Maps.

map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

Le code ci-dessus définit l'emplacement par défaut du fond de carte sur Palo Alto. 

Comment pouvons-nous écrire le script de manière à ce que la fonction setCenter pointe automatiquement sur l'emplacement actuel du client?

javascriptgoogle-mapsgeolocation
19
HVS

Vous pouvez utiliser l'API HTML5 GeoLocation dans les navigateurs qui le prennent en charge.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  alert('geolocation not supported');
}

function success(position) {
  alert(position.coords.latitude + ', ' + position.coords.longitude);
}

function error(msg) {
  alert('error: ' + msg);
}
15
ceejayoz

Je peux penser à deux options possibles.

Tout d’abord, vous pouvez envisager d’utiliser l’API GeoLocation comme ceejayoz a suggéré . Ceci est très facile à mettre en œuvre et constitue une solution entièrement côté client. Pour centrer la carte avec GeoLocation, utilisez simplement: 

map.setCenter(new google.maps.LatLng(position.coords.latitude, 
                                     position.coords.longitude), 13);

... dans le callback success() de la méthode getCurrentPosition() de GeoLocation.

Malheureusement, seuls quelques navigateurs modernes prennent actuellement en charge l’API de géolocalisation. Par conséquent, vous pouvez également envisager d'utiliser une solution côté serveur pour résoudre l'adresse IP du client dans l'emplacement de l'utilisateur, en utilisant un service tel que GeoMite City de MaxMind . Ensuite, vous pouvez simplement géocoder la ville et le pays de l'utilisateur dans le navigateur, à l'aide de l'API Google Maps. Ce qui suit pourrait être un bref exemple:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark) {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
             map.addOverlay(new GMarker(bounds.getCenter()));
          }
       });
    }
    </script> 
  </body> 
</html>

Il suffit de remplacer userLocation = 'London, UK' par l'adresse résolue côté serveur. Voici une capture d'écran de l'exemple ci-dessus:

Render google map in based on selected location

Vous pouvez supprimer le marqueur en supprimant la ligne map.addOverlay(new GMarker(bounds.getCenter()));.

9
Daniel Vassallo

qui existe déjà dans le google api:

if (GBrowserIsCompatible()) 
{   
    var map = new google.maps.Map2(document.getElementById("mapdiv"));

    if (google.loader.ClientLocation) 
    {        
        var center = new google.maps.LatLng(
            google.loader.ClientLocation.latitude,
            google.loader.ClientLocation.longitude
        );
        var zoom = 8;

        map.setCenter(center, zoom);
    }
}

Il y a plusieurs discussions avec la même question ...

8
Txugo

Une version mise à jour de la réponse de @ ceejayoz:

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert('geolocation not supported');
    }
    function error(msg) {
        alert('error: ' + msg);
    }
    function success(position) {

        var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var mapOptions = {
            zoom: 12,
            center: myLatlng,
            scaleControl: false,
            draggable: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false
        }


        map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Main map',
            icon: iconBase + 'arrow.png'
        });
    }
0
user1012181

Cette solution essaie d’obtenir d’abord l’emplacement de l’utilisateur auprès du navigateur.

mapUserLocation = () => {
  navigator.geolocation
    ? navigator.geolocation.getCurrentPosition(
        handlePosition,
        getLocationFromIP
      )
    : getLocationFromIP();
};

getLocationFromIP = () => {
  fetch("http://ip-api.com/json")
    .then(response => response.json())
    .then(data => {
      data.lat &&
        data.lon &&
        updateUserPosition({
          lat: data.lat,
          lng: data.lon
        });
    })
    .catch(error => {
      console.log(`Request failed: `, error);
    });
};

handlePosition = position => {
  const userPos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  updateUserPosition(userPos);
};

updateUserPosition = position => {
  map.setCenter(position, 13);
};

et appelez comme ça: 

mapUserLocation();
0
Mas