Cómo incluir un mapa de google en tu web.
En este mini “Tutorial Google Maps” vamos a utilizar el API de Google Maps para incluir un mapa en tu aplicación web. La versión que utilizaremos será la última que en el momento de la creación de este tutorial es la versión V3.
En esta versión “V3” ya no es necesario utilizar una Key, solo será necesario si quieres obtener algunas ventajas o menos limitaciones. No obstante dejo los parrafos siguientes en azul que describen como obtener tu Key por si necesitas crear una para tu aplicación web.
Antes de nada tenemos que tener una cuenta en Google, una vez que hayamos hecho login con nuestra cuenta podemos acceder a la consola del API, aquí es dónde vamos a generar el Token o Key que nos permité usar Google Maps en nuestras aplicaciones, una vez que estemos logeados nos dirigimos a esta dirección:
https://code.google.com/apis/console/
El navegador nos llevará a una página en la que podemos ver todos los servicios de Google en los que estamos dados de alta, tenemos un ítem en el menú de la izquierda en el que pone API Access, desde ahí podemos obtener el Key necesario para utilizarlo en nuestra aplicación, podemos generar otro borrando el anterior si queremos eliminar el antiguo, además si solo vamos a utilizar el Key desde una aplicación web debemos escribir la URL desde la que Google permitirá la utilización de la Key, así impediremos que otros usuarios reutilicen nuestra Key ya que diariamente tiene un uso máximo (aunque este es de 25.000 veces).
Este es el código que tiene Google en su documentación, solo nos hace falta introducir el Key por la que has obtenido antes y cambiar las coordenadas que quieres que muestre tu mapa, en este ejemplo mostraré una isla de Tailandia (Ko Chang) que es dónde debería estar y no aquí haciendo este mini-tutorial.
El código tiene algunas ligeras modificaciones, pero principalmente es así, la Key no es necesaria a no ser que vayas a quieres saltarte algunas limitaciones.
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 29 | <--! Tutorial google Maps -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(12.570648483963033, 101.44157409667969),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:60%; height:60%"></div>
</body>
</html> |
Para obtener las coordenadas que necesitas introducir en el código de la aplicación, puedes escribir la dirección en Google Maps, por ejemplo “Ko Chang” y cuando lo muestre pegar este código JavaScript en la barra del navegador, sin las comillas “ javascript:void(prompt(”,gApplication.getMap().getCenter())); “, después presionamos intro y el navegador te mostrará un prompt con las coordenadas del centro del mapa.
Si lo prefieres puedes utilizar algún diseñador de mapas que te muestre las coordenadas, tipo QuickMaps.
Este es el resultado: