Tutorial de Google Maps para principiantes. 1ª Parte
Seguramente ya habrás visto alguna vez la web de GoogleMaps y lo útil que puede resultar para encontrar un sitio en cualquier punto del mundo. Quizás también hayas utilizado alguna aplicación que use la tecnologÃa de GoogleMaps para localizar cualquier tipo de cosas en un mapa. Pero si lo que quieres es aprender a insertar un mapa en tu web, debes usar la API de Google Maps. Con un poco de javascript podrás crear mapas interactivos, insertar puntos, iconos, trazar lineas, etc.
1. Obtener una API Map Key para tu sitio web.
Lo primero es obtener una clave ( API Map Key) unica para tu sitio web. Para ello pulsa usa este enlace: http://www.google.com/apis/maps/signup.html Lee y acepta el contrato de licencia y escribe tu dominio en el cuadro de texto. Por ejemplo, en mi caso deberÃa escribir http://arpaneting.es
Después solo queda pulsar el botón “Generate API Key”. Al pulsar el botón se cargará una página indicándonos cual es nuestra API Key y mas abajo un pequeño ejemplo para insertar en nuestra web.
Por cierto, debemos disponer una cuenta Google para usar este servicio. Si no dispones de cuenta Google, puedes crearte una en este enlace: https://www.google.com/accounts/NewAccount
2. El Hola Mundo de Google Maps
Para empezar vamos a usar el ejemplo propuesto con la obtención del Key.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGGsVOfIe1O9VOn4mNrQX0xQtNsDi2D1JnAyi1pJIVz-nuu_flxTHt4Mx9hkHG73tdiQo9f6fY-cE1A" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>El código anterior lo pondremos en un archivo html en blanco y lo subiremos a nuestro servidor web o hosting. Hay que cambiar la API Key con la obtenida en el paso anterior para que coincida con la de vuestro dominio.
La Key está en el ejemplo siguiente, hay que insertar la Key después de key=
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGGsVOfIe1O9VOn4mNrQX0xQtNsDi2D1JnAyi1pJIVz-nuu_flxTHt4Mx9hkHG73tdiQo9f6fY-cE1A">
El resultado en el navegador debe ser como aquÃ.
¡¡ Ya tienes tu primer GoogleMap en Internet !!
Aquà acaba la primera parte, en la segunda aprenderemos a cambiar el centro inicial del mapa, añadiremos controles para interactuar con el mapa, como añadir puntos en el mapa y mostrar globos con información en el mapa.
Si tenéis dudas enviar un comentario, se agradece.
Si te ha gustado este post y quieres desarrollar tu proyecto en Internet puedes visitarme en http://davidcorto.arpaneting.es/ y si necesitas diseño web o posicionar tu web puedes visitar al diseñador web Pedro Leorri.
Gracias por este tutorial básico de integrar googlemaps en tu propia web, yo suelo utilizar googlemaps para proyectos de diseño web.