Read without ads and support Scribd by becoming a Scribd Premium Reader.

Language:

Download

Go BackAdd Note

Link

Embed

Save for later

PortadaMonotematicosSeccionesBlogingComunidadWikiRSS

Usuarios:Login|Registro

DesarrolloWeb.com>Manuales>Manual del API de Google Maps

Incluir un Mapa de Google en tu web en 5 minutos

La manera más sencilla de incluir un mapa deGoogle personalizado en tu web, sin saberprogramación.

Por

Miguel Angel Alvarez

Atención:

Contenido exclusivo de DesarrolloWeb.com. No reproducir.Copyright.

En DesarrolloWeb.com hemos publicado unManual del API de GoogleMaps. Este manual trata sobre el desarrollo de aplicacionesutilizando los mapas de Google, enfocado para programadores quequieran aprovechar la potencia de Google Maps en sus desarrollos.Pero en este artículo voy a explicar una manera mucho más sencillade incluir un mapa de Google en una página web, apta para todo tipode personas, programadores o no, y que te llevará sólo unosminutos para integrar un mapa personalizado en cualquier web.Quería aclarar antes que con el API de Google Maps podemos hacer todo tipo de aplicaciones para mostrar mapas decualquier parte del mundo. Por ejemplo, imaginar que estamos haciendo una página deuna inmobiliaria y queremoslocalizar cada una de las casas en venta, además de mostrar fotos y cualquier otro contenido de los inmuebles en elpropio mapa. Para esto necesitaremos forzosamente trabajar con el API, que hemos explicado ya enDesarrolloWeb.com y combinar la base de datos de propiedades de la inmobiliaria, con la interfaz de mapas de GoogleMaps.Pero imaginar un caso mucho más sencillo. Tenéis un cliente al que le estáis creando el sitio web y quiere que tenga unmapa de Google con la localización de sus oficinas y la forma de llegar a ellas. Para hacer este único mapa no esnecesario utilizar el API de Google Maps, sino sería suficiente crear un único mapaestático e incrustarlo en la página delcliente. Esto se puede hacer fácilmente desde la propia páginahttp://maps.google.com/y no necesita ningúnconocimiento de programación.Voy a dar una receta por pasos:1) Entrar enhttp://maps.google.com/2) Pulsar sobre el enlace “Mis Mapas” 3) Ahora pulsar sobre “Crear Mapa nuevo” 4) Nos pedirá que nos autentiquemos con nuestra cuenta Google. Una cuenta vale paratodos los servicios de Google,incluido el de mapas.5) Entonces podemos empezar a crear nuestro mapa.Tendremos que darle el nombre y descripción del mapa.

Manuales relacionados

Manual del API de Google Maps

(32 artículos)

Categorias relacionadas

HTMLElementos para Webs

El autor

Miguel Angel Alvarez

Director de DesarrolloWeb.comhttp://www.desarrolloweb.com

Últimas noticias

Pasos para proteger tu cuenta decorreo según Google

La compañía líder de Internet publica unlistado de pasos para mejorar laseguridad de una...

Microsoft soluciona problemas en susproductos

Una nueva actualización de seguridadsupondrá la corrección devulnerabilidades en algunos...

Google simplifica su interfaz

Nuevo diseño de la página de resultadosdel motor de búsqueda más importantede Internet.

Nueva beta de Chrome 14

El navegador de Google muy cerca de unnuevo lanzamiento final.

Donaciones

Si piensas que te hemos ayudado ymerecemos tu apoyo económico...

02 de septiembre de 2008Compartir en redes sociales

1 voto

Valoración del artículo:Enviar un comentarioVer comentarios del artículo (37)Ver el índice del manualDescargar el manual

Incluir un Mapa de Google en tu web en 5 minutoshttp://www.desarrolloweb.com/articulos/incluir-mapa-google-web-5-min...1 de 713/09/2011 11:13 p.m.

Además, a la derecha tenéis el mapa que se va a crear. En este momento están disponibles las opciones para edición delmapa y creación de marcas, líneas, etc. Podréis ver en la esquina superior derecha del mapa una serie de iconos con losque podréis colocar los distintos elementos sobre el mapa.Experimentar con cada tipo de dibujo que se puede colocar. Además, luego podemos personalizar cualquier cosa, comocambiar el color a las líneas o formas, o poner varios tipos de marcas sobre el mapa. Al crear cualquier elemento oseñal sobre el mapa, nos abre una pequeña ventana para colocar las propiedades de este elemento.En la anterior imagen hemos marcado con flechas varios elementos: los datos de la marca, que tenemos que rellenar enla ventana de propiedades. Un icono que se puede pulsar para acceder a otras propiedades de la marca, como la forma,el color, etc. Cuando tengamos todo, podemos pulsar el botón de Aceptar.6) Cuando esté el mapa creado, podemos dar al botón de Guardar y luego al botón marcado como “Listo”, que aparecena la izquierda.7) Obtener el código para incluir el mapa en cualquier web.Este paso tiene varias maneras de hacerse, todas a través del enlace que pone “Enlazar”, situado a la derecha. La

Secciones principales

ManualesFAQsProgramasDirectorioScriptsVídeos

Monotemáticos

Desde ceroHTML,CSS,DiseñoJavascript,AjaxASP,PHPPromocion,Ganar dineroCanal DotNet

Bloging

ActualidadRecursos interesantesAgenda

Comunidad

Perfiles públicosDesarrolladoresVuestras páginasRegistroEncuestasCopyright |Publicidad |Acerca de |Datos legales |Contacta

Incluir un Mapa de Google en tu web en 5 minutoshttp://www.desarrolloweb.com/articulos/incluir-mapa-google-web-5-min...2 de 713/09/2011 11:13 p.m.

opción más versátil es incluir el mapa con un IFRAME, pero debemos personalizar el mapa antes, para que el IFRAMEsea exactamente como nosotros queremos.Primero, como decía, pulsamos sobre “Enlazar” y luego pulsamos sobre “Personalizar y obtener vista previa del mapaque se va a insertar”.Entonces se abrirá una ventana aparte donde dar las propiedades del mapa que vamos a crear para nuestra páginaweb.En esta página tenemos que indicar: 1) El tamaño del mapa, 2) centrar el mapa dondelo queremos y ponerle el zoomdeseado y 3) copiar el código que nos dan.8) Pegar el código del mapa en nuestra página webPues ya está! Una vez pegado el mapa de Google aparecerá tal cual lo hemos personalizado en la página web quedeseemos.Yo he pegado a continuación este mapa de Google de prueba, para que se pueda ver eneste artículo deDesarrolloWeb.com.Eso es todo. Podemos haber tardado un poco más para aprender a crear el mapa, pero una vez sepamos, nos llevarámenos de 5 minutos incorporar un mapa de Google en una página web.