Usando la API de google maps, ¿cómo podemos establecer la ubicación actual como la ubicación predeterminada establecida mediante la función map.setCenter?

Estoy escribiendo código JavaScript con la API de Google Maps.Usando la API de google maps, ¿cómo podemos establecer la ubicación actual como la ubicación predeterminada establecida mediante la función map.setCenter?

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

El código anterior establece la ubicación predeterminada del lienzo del mapa en Palo Alto.

¿Cómo podemos escribir la secuencia de comandos de tal manera que la función setCenter apunta automáticamente a la ubicación actual del cliente?

Fuente

2010-05-17 HVS

La API de geolocalización es la respuesta obvia. Sin embargo, incluso si la API está disponible, puede tomar algo de tiempo en el lado del navegador para obtener una solución de ubicación. Mientras tanto, debes mostrarle al usuario una ubicación temporal y luego mover el mapa una vez que la ubicación esté arreglada. Esto suena como un desafío GUI para que se sienta bien. Me gusta la solución de Daniel Vassallo si una ubicación aproximada es aceptable. Mover el mapa después de que está cargado me parece cuestionable. –

-1

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

Fuente

2010-05-17 17:17:36 nex

El código anterior carga el mapa con la ubicación establecida como palo alto. Mi verdadera pregunta era, ¿cómo podemos establecer la ubicación automáticamente en la ubicación actual del cliente? – HVS

Oh veo ... para eso necesitaría funciones de geolocalización ... comience a leer esto: http://www.mozilla.com/en/firefox/geolocation/ – nex

Puede utilizar la API de GeoLocation HTML5 en buscadores que la admitan.

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

Fuente

2010-05-17 17:32:22 ceejayoz

http://isgeolocationpartofhtml5.com/ – npdoty

@npdoty posible HTML5, la marca, no la especificación, es relevante aquí. – Ross

Tenga en cuenta que map.setCenter ya no aceptará un nivel de zoom. Si también desea cambiar el nivel de zoom, use map.setZoom. – superluminary

Puedo pensar en dos opciones posibles.

Primero es posible que desee considerar el uso del GeoLocation API como ceejayoz suggested. Esto es muy fácil de implementar, y es una solución totalmente del lado del cliente. Para centrar el mapa mediante geolocalización, simplemente use:

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

... dentro de la success() devolución de llamada del método de la localización geográfica getCurrentPosition().

Desafortunadamente, solo unos pocos navegadores modernos actualmente admiten la API de GeoLocation. Por lo tanto, también puede considerar usar una solución del lado del servidor para resolver la dirección IP del cliente en la ubicación del usuario, utilizando un servicio como MaxMind's GeoLite City. Luego, simplemente puede geocodificar la ciudad y el país del usuario dentro del navegador, utilizando la API de Google Maps. El siguiente podría ser un breve ejemplo:

<!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>

Sólo tiene que sustituir userLocation = 'London, UK' con la dirección resuelta del lado del servidor. La siguiente es una captura de pantalla del ejemplo anterior:

Render google map in based on selected location

puede quitar el marcador mediante la eliminación de la línea map.addOverlay(new GMarker(bounds.getCenter()));.

Fuente

2010-05-17 18:33:36

Buen punto re: geolocalización desde IP. – ceejayoz

Gracias por la explicación. Nunca se me ocurrió que el componente del lado del cliente que se usa comúnmente (antes de HTML5) no tiene un soporte de geolocalización totalmente integrado. – HVS

que ya existe en la API de Google:

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

Hay varios hilos con la misma pregunta ...

Fuente

2011-02-07 18:33:55 Txugo

Una versión actualizada de respuesta 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' 
     }); 
    }

Fuente

2015-01-09 15:12:18 user1012181

-1

Try este hermano: centré Indonesia utilizando lat y lng.

$(document).ready(function() { 
 
    var mapOptions = { 
 
     zoom: 4, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    
 
    var center = new google.maps.LatLng(-2.548926, 118.0148634); 
 
    map.setCenter(center,4); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
 

 
<div id="map" style="width:600px; height:450px"></div>

Fuente

2015-01-09 16:34:33

Usando la API de google maps, ¿cómo podemos establecer la ubicación actual como la ubicación predeterminada establecida mediante la función map.setCenter?

Respuesta

Cuestiones relacionadas