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

que asignamos en el parámetro map, esta anteriormente creado, y es uno de los pasos anteriores a esta funcionalidad, si no tenemos un mapa previo, no tendremos donde poner la marca, ni mapa que centrar. Como ultimo paso, y después de haber definido lo que en este caso hemos necesitado, vamos a proceder a centrar el mapa, para ello google pone a nuestra disposición el método que se aplica sobre un objeto map. Procedemos de la siguiente forma:
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?
Sé el primero en calificar esta publicación.
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

2 Comentarios

Rubén

Hola Betty, Sí podéis utilizarlo en vuestra web siempre y cuando hagáis mención a Codigonexo. Y sí estamos abiertos al guest posting.

Betty

Gracias por el post. ¿Podemos usarlo en nuestra web? Estamos realizando un estudio mas a fondo sobre ese tipo de negocios Otra pregunta mas, ¿podemos hacer guest posting? Gracias!