Modificar longitud y latitud en Google Maps

17/Ene/2009 Google , , , , , , , 5 Comentarios

Las posiciones dentro de Google Maps se indican mediante una longitud y una latitud. Concretamente Google Mapss nos ofrece la clase GLatLng, la cual pasándola como parámetro la latitud y la longitud nos devolverá un punto en concreto.

En este ejemplo vamos a crear un formulario que nos permita introduccir latitudes y longitudes que actualicen el centro del mapa cargado en pantalla.

Lo primero será cargar el mapa de Google Maps. Para ello utilizamos la función load() estándar:

  1. <script type="text/javascript">
  2.  
  3. var map;
  4.  
  5. function load(){
  6. if (GBrowserIsCompatible()) {
  7. map = new GMap2(document.getElementById("mapa"));
  8. map.setCenter(new GLatLng(40.655997,-4.700518), 15);
  9. }
  10. }
  11. </script>

Hay que destacar que en este caso la variable que instancia el objeto GMap2, y por consiguiente el mapa, la declaramos fuera de la función, como una variable global. Esto lo hacemos ya que a posteriorío vamos a crear otras funciones que interactuen con el mapa.

En el cuerpo de la página, en el evento onLoad cargamos esta función y por cuestiones de optimización llamamos a GUnload en el evento onUnload.

  1. <body onload="load();" onunload="GUnload();">

Una vez cargado el mapa creamos el formulario. Esto es una tarea sencilla, ya que serán dos campos input de tipo text donde introduzcamos la latitud y la longitud. Al formulario le vamos a añadir dos botones. Uno que desplace el mapa a la latitud y longitud introducida por el usuario y el segundo que nos devuelva el mapa a la posición inicial.

  1.  
  2. <label for="latitud">Latitud: </label><input type="text" id="latitud" value="40.655997">
  3. <label for="longitud">Longitud: </label><input type="text" id="longitud" value="-4.700518"><br />
  4. <input type="button" value="Cambiar" onClick="cambiar(document.getElementById('latitud').value, document.getElementById('longitud').value);"/>
  5. <input type="button" value="Punto de Origen" onClick="cambiar(40.655997,-4.700518);"/>
  6.  
  7. </form>
  8.  

Vemos que ambos botones en el evento onClick están llamando a la función cambiar, la cual recibe dos parámetros longitud y latitud.

Ahora pasamos a codificar dicha función. Para mover el mapa a una latitud y longitud en concreto deberemos de utilizar el método .panTo, el cual recibe una clase GLatLng. La clase GLatLng es muy sencilla de instanciar, ya que solo hará falta indicarle la latitud y longitud.

El código de la función nos quedaría de la siguiente forma:

  1. function cambiar(latitud,longitud){
  2. map.panTo(new GLatLng(latitud,longitud));
  3. }

Vemos que el método .panTo lo ejecutamos sobre la variable global map que es la que instancia el objeto GMap2.

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

5 comentarios en “Modificar longitud y latitud en Google Maps”

Víctor Cuervo

Txikitxu102

Muchas gracias!! hacia tiempo que estaba buscando justamente este ejemplo.

Un saludo!

Víctor Cuervo

ALEJANDRA HUAYLLA

QUISIERAN SABER LAS TABLAS DE LATITUD SEGUN LAS HORAS SOL DE AMERICA DEL SUR (PERÚ) GRACIAS

Víctor Cuervo

Fernando

excelente
recotnra util este ejemplo

Víctor Cuervo

gino

hola muy buen aporte muchas gracias por brindarnos informacion ahora nesecito saber si se puede poner algun codigo para q en vez q solo centre el mapa representando la ubicacion pueda poner un icono ejemplo al poner las coordenadas latitud:xxxxxxx longitud: xxxxxxx me aparesca un icono de una bicicleta por ejemplo indicando su ubicacion ..
si se puede staria muy agradecido q me ayudaras con el codigo
gracias hasta pronto y suerte

Víctor Cuervo

Anónimo

Mil gracias compañero!

Desconocia la funcion ‘panTo’

Un saludo y sigue así!

¿Algo que nos quieras comentar?

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

*

*