Cómo poner a Google Map en su Web
Martes, 23 de enero de 2007Web2.0 también significa software distribuido a través de API. La posibilidad de explotar a distancia las características y la funcionalidad en otros lugares es muy útil en la realidad como el Internet. Además de Yahoo, con 2,0 ToolKit su estilo, Google - en la geo-referenzazione - propone sus herramientas libres, en este caso para el manejo y gestión de mapas.
API de Google Maps permite incluir Google Maps en sus propias páginas web mediante JavaScript.
La primera cosa a hacer antes de que pueda comenzar a experimentar la API, es el registro en el sitio http://www.google.com/apis/maps/ para obtener una clave (UID) en el sitio de uso. De hecho por cada web es una necesidad para los principales!
Google ofrece un servicio gratuito que una empresa, para soluciones de intranet y utiliza una avanzada - véase: Google Maps para empresas
La versión gratuita, no obstante, ya resuelve todas las necesidades. Una vez que la clave es automáticamente propuso una página de resumen con una muestra de código Javascript. El primer paso es recuperar y longitud latidudine la zona que desea ver.
- showMap función () (
- GBrowserIsCompatible ( ) ) { if (GBrowserIsCompatible ()) (
- GMap2 ( document. getElementById ( "map" ) ) ; var mapa = new GMap2 (document. getElementById ( "map"));
- new GLatLng ( 37 . 4419 , - 122 . 1419 ) , 13 ) ; mapa. setCenter (nuevo GLatLng (37. 4419, - 122. 1419), 13);
- )
- )
El código de muestra es bastante simple. Se basa sull'instanza de una clase GMap2 () conectado a un DIV en la página, en este caso, una DIV con id = "mapa".
Toda la documentación API también proporciona nuevos puntos de vista, tales como el establecimiento de vista híbrido - vía satélite o por el mapa - la activación de los controles de zoom y los movimientos, la posibilidad de conectar un "globo" con direcciones personalizadas.
Una manera de activar una serie de controles es la siguiente:
- GMap2 ( document. getElementById ( "map" ) ) ; var mapa = new GMap2 (document. getElementById ( "map"));
- GLatLng ( 37 . 4419 , - 122 . 1419 ) ; var centro = new GLatLng (37. 4419, - 122. 1419);
- center, 17 , G_HYBRID_MAP ) ; // Mappa ibrida mapa. setCenter (en el centro, 17, G_HYBRID_MAP); / / Mapa del híbrido
- new GMapTypeControl ( ) ) ; mapa. addControl (nuevo GMapTypeControl ());
- new GLargeMapControl ( ) ) ; mapa. addControl (nuevo GLargeMapControl ());
- new GScaleControl ( ) ) ; // Zomming mapa. addControl (nuevo GScaleControl ()) / / Zomming
También puede asociar un GMarker, un "globo" con orientación adicional y hacer reaccionar a un clic de ratón.
- ; WINDOW_HTML var = '<div class="td_testo"> <strong> Trate Mi Nombre </ strong> <br /> Via Roma, 100 <br /> 00100 - Roma, Italia </ div> <div class = "menú" > <A href = "+ http://maps.google.com/maps?f=q&hl=it&q=Via Roma, +42, + Roma + IE = UTF8 & om = 1 & z = 17 & ll = SPN & 41.851366,12.473409 = 0.005786,0.013561 & iwloc = A "> Cómo llegar </ a> </ div> ';
- GMarker ( center ) ; var marcador = new GMarker (centro);
- marker ) ; mapa. addOverlay (marcador);
- marker, 'click' , function ( ) { GEvent. AddListener (marcador, haga 'clic', function () (
- WINDOW_HTML ) ; marcador. openInfoWindowHtml (WINDOW_HTML);
- ));
- marker, 'infowindowclose' , function ( ) { GEvent. AddListener (marcador, 'infowindowclose', function () (
- center, 2 ) ; mapa. recenterOrPanToLatLng (en el centro, 2);
- ));
- WINDOW_HTML ) ; marcador. openInfoWindowHtml (WINDOW_HTML);
En el sitio de documentación completa esaudisce todos nuestros deseos, de recurrir al uso de Marker, JSON, Ajax y mucho más. Entre otras cosas que usted encontrará muchos ejemplos de código con ejemplos directamente en línea. Una herramienta - gratis - para uso inmediato!
Ver también ...
- 03.09.08: 3,0 ActionScript para principiantes: Lección # 2 (0)
- 31.08.08: jQuery de restauración (0)
- 28.08.08: ABS-WP: actualizar la versión 1.1 (3)
- 27.08.08: Muy corto fragmentos: enviar mensajes de correo electrónico en HTML con PHP (0)
- 26.08.08: Skypemote.com: Dile con las emociones (4)
Villa centopino dijo:
No puedo dejar que entrar en el comic… es posible tener un ejemplo o más información en Inglés sobre cómo hacerlo?
gracias
Giovambattista FAZIOLI dijo:
@ Villa Centopino: el ejemplo se muestra en el Post. ¿Qué problema has experimentado exactamente? En algún error?
Villa centopino dijo:
Hola
no se inserta el globo de copiar y pegar, no nos engañemos…
Pero siguen buscando resolver I
Hola y gracias
Armando dice
Usted puede obtener la latitud y la longitud del nombre de la ciudad y la carretera?
Google Maps: cómo obtener la latitud y la longitud de una dirección | Undolog.com dijo:
[...] Esta vez la respuesta a un comentario con un puesto, ya que el interés general. Armando me preguntó si era posible, a través de Google Maps, obtener latitud y longitud a partir de [...]
Alberto dijo:
Hola,
Me sirven una mano.
Me gustaría que mis comics ya había mostrarse sin necesariamente tener que ver con el clic del ratón.
Además quisiera que el cómic contiene las opciones de "encontrar el camino para estar aquí y aquí."
Es una semana que sbattola cabeza, me dan un manoper favor.
Gracias y pronto
Alex dice:
Gracias!
Beppe dijo:
Hola a todos quería preguntar por qué no mostrar la dirección y markatore no mitrova dirección…
(alert (dirección + "no encontrado");....Escribí lo siguiente:
...onload = "load ();showAddress ( 'Via della Portichina, LU 20 55049 Viareggio, Italia'); "onunload = "GUnload ();"......muchas gracias