3. Mi primer mapa Google

Hoy crearemos nuestro primer mapa. Para ello, debemos copiar el código de ejemplo del post anterior -facilitado por Google en el momento de solicitar una clave para trabajar con el API-, pegarlo en un editor, y guardarlo con el nombre EjemploGoogle.html. Sólo hay que hacer un pequeño cambio: introducir nuestra clave en esta parte:


<script src="http://maps.google.com/maps?file=api&v=2&key=tuclave"

type="text/javascript">

</script>

Si cargamos la página EjemploGoogle.html en un navegador, veremos este mapa:

Esta es la Universidad de Stanford. Aquí se conocieron los creadores de Google, Larry Page y Sergey Brin.

Ahora vamos a editar el archivo EjemploGoogle.html y nos vamos a centrar en esta parte del código JavaScript, que pertenece a la función load():

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Hacemos este pequeño cambio y lo dejamos así:

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(41.387917,2.169919), 13);

¡Ya estamos trabajando con el API de Google! La primera línea crea un objeto de la clase JavaScript GMap2 y representa un mapa único en la página. El constructor de la clase GMap2 necesita un contenedor HTML para crear el objeto, que suele ser un elemento DIV. En otras palabras, decimos a Google: “Oye, por favor, créame un mapa y pónmelo en el “map” del HTML. Gracias.”.

La segunda línea sirve para inicializar el mapa. La clase JavaScript GMap2 implementa el método setCenter() y necesita una coordenada de tipo GLatLng. Nosotros hemos puesto aquí las coordenadas geográficas de la ciudad de Barcelona:

¿Que eres de Bilbao? Pues no pasa nada, escribes las coordenadas de tu ciudad en el código de ejemplo:

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(43.256963,-2.923441), 13);

Y cargas el archivo EjemploGoogle.html en tu navegador:

¿Prefieres Madrid? Escribimos sus coordenadas geográficas en el código JavaScript:

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.416741,-3.70325), 13);

 

Todo esto y más se explica aquí; nosotros continuamos en próximos posts.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: