Todo sobre la API de Google Maps (1ª Parte)

Por el 24 de mayo de 2006

Quieres utilizar la API de Google Maps y no sabes por donde empezar en este tutorial trataremos de explicarte como hacerlo a través de un ejemplo simple de integración de un mapa en nuestra página web.
Con este servicio de Google tu podras dar una vuelta virtual al mundo y lo mejor de todo es que la mayoría de las áreas poseen una gran calidad.Lo mas interesante de este servicio es sin duda que Google ofrece una API (Application Programming Interface) para todos aquellos interesados en usar este servicio e integrarlo en su propia página, de forma simple y gratuita y con grandes opciones de interactividad.Los requisitos para comenzar son bastante asequibles necesitaras unicamente entrar en Google Maps Key y conseguir una clave para utlizar la API en tu sitio.

Ya tenemos una clave para utilizar la API en nuestro sitio y queremos probarla creando un mapa, tendremos que crear un documento html y añadirle el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></p> <p> <script src="http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript"></script><br /> <script type="text/javascript"></p> <p> //<![CDATA[</p> <p> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.719623, -4.419907), 13); } }</p> <p> //]]> </script><br /> </head><br /> <body onload="load()" onunload="GUnload()"></p> <div id="map" style="width: 500px; height: 300px"></div> <p> </body><br /> </html>

Lo único que nos quedaría para que funcione sería introducir la clave que conseguimos en el paso anterior e introducirla en la línea:
<br /> <script src="http://maps.google.com/maps?file=api&v=2&key=NUESTRA CLAVE" type="text/javascript"></script>
Tras estos dos pasos obtendriamos lo siguiente:

Mapa de Málaga

Ver ejemplo en tufuncion.com

Todo sobre la API de Google Maps (2ª Parte)

Etiquetas: emprendedor, producto

Todo sobre la API de Google Maps (1ª Parte)

Mapa de Málaga

Dejar un comentario

Últimas entradas

Suscripción

POR RSS

POR EMAIL

Enlaces