Geolocalización con GoogleMaps V3 + centrar mapa

Google   |   2 Comentarios

Vamos a explicar como podemos Geolocalización con GoogleMaps V3 a un usuario web dentro de Google maps. Anteriormente a este paso, claro esta debemos tener definido un mapa, bien sea por un componente de CMS o en nuestro código Javascript de nuestra web. Paso seguido a esto y justo después de la instancia a nuestro googleMaps, procedemos a definir los parámetros, para ello como primer paso, preguntaremos si el navegador soporta esta característica, después seguiremos creando la instancia para obtener latitud y longitud

 if(navigator.geolocation) navigator.geolocation.getCurrentPosition(function(position){ var positionGeo = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

Despues del primer paso, ya tendríamos almacenados latitud y longitud en nuestra variable javascript positionGeo, ahora vamos a definir una imagen para el marcador, ya que en este caso vamos a personalizar este aspecto

var image = new google.maps.MarkerImage("[ruta de la imagen que tengamos en nuestra web previamente almacenada, ejemplo: www.dominio.com/imagen/gmaps.png]");

Ahora procedemos creando una marca para nuestro mapa, a esta marca le podemos indicar muchísimos parámetros, pero definitivamente en este caso, solo definimos, posición,mapa,titulo, e imagen de la marca:

 var marker = new google.maps.Marker({ position: positionGeo, map: map, title: 'Estas aqui', icon: image }); 

En este punto cabe aclarar que el

map.setCenter(positionGeo);

Como unico parametro de este metodo recibe un objeto tipo posicion (Lat,Lng) que al principio creamos. Una vez hecho esto hemos llegado al fin de esta explicación, pero antes vamos a mostrar un ultimo ejemplo del resultado de lo explicado anteriormente como un bloque de código, para que no quepa duda:

 if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var positionGeo = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var image = new google.maps.MarkerImage("[ruta de la imagen que tengamos en nuestra web previamente almacenada, ejemplo: www.dominio.com/imagen/gmaps.png]"); var marker = new google.maps.Marker({ position: positionGeo, map: map, title: 'Estas aqui', icon: image }); map.setCenter(positionGeo); }); } 

¿Te ha gustado el artículo?

(1 votos, promedio: 3,00 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes