En esta entrada veremos, a través de un ejemplo, cómo insertar un mapa google en su Web. Hay que tener en cuenta que en la nueva versión(V3) ya no es necesario obtener una key, por lo que el proceso es más rápido.
Paso 1: Obtener coordenadas.
El primer paso es obtener las coordenadas del mapa. Para ello, pueden utilizar una de las muchas aplicaciones online que existen para ello. Por ejemplo:
-
http://www.arumeinformatica.es/utiles/buscar-coordenadas-gps-en-google-maps/
(En esta aplicación sólo tienes que arrastrar y soltar el icono de localización) -
http://www.agenciacreativa.net/coordenadas_google_maps.php
(En esta aplicación tienes que pulsar sobre el pundo del que quieres conocer las coordenadas, o poner la dirección)
Paso 2: Enlazar con google maps.
Dentro del apartado HEAD de nuestra página pegamos la siguiente línea de código
Paso 3: Enlazar con google maps.
Crear la caja (DIV) donde se mostrará el mapa. En el ejemplo se especifican el alto (350px) y el ancho (450px) de la caja.
Paso 4: Configuramos el mapa.
Creamos la función mostrarGoogleMaps() que será la encargada de crear el mapa. En ella es donde se configuran todos los parámetros del mapa. Este código puede dentro de la etiqueta HEAD.
function mostrarGoogleMaps()
{
//Creamos el punto a partir de las coordenadas:
var punto = new google.maps.LatLng(40.41687477895358, -3.703308399999969);
//Configuramos las opciones indicando Zoom, punto(el que hemos creado) y tipo de mapa
var myOptions = {
zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creamos el mapa e indicamos en qué caja queremos que se muestre
var map = new google.maps.Map(document.getElementById("mostrarMapa"), myOptions);
//Opcionalmente podemos mostrar el marcador en el punto que hemos creado.
var marker = new google.maps.Marker({
position:punto,
map: map,
title:"Título del mapa"});
}
</script>
Paso 4: Creamos la llamada a la función
Con la siguiente línea conseguimos que cada vez que se entre en la página se cargue el mapa.
Ejemplo Completo
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function mostrarGoogleMaps()
{
var punto = new google.maps.LatLng(40.41687477895358, -3.703308399999969);
var myOptions = {
zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mostrarMapa"), myOptions);
var marker = new google.maps.Marker({
position:punto,
map: map,
title:"Título del mapa"});
}
</script>
</head>
<body onload="mostrarGoogleMaps()">
<div id="mostrarMapa" style="width:450px; height:350px"> </div>
</body>
</html>