Detectar la longitud y latitud sobre un mapa de Google Maps

08/Oct/2012 Google , , , , , , 6 Comentarios

En este ejemplo vamos a ver cómo podemos detectar la longitud y la latitud de un punto de un mapa de Google Maps una vez que hagamos click sobre él.

Lo primero que vamos a hacer es cargar el mapa de Google Maps sobre una capa de nuestra página web:

  1. var myLatlng = new google.maps.LatLng(40.674389,-4.700432);
  2.  
  3. var mapOptions = {
  4. zoom: 12,
  5. center: myLatlng,
  6. mapTypeId: google.maps.MapTypeId.ROADMAP
  7. };
  8.  
  9. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

Vemos que en este proceso de carga del mapa hemos definido un objeto LatLng para darle un centro al mapa y que el mapa en sí se construye con un objeto Map.

Por si hay algún despistado, en la cabecera de nuestra página hay que cargar la librería de Google Maps desde la dirección https://maps.googleapis.com/maps/api/js?sensor=false

Ahora vamos a la parte central de nuestro ejemplo, detectar la longitud y latitud en el click. Así que lo que tenemos que hacer es registrar un evento onclick sobre el mapa. Para ello utilizamos el método addListener del mapa:

  1. google.maps.event.addListener(map, 'click', function(event) { ... });

Dentro del evento que recibimos como parámetro uno de los datos que viene es la posición en latitud y longitud, en concreto la propiedad latLng. Así que la volcamos sobre una capa de nuestra página web:

  1. google.maps.event.addListener(map, 'click', function(event) {
  2. document.getElementById("posicion").innerHTML = event.latLng;
  3. });

Ya tenemos detectada la longitud y latitud al pinchar sobre un mapa de Google Maps.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

6 comentarios en “Detectar la longitud y latitud sobre un mapa de Google Maps”

Víctor Cuervo

Mauricio

Muchas gracias por tu código. Lo utilize para mi aplicación y funciona muy bien.

Víctor Cuervo

Víctor Cuervo

Genial Mauricio!!! Nos alegra mucho leer que hay gente a la que le sirve el código.

Víctor Cuervo

Christian

Excelente, gracias, directo al grano.

Víctor Cuervo

Víctor Cuervo

@christian, me alegro que te haya gustado. Comentarios como el tuyo le ayudan a uno a seguir escribiendo. Gracias.

Víctor Cuervo

irodri

Hola amigo, tengo una pregunta, como puedo agregar un puntero visual que el usuario pueda jalar y obtener la ubicación de ese puntero, no solo con click sino arrastrando este.

Ojala me haya dejado entender.

saludos.

Víctor Cuervo

Miguel Castro

hola amigo…encontraste lo q buscabas? yo igual necesito lo que mencionas, aunq sea muy tarde de tu comentario…gracias

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*