Mostrar un mapa interactivo de Google Maps

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:

Captura de pantalla_2016-01-04_13-14-39

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.