En esta entrada vamos a ver como añadir un mapa de Google maps, así como añadirle marcadores y obtener las coordenadas actuales.
Lo primero que debemos hacer para utilizar la api de google maps es añadir el script a nuestro html para ello incluimos la siguiente linea:
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
Después debemos crear un div contenedor donde se incrustará el mapa, debemos darle un id para poder asignárselo al mapa:
< div id="mapa" style="width: 450px; height: 350px;"></div>
Por último creamos una función que deberemos llamar al inicio y creará el objeto mapa que se mostrará dentro del div:
var map = new google.maps.Map(document.getElementById('mapa'), { center: {lat: 43.2686751, lng: -2.9340005}, scrollwheel: false, zoom: 8 });
Como podemos observar a la hora de crear el objeto mapa le pasamos como primer parámetro el elemento del DOM donde de insertará el mapa, en este caso el div con id mapa.
Como segundo parámetro (Opcional) le pasamos un objeto con diferentes opciones, en este caso le indicamos las coordenadas donde queremos que aparezca centrado el mapa con la opción center, desactivamos la rueda del ratón con scrollwhell a false y le asignamos el zoom a 8.
Veamos como quedaría nuestro código completo:
<!DOCTYPE html> <html lang="es"> <head> <title>Insertar Mapa</title> <meta charset="utf-8" /> < script type="text/javascript" src="https://maps.google.com/maps/api/js"></script> < script> function initMap() { // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar. var map = new google.maps.Map(document.getElementById('mapa'), { center: {lat: 43.2686751, lng: -2.9340005}, scrollwheel: false, zoom: 8 }); } </script> </head> <body onload="initMap()"> <h1>Insertar Mapa</h1> < div id="mapa" style="width: 450px; height: 350px;"> </div> </body> </html>
En nuestro navegador se mostraría el siguiente mapa:
En las opciones que le pasamos como parámetro a la hora de crear el mapa podemos definir que se muestren o no poniendo a true o a false lo siguientes controles:
zoomControl: El control del zoom.
mapTypeControl: Seleccionar tipo de mapa.
scaleControl: El control de la escala.
streetViewControl: El control de streelView.
rotateControl: Control de rotación.
Ejemplo:
var map = new google.maps.Map(document.getElementById('mapa'), { center: {lat: 43.2686751, lng: -2.9340005}, scrollwheel: false, zoom: 8, zoomControl: true, rotateControl : false, mapTypeControl: true, streetViewControl: false, });
Para obtener más información acerca de los controles podemos acudir a la documentacuión de google maps: https://developers.google.com/maps/articles/v321-controls
Para finalizar esta entrada comentaros que podemos centrar un mapa ya creado utilizando la función setCenter():
map.setCenter({lat: 37.3000, lng: -120.4833});
Índice – <– Capítulo Anterior – Capitulo Siguiente –>
Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts :-),También puedes seguirme en Twitter en @revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.