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

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

Anónimo

18 de Enero de 2007 a las 4:32 pm

no se como conseguir la KEY alguien podria explicarmelo, no veo com odarme de alta.

felipe fernandez

2 de Marzo de 2007 a las 9:15 am

He caido en vuestra pagina porque necesito poner los mapas de google en mi buscador. Veo que se ha de poner una clave por lo que deduzco habilmente que me tengo que dar de alta en algun sitio ( google supongo) pero en las inmumerables paginas de google no veo donde hacerlo. Necesito ese dato. Gracias por la informacion

Fabi

1 de Agosto de 2007 a las 7:31 am

Hola Muy buenas. Tengo una duda.
¿Como hago para cambiar las coordinadas del Mapa? Por ejemplo, quiero un mapa del Paseo de la Castellana y también quiero generar otro mapa de Gran vía. Le leido bastante la documentación de API pero no logro encontrar esta información.
Gracias por la ayuda!

Anónimo

13 de Agosto de 2007 a las 5:02 pm

ya realice los ejemplos y si los maspas que me muestra son de muy buena calidad, pero estoy haciendo mi servidor para una cidad de mexico y los mapas no se visualizan, al principio pense que no abia mapas para mexico pero he checado algunas direcciones que ya integraron la libreria API del google maps y ellos si pueden visualizar mapas de ciudades de mexico que tengo que hacer para solucionar esta problematica

Anónimo

20 de Noviembre de 2007 a las 4:34 pm

Hola soy nuevo en esto y quiero saber como puedo conseguir el codigo API

Pablo

24 de Diciembre de 2007 a las 4:22 am

Saben si google esta haciendo localizacion inversa a traves de web service. Ya se que en la web si pones las coordenadas, sale donde se encuentra, pero yo lo quiero q me devuelva un xml o en json esta informacion

6 de Abril de 2008 a las 11:38 am

como inserto una imagen en la burbuja esa del google maps tengo un API pero no se como insertar

Israel

14 de Junio de 2008 a las 7:03 pm

I’ve found this link where you can get complete info on the basic works for google api http://www.doug.ricket.com/gdd2007/, and in case you are interested in a complete example, this is also a great site. http://gmaps-samples.googlecode.com/svn/trunk/spreadsheetsmapwizard/makecustommap.htm

I’m not a web master and I was able to add a map to my site.

Hope it helps.

victor

12 de Noviembre de 2009 a las 8:25 pm

quisiera anadirle el api de google maps a mi pagina, pero estoy trabajando en drupal me prodrian ayudar …gracias….

amadeo govoni

12 de Marzo de 2010 a las 6:27 am

Hola señores
Quiero obtener el codigo para la Api y en vez de entrar la página sucede lo esto —>

Esta página web tiene un bucle de redireccionamiento.

A continuación se detallan algunas sugerencias:
Carga esta página web de nuevo más tarde.
Más información acerca de este problema.
Más información sobre este error

Algún comentario de alguien?

Saludos

Amadeo Govoni

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

Mapa de Málaga

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

Dejar un comentario

Patrocinadores

Últimas entradas

Suscripción

POR RSS

POR EMAIL

Enlaces