Crear un mapa básico con la API de Google

En esta entrada se va a realizar un mapa básico con la API de Google, y comprobaréis cómo, con unos pocos fundamentos de código, podéis obtener un resultado bastante competente y con funcionalidades de Google como Street View.

Una de las principales ventajas de la API de Google es que se puede integrar en varias plataformas (móvil, web, etc.) y se puede trabajar con diferentes tipos de código.

Google posee innumerables productos pero el que realmente nos interesa en esta ocasión es la Google Maps JavaScript API con la que poder realizar tus propios mapas con el lenguaje de programación JavaScript y HTML5. Así, lo primero que debemos hacer es obtener una clave para nuestra aplicación a la que optaremos a través de nuestra cuenta de gmail.

Así, realizamos los siguientes pasos y obtenemos nuestra autentificación (API KEY), ojo ten en cuenta su caducidad y límites de uso:

Este sería el código de ejemplo, a continuación lo analizaremos para ver cómo podemos modificarlo para realizar el mapa que estamos interesados.

1. Antes que nada vamos a referenciar la aplicación al lenguaje de programación HTML5 (en el curso sobre HTML5 de TYC GIS puedes encontrar más detalle sobre esto). Para ello sigue la primera línea de código. Posteriormente abriremos la etiqueta <html></html> dónde incluiremos todo el desarrollo de nuestro visor.

2. Dentro de la etiqueta <head></head> podemos incluir el título de la aplicación dentro de la tag <title></title> y el estilo dentro de <style></style>. Con estas indicaciones hacemos que el mapa creado abarque el 100% de la página o cuerpo html.

3. Dentro de la etiqueta <body></body> establecemos un elemento <div></div> que es donde vamos a colocar nuestro mapa.

Además un <script></script> donde incluiremos la variable map y la función Map() también llamada constructor y el objeto Map y dos propiedades center y zoom obligatorias para todo mapa. Centraremos el mapa en las coordenadas que nos interesen y el nivel de zoom.

Incluimos otra etiqueta tipo <script></script> donde hacemos referencia a nuestra API KEY:

4. Guardamos nuestro archivo que hemos estado escribiendo en un editor de texto tipo Notepad++ y posteriormente lo abrimos en un navegador y tendremos nuestro mapa con las funcionalidades básicas de Google Maps.

Ya has podido comprobar de qué manera más sencilla puedes crear un mapa que puedes mostrar en cualquier servidor web. Si quieres profundizar en realizar aplicaciones web mapping más desarrolladas, TYC GIS te ofrece los siguientes cursos.

(2 votos, promedio: 5,00 de 5)