En cualquier web de un comercio que se precie, siempre tenemos un Google Map indicando su localización. Con este fragmento por un lado nos proponemos a enseñaros como insertar este mapa y ya de paso dar un repaso a eventos y métodos de JavaScript.
Para realizar el mapa lo primero que tenemos que tener a mano es la referencia de la API de Google Maps donde encontraremos todos lo que necesitamos. Aquí os la dejo.
Seguimos con un sencillo HTML que por un lado enlaza a nuestro archivo script.js donde llamaremos a la API y montaremos el mapa y por otro preparamos un contenedor con id=“mapa” donde va ir nuestro mapa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Google Map</title> <link href="estilo.css" type=text/css rel=stylesheet> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>El Castillo Santa Barbara, Alicante</h1> <p></p> <div id="mapa"></div> </body> </html> |
También tenemos un CSS donde configuramos que tamaño va a tener nuestro mapa. Para ello utilizamos el selector #mapa.
|
1 2 3 4 5 6 7 8 9 |
h1{ font-family: "Arial"; color: #2980b9; } #mapa { width: 720px; height: 500px; } |
Y ya por fin nuestro código JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// JavaScript source code function inicializar() { //Opciones del mapa var OpcionesMapa = { center: new google.maps.LatLng(38.3489719, -0.4780289000000266), mapTypeId: google.maps.MapTypeId.SATELLITE, //ROADMAP SATELLITE HYBRID TERRAIN zoom: 16 }; var miMapa; //constructor miMapa = new google.maps.Map(document.getElementById('mapa'), OpcionesMapa); //Añadimos el marcador var Marcador = new google.maps.Marker({ position: new google.maps.LatLng(38.3489719, -0.4780289000000266), map: miMapa, title:"Santa Barbara" }); } function CargaScript() { var script = document.createElement('script'); script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=inicializar'; document.body.appendChild(script); } window.onload = CargaScript; |
En este código tenemos dos funciones y una instrucción. Se va a ejecutar de abajo arriba asi es que comenzamos por la última línea:
|
1 |
window.onload = CargaScript; |
Esta línea interactúa con el navegador a través del objeto window del BOM (Browser Object Model) y espera al evento onload (fin de la carga de la pagina) llamando a la función CargaScript cuando esta acción ocurra.
Por lo que lo siguiente que se ejecuta es la función CargaScript:
|
1 2 3 4 5 |
function CargaScript() { var script = document.createElement('script'); script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=inicializar'; document.body.appendChild(script); } |
Cuando entramos a esta función lo primero que tenemos es el método createElement que crea una etiqueta script, la siguiente línea le añade el atributo src con la url a la API de google maps. Y ya la última línea de esta función añade la etiqueta al final de nuestro body mediante el método appendChild. Así es que habremos modificado dinámicamente nuestro HTML y habrá quedado de la siguiente forma:
|
1 |
<script src=”http://maps.googleapis.com/maps/api/js?sensor=false&callback=inicializar”> |
En la url que hemos montado si nos fijamos pasamos dos parámetros, el primero sensor que indica si el dispositivo tiene gps, al ser web le pasamos el valor false y el segundo callback que indica la función donde va incializar el mapa. Y así, ya pasamos a la primera función que tiene nuestro script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function inicializar() { //Opciones del mapa var OpcionesMapa = { center: new google.maps.LatLng(38.3489719, -0.4780289000000266), mapTypeId: google.maps.MapTypeId.SATELLITE, //ROADMAP SATELLITE HYBRID TERRAIN zoom: 16 }; var miMapa; //constructor miMapa = new google.maps.Map(document.getElementById('mapa'), OpcionesMapa); //Añadimos el marcador var Marcador = new google.maps.Marker({ position: new google.maps.LatLng(38.3489719, -0.4780289000000266), map: miMapa, title:"Santa Barbara" }); } |
En la función inicializar lo primero que encontramos en un objeto, OpcionesMapa. Aquí definiremos nuestro mapa. Lo primero que hacemos es indicar mediante la clase LatLng cual va a ser el centro de nuestro mapa, en mi caso he elegido el castillo que hay en la ciudad donde vivo. Para ello lo que hacemos es pasar como primer parámetro la latitud y como segundo la longitud del punto que queremos representar. En la siguiente línea mediante la clase MapTypeId le decimos que tipo de mapa queremos que muestre, yo he elegido satélite pero como veis os he dejado en la línea comentada las opciones que tenéis. Y la siguiente línea define a qué distancia queréis que se muestre el mapa.
Depende del resultado que busquéis existen muchas más opciones. Aquí os dejo todas las opciones disponibles: Map Options
Y ahora ya vamos a construir nuestro mapa con la siguiente instrucción:
|
1 |
miMapa = new google.maps.Map(document.getElementById('mapa'), OpcionesMapa); |
La variable miMapa se va a convertir en un objeto que contiene el mapa que vamos a crear mediante la clase Map. En el primer parámetro de este constructor le decimos donde se debe colocar el mapa. Lo hacemos con el acceso al DOM que nos ofrece JavaScript mediante el método getElementById. Como podéis ver a este método le pasamos el identificador del div que hemos creado en nuestro HTML y nos devuelve dicho nodo. El segundo parámetro al constructor le pasamos las opciones que anteriormente hemos definido.
Con esto nuestro Google Map ya estaría disponible en nuestra web, no hace falta hacer nada más. Pero claro, todo mapa que se precie debe tener un marcador que indique el sitio exacto que mostramos y eso lo hacemos con las últimas líneas que me quedan por explicaros:
|
1 2 3 4 5 6 |
//Añadimos el marcador var Marcador = new google.maps.Marker({ position: new google.maps.LatLng(38.3489719, -0.4780289000000266), map: miMapa, title:"Santa Barbara" }); |
Esto lo haremos mediante la clase Marker, como veis es muy sencillo, en la primera línea indicamos la latitud y la longitud del marcador, la segunda línea le pasamos el objeto que hemos creado con el mapa y la tercera opción le decimos que titulo queremos que se muestre si el usuario pone el cursor sobre el marcador.
Este marcador se puede personalizar pero eso ya os toca a vosotros.
Y para acabar os dejo una captura pero podéis ver el resultado en codepen, una herramienta que ya os hemos recomendado:
