Volver al indice
Capítulo 2: Conceptos básicos
Creando tu primer mapa
Lo primero que necesitamos para crear nuestro primer mapa, según la documentación de Google Maps es obtener una “API Key” para poder acceder a la API. Aunque es posible, usar la API sin una API KEY es recomendable que uses tu propia API KEY en tus proyectos.
Por motivos de práctica, en este libro no usaremos una API KEY. Pero recomiendo que consigas una, cómo lo recomienda google en este Link.
Antes de crear nuestro mapa necesitamos crear una página web sencilla, que incluya el CSS y Javascript necesarios. En esta práctica usaremos los archivos de práctica de la carpeta número “1”, donde encontrarás los archivos necesarios para ver el ejemplo funcionando. A continuación explicaré el código.
En nuestra carpeta de ejemplo tenemos 3 archivos llamados: index.html, googlemaps.js, style.css, estos son los archivos que componen nuestra aplicación:
index.html: Aquí tenemos el DOM de nuestra aplicación, si abres el archivo podrás ver, que es bastante simple, el cual tiene un DOCTYPE de HTML 5. En la sección <head> tenemos los archivos CSS y Javascript que usa la aplicación, también está cargado el framework javascript Jquery, que es usado a lo largo de este libro.
Esta es la parte más importante:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Con este script cargamos la API de Google Maps, para poderla usar en nuestro proyecto. En la URL existe un parámetro llamado: “sensor” y tiene el valor “false” esto es para indicarle a nuestro mapa, si nuestra aplicación usa algún dispositivo tipo GPS para determinar nuestra posición. Este parámetro es obligatorio y debe de ser “true” o “false”, en nuestro caso será “false”. Addicional a estos pasos recomiendo leer este link
También hemos cargado en la etiqueta <head> el script “googlemaps.js” que es donde está nuestro código javascript para cargar el mapa. En la etiqueta <body> tenemos un elemento DIV con el id “map” que será nuestro contenedor, para nuestro mapa ya que la API nos pide un contenedor donde insertar el mapa.
Nuestro elemento DIV que contendrá nuestro mapa, necesita una altura y un ancho para que el mapa sea mostrado, por eso en el archivo CSS llamado:“style.css” hemos definido su altura y ancho al 100% para que ocupe toda la pantalla.
En el archivo “googlemaps.js” estamos usando el evento “ready” de jquery, para cargar el mapa. Este evento nos permite ejecutar nuestro código cuando el DOM está listo. A continuación voy a explicar el código javascript del archivo “googlemaps.js”.
Lo primero que necesitamos hacer es definir las opciones para nuestro mapa, las cuales serán pasadas como parámetro; de otro modo el mapa no aparecerá. Para crear las opciones de nuestro mapa, primero tenemos que leer cuáles son las opciones disponibles a usar. Esto lo podemos ver en la documentación de la API en este Link.
El uso de GOOGLE.MAPS.NAMESPACE: Al leer la documentación puedes notar que todos los métodos y clases comienzan con “google.maps.” esto es una técnica javascript llamada: ”namespace” que es usada para evitar colisiones de nombre de métodos y variables con otros scripts en tu aplicación, es comúnmente usada cuando tienes muchos scripts en tu aplicación cargados.
Como puedes ver hay muchas opciones que podemos usar para nuestro mapa, puedes leerlas todas para que tengas una idea de lo que puedes hacer y que no. Las opciones del mapa tienen que pasarse como parámetro en un objeto javascript, y cada opción del mapa tiene que ser una propiedad de ese objeto. Esta parte es muy importante que la recuerdes porque a lo largo de toda la documentación, siempre se especifica que tipo de objeto tienes que usar o crear con determinada clase.
En la lista de opciones del mapa, puedes ver en la tabla las columnas tienen los nombre de: Properties, Type y Description. “Type” nos indica que tipo objeto tenemos que usar en esa propiedad. Esto es muy importante.
Para poder crear un mapa yo recomiendo usar como mínimo 3 opciones:“center”, “zoom”, “mapTypeId”. Si consultas la documentación, podrás encontrar los posibles valores de estas propiedades.
Para nuestro ejemplo, hemos creado las opciones del mapa con un objeto simple de esta manera :
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Este objeto tiene 3 propiedades que son las opciones de nuestro mapa. Ahora las propiedades center y mapTypeId tienen definidos otros objetos pero ¿ porque esto es así ? Bueno, si consultamos nuevamente la documentación y vemos el tipo de dato que requiere estas propiedades encontraremos esto:
center : LatLng
mapTypeId : MapTypeId
zoom : number
Nos dice que la propiedad center (lugar donde se centrará el mapa) tiene que ser de tipo “LatLng”, pero ¿Qué es un LatLng ? Bueno, en la documentación podemos hacer click en el nombre y nos llevará a la sección de la API de la clase LatLng y los parámetros que se necesitan para crear el objeto.
Entonces lo que necesitamos es crear un objeto LatLng para asignar a nuestra propiedad center pero ¿ como se crea ?. Pues instanciando la clase google.maps.LatLng y pasandole los parametros requeridos que según la documentación en este caso dice que son : lat:number, lng:number , siendo el tercero opcional.
LatLng(lat:number, lng:number, noWrap?:boolean)
Lat y Lng son la latitud y longitud que definen una position en el mapa usando el sistema WGS84. Para crear posiciones siempre tenemos que saber estos datos de antemano. Ahora sabiendo la definición de esta clase podemos crear nuestro objeto de esta manera :
center: new google.maps.LatLng(-34.397, 150.644)
De esta manera creamos nuestro objeto LatLng, aquí estoy usando la palabra “new” que es usada en javascript para crear instancias de objetos, lo que significa que crea una instancia del objeto LatLng que define una posición en el mapa, recuerda que en google Maps un punto geográfico en el mapa es definido por su latitud y longitud como lo vimos anteriormente.
Ahora pasamos a la propiedad mapTypeId , de nuevo si consultamos la documentación de mapTypeId ,podremos ver que este objeto son constantes definidas y según la documentación de Google Maps son las siguientes :
- ROADMAP : Muestra los mosaicos normales en 2D predeterminados de Google Maps.
- SATELLITE : Muestra imágenes de satélite.
- HYBRID : Muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.)
- TERRAIN : Muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).
Simplemente tenemos que escoger cual de estas opciones queremos usar , escribiéndola como propiedad de la clase “google.maps.MapTypeId”, en este caso usaremos :
google.maps.MapTypeId.ROADMAP
Después tenemos Zoom que simplemente según la documentación es un número comprendido de 0 a 19 que determina el nivel de zoom en el mapa . Ok con esto terminamos con nuestras opciones ahora pasamos a la siguiente línea de código.
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
Para crear nuestro mapa necesitamos crear un objeto mapa instanciando la clase google.maps.Map y segun la documentacion tenemos que pasar como parametro el contenedor donde aparecerá nuestro mapa y las opciones del mapa:
En este caso estamos pasamos nuestro elemento DIV con el id=”map” y las opciones que creamos anteriormente. Bueno y con solo esas líneas de código bastará para crear nuestro primer mapa en nuestra aplicación de prueba.
En esta primera parte fui muy cuidadoso de ir paso a paso de como debes leer la documentación de la API espero que haber sido claro en qué partes de la documentación debemos poner atención a la hora de crear nuestros objetos y saber que son , apartir de aqui no volveré a ser tan descriptivo solo mencionare el tipo de objeto que necesitamos usar en nuestro código y consultando la documentación deberías deberías de saber que necesitas para crearlo y sus parámetros necesarios.
No hay comentarios:
Publicar un comentario