26/10/12

Cargando Google Maps | Linea de Codigo

Linea de Codigo
/* Programacin en la red */

Inicio

Articulos

Tutoriales

Foros

Lista de Correo

Proyectos

Colaborar

Descargas

Acerca de

Google Cargando Google Maps

abril 6, 2007 por Vctor Cuervo . 18744 visitas Imprimir 3 Comentarios

Like

Tw eet

Una de las cosas que "est pegando fuerte" con la llamada Web 2.0 son los mashup. El mashup consiste en mezclar fuentes de informacin, utilizando diferentes tecnologas (RSS, ATOM, JavaScript,...), para ofrecer un resultado conjunto. Una de las fuentes de datos que ms ha pegado con los mashup ha sido Google Maps. Google Maps es la herramienta de Google que te permite localizar cualquier lugar del mundo, permitindote ver el mapa de la zona, la vista de satlite de dicha zona o ambos. Los mashup que han salido han sido muchos. Por ejemplo localizaciones para la venta de pisos, situacin de restaurantes, fuentes de trfico,... Lo primero que tendremos que hacer para poder utilizar Google Maps en nuestras pginas ser hacernos con una clave de utilizacin. Esta clave nos la proporciona Google de forma gratuita (solo se necesita una cuenta en Google). Para ello tendremos que ir a http://www.google.com/apis/maps/signup.html. Una vez rellenados los datos tendremos una clave, la cual necesitaremos cuando codifiquemos. Para cargar Google Maps en nuestra pgina deberemos de incluir el siguiente script.
<citsc"tp/mp.ogecmmp?ieaiapv2apkymcae srp r=ht:/asgol.o/asfl=p&m;=&m;e=ilv" tp=tx/aacit>/cit ye"etjvsrp"<srp>

Categoras
.Net (5) Accesibilidad (4) AJAX (4) ASP (39) Conversacin (10) CSS (44) Desarrollo Mvil (11) DOJO (3) Download (4) Eventos (22) Google (18) Groovy (4) HTML (60) HTML5 (43) Java (243) JavaScript (104) jQuery (37) Lecturas (1) Linea de Codigo (32) Noticias Web (26) PHP (11) Prototype (10) Proyectos (1) Recursos (1) Software (9) SVG (16) VBScript (11) WebServices (1) wForms (12) XForms (3) XML (2) XSLT (7)

Donde "miclave" es la clave que os ha proporcionado Google Maps. A partir de este momento ya tenemos acceso va JavaScript al API de Google Maps. El cdigo para cargar el mapa es sencillo. Lo primero que deberemos hacer es crear una capa en la pgina, donde vayamos a posicionar el mapa. A esta capa la tendremos que dar un id.
<i i=mp"sye"it:40x hih:30x" dv d"aa tl=wdh 0p; egt 0p;> <dv /i>

En nuestro caso el id es "mapa". Este id nos servir para hacer referencia desde el cdigo JavaScript. Para crear el mapa utilizamos la funcin GMap2. La cual espera el elemento de la pgina sobre el que se cargar el mapa.
vrmp=nwGa2dcmn.eEeetyd"aa); a a e Mp(ouetgtlmnBI(mp")

Una vez hemos cargado el mapa habr que darle una ubicacin. Las ubicaciones se manejan mediante la clase GLatLng. La cual recibe como parmetros la longitud y la latitud del punto geogrfico a buscar. La clase GLatLng ser utilizada por el mtodo setCenter de la clase GMap2 para ubicar la imagen del mapa. La lnea de cdigo ser la siguiente:
mpstetrnwGaLg4.739-.042,1) a.eCne(e Ltn(0648,4703) 2;

Puede ser que el API de Google Maps no funcione en ciertos navegadores. Es por ello que tenemos la funcin GBrowserIsCompatible() la cual nos indica si el navegador sobre el que se ejecuta es compatible. Juntando todo nuestro cdigo podemos componer la siguiente funcin:
fnto la({ ucin od) i (Bosrsoptbe) { f GrweICmail() vrmp=nwGa2dcmn.eEeetyd"aa); a a e Mp(ouetgtlmnBI(mp") mpstetrnwGaLg4.739-.042,1) a.eCne(e Ltn(0648,4703) 2; } }

Entradas recientes
Definiendo una persona con Microdata en HTML5 Geolocalizando un usuario con HTML5 en Google Maps Incluir una marca en Google Maps Descargar un Canvas a una imagen con HTML5 Conversaciones sobre Programacin. Build 2012.05 Bloquear un fichero con Java Geolocalizando a un usuario con HTML5 Implementando un Twitter Follow Box Hola Mundo con Java ME y un TextBox Exportar el contenido de un Canvas HTML5 a una imagen

