Cómo utilizar la API de Google Maps


A esta altura ya todos conocemos a Google Maps, un producto de Google Inc. que nos ayuda a la hora de encontrar direcciones, calles, comercios, etc. Google Maps tiene hace tiempo una API para que podamos integrar facilmente la aplicacion en nuestros sitios web y asimismo integrar muchas funcionalidades interesantes para que nuestros usuarios puedan interactuar con la aplicación de manera brillante.

Hoy en Bitdate vamos a enseñarte como integrar Google Maps a cualquier sitio web.

 

Integración básica

Antes que nada debemos registrar nuestra API para tener nuestra ID o clave de acceso, entonces vamos al sitio de registro para registrarnos y obtener nuestra tan preciada API.

Una vez registrados obtendremos la API que es un número de identificación único que funcionará solo en el dominio con el cual la hayamos registrado.

Ahora para integrar la API hacemos lo siguiente, generamos un documento html (ej: ejemplo.html) y colocamos el siguiente código antes utilizando las etiquetas <script></script> 

y modificamos donde dice ABQIAAAAHhzikxCQyRAS8ryQoB75mRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQiqBRnE1Iky5sZfKGxzYbUanZ0HA por nuestra API la cual fue generada en el paso anterior. Ahora dentro del encabezado (<head></head>) de dicho documento incluimos la siguiente función:

Una vez que tenemos la función definida, solo resta hacer la llamada dentro del documento para imprimir el mapa donde quisiéramos. Para ésto utilizaremos un div con el id map que es con el cuál esta enlazado dentro de la función antes creada.

Con esto mostraremos un mapa de 600px de ancho por 800px de alto.

Para terminar cabe aclarar que todavía existen muchas otras configuraciones que nos permiten personalizar el mapa a nuestro gusto, pero el motivo de este artículo era el de mostrarles cómo funciona la api de Google Maps y cómo se integra a un sitio web.

Nos han visto a través de:

Enviar Comentario

Copyright © 2012 - Bitdate - Potenciado por WordPress | Acceder

Compositio Theme porDesign Disease desde PremiumThemes.com