Para finalizar es bueno saber que si lanzamos la funcin GUnload liberaremos las estructuras utilizadas en memoria. Es por ello que es recomendable hacerlo al salir de la pgina. Es decir, en el mtodo onunload.
<oyola=la(; oula=Gnod)" bd nod"od)" nnod"Ula(;>

Se puede encontrar ms documentacin sobre Google Maps en http://www.google.com/apis/maps/documentation/

lineadecodigo.com/google/cargando-google-maps/

1/3

26/10/12
Visualizar el ejemplo | Descargar el cdigo

Cargando Google Maps | Linea de Codigo

Etiquetas

A add

close Congresos Date directorio DIV

array button Canvas click

Error en el cdigo

Foro sobre Google Maps

fichero File firefox Form formulario

GET getElementById Google

tags: atom, GBrowserIsCompatible, GLatLng, GMap2, GUnload, Mashup, rss

Maps id imagen IMG input

Artculos relacionados: Poner un icono dentro de Google Maps Modificar longitud y latitud en Google Maps Aadir control de trafico con Google Maps Tipos de mapas con Google Maps Abrir una ventana de informacin en Google Maps

IOException Java Java Basico Java EE Java IO

Java SE
jquery mobile
video width

OPTION ready Scanner script

length numero onClick

Java String

Java Util

SELECT String STYLE URL

Enlaces
Arquitecto IT Ayuda en la Web El Informativo.net Error500 Informatica Juridica Internet Paso a Paso La Webera.es Tknologyk B2 Tutoriales Gratis Y Otros Enlaces

Java
3 COMENTARIOS RSS feed para los comentarios de esta entrada. TrackBack URI Linea de Codigo Tipos de mapas con Google Maps
enero 13, 2009 #

Chuidiang El (otro) Trastero de Mazi Le Funes

Programacion
ABCDatos Blog Desarrollo Diseo y Desarrollo de Aplicaciones Web Programas Programacin

[...] cargamos un mapa con Google Maps, este, por defecto, se carga en su vista de mapa predeterminada. Esta vista es la del formato [...]

Linea de Codigo Poner un icono dentro de Google Maps

junio 21, 2009 #

[...] primeros pasos son los de siempre y que podis leer detenidamente en Cargando Google Maps. Si bien, resumidamente, consisten [...]

Linea de Cdigo on
Linea de Codigo Ventanas de informacin con imgenes en Google Maps
septiembre 23, 2009 #

Facebook Like 1,951 people like Linea de Cdigo.

[...] pasos, ya explicados en Cargando Google Maps, se pueden resumir [...]

DEJA UN COMENTARIO
Name (requerido) Mail (w ill not be published) (requerido) Website

H it

Wigberto S alv ador C arlos

N ery

M ike

Rodrigo

Robinson

Jhasmit Rossi

V ictor

S olrac

F her

A cemi

F acebook social plugin

Submit Comment
XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Preguntas en los Foros

Plugin Eclipse para Javascript Recursividad Se busca programador Javascript Juego "Gato" o "Tres en Raya" Argumentos por linea de comandos. Responder a: AYUDA FORO: Como poner codigo fuente Tutorial C y C++

lineadecodigo.com/google/cargando-google-maps/

2/3

26/10/12
Cdigo CAPTCHA *

Cargando Google Maps | Linea de Codigo

Estado de la especificacin XForms Re: como puedo agregar un bit de parida en codigo binario para hacerlo par o inpar Realidad aumentada

Notify me of followup comments via e-mail

Novedades en la Web
OpenWorld 2012: Next Generarion Infrastructure for HTML5 and Mobile Applications Live OpenWorld 2012: Event-Driven Patterns and Best Practices Live OpenWorld 2012: The Oracle Cloud: Where Social Is Built In Live OpenWorld 2012: Develop a Mobile Strategy with Oracle WebCenter Live OpenWorld 2012: Marketing 3.0: Creating Value in Todays Digital and Multichannel Social World Live OpenWorld 2012: The Oracle Cloud: Oracles Cloud Platform and Applications Strategy Live OpenWorld 2012: Oracle Social Network Live OpenWorld 2012: Portals, Sites, Content and Collaboration Live OpenWorld 2012: Middleware for Enterprise Applications Live OpenWorld2012: Application Servers and Cloud Application Foundation Live

Meta
Registrarse Acceder RSS de las entradas RSS de los comentarios WordPress.org

Acerca de...
Aulambra es un proyecto que pretende ayudar con las tecnologas de Internet. Ir a la pgina princial de Aulambra

Otras Webs
Aulambra Linea de Cdigo Dudas de Programacin Manual Web W3Api Ayuda en la Web Arquitecto IT Creado con WordPress y basado en el VCP Theme. Entries and comments feeds. Valid XHTML and CSS. 2001-2011 ^Top^

lineadecodigo.com/google/cargando-google-maps/

3/3