Desarrollo »PHP» Javascript »Internet» Flash »ActionScript

¿Cómo poner a Google Map en su web

Martes, 23 de enero 2007

Web 2.0 también significa el software distribuido a través de API (interfaz de programación de aplicaciones). La posibilidad de explotar las características y la funcionalidad de control remoto en otros lugares es muy útil en la realidad como la Internet. Además de Yahoo, con su estilo Toolkit 2.0, Google - en el contexto de la geo-referenciación - sugiere que las herramientas libres, en este caso para el manejo y gestión de los mapas.

API de Google Maps permite incrustar Google Maps en sus páginas web utilizando JavaScript.

Google Maps

La primera cosa a hacer antes de que puedan comenzar a experimentar con la API, se registra en el sitio http://www.google.com/apis/maps/ para obtener una clave (un UID) en el sitio de uso. De hecho, para todas las claves necesarias Web!

Google ofrece un servicio gratuito que es una empresa, las soluciones de Intranet y utiliza avanzadas - ver: Google Maps para empresas

La versión libre, sin embargo, ya se ocupa de todas las posibles necesidades. Se obtiene la clave automáticamente se propone una página de resumen con ejemplos de código Javascript. El primer paso es obtener la longitud y latidudine el área que desea ver.

Texto sin formato
JavaScript:
  1. función showMap () (
  2. GBrowserIsCompatible ( ) ) { if (GBrowserIsCompatible ()) (
  3. new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ( "map"));
  4. new GLatLng ( 37.4419 , - 122.1419 ) , 13 ) ; mapa. setCenter (new GLatLng (37.4419 - 122.1419), 13);
  5. )
  6. )

El código de ejemplo es bastante simple. Se basa sull'instanza un GMap2() clase GMap2() conectado a un DIV en la página, en este caso un DIV con id="map"
La documentación completa de la API se proporciona alimento adicional para la pantalla, como el establecimiento de la visión híbrida - satélite / mapa - la activación de los controles de zoom y de viaje, la posibilidad de conectar una "nube", con direcciones personalizadas.

Una manera de activar una serie de controles es:

Texto sin formato
JavaScript:
  1. new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ( "map"));
  2. new GLatLng ( 37.4419 , - 122.1419 ) ; centro var = new GLatLng (37.4419 - 122.1419);
  3. center , 17 , G_HYBRID_MAP ) ; // Mappa ibrida . mapa setCenter (centro, 17, G_HYBRID_MAP), / / Mapa Híbrido
  4. new GMapTypeControl ( ) ) ; mapa. AddControl (new GMapTypeControl ());
  5. new GLargeMapControl ( ) ) ; mapa. AddControl (new GLargeMapControl ());
  6. new GScaleControl ( ) ) ; // Zomming mapa. AddControl (new GScaleControl ()) / / Zomming

Usted también puede asignar un GMarker, un "globo" con más orientación y los hacen reaccionar a los clics del ratón.

Texto sin formato
JavaScript:
  1. '<div class="td_testo"><strong>Prova Mio Nome</strong><br />Via Roma, 100<br />00100 - Roma, Italia</div><div class="menu"><a href="http://maps.google.com/maps?f=q&hl=it&q=Via+Roma,+42,+Roma&ie=UTF8&om=1&z=17&ll=41.851366,12.473409&spn=0.005786,0.013561&iwloc=A">Come arrivare da noi</a></div>' ; WINDOW_HTML var = '<div class="td_testo"> <strong> Try My Name </ strong> <br /> Via Roma, 100 <br /> 00100 - Roma, Italia </ div> <div class = "menu" > <a href = "http://maps.google.com/maps?f=q&hl=it&q=Via+Roma, 42, + Roma & ie = UTF8 & om = 1 & z = 17 & ll = 41.851366,12.473409 & spn = 0.005786,0.013561 & iwloc = A "> Cómo llegar </ a> </ div> ';
  3. new GMarker ( center ) ; var marker = new GMarker (centro);
  4. marker ) ; mapa. addOverlay (marcador);
  5. marker , 'click' , function ( ) { GEvent. AddListener (marcador, 'click', function () (
  6. WINDOW_HTML ) ; marcador. openInfoWindowHtml (WINDOW_HTML);
  7. ));
  8. marker , 'infowindowclose' , function ( ) { GEvent. AddListener (marcador, 'infowindowclose', function () (
  9. center , 2 ) ; mapa. recenterOrPanToLatLng (centro, 2);
  10. ));
  11. WINDOW_HTML ) ; marcador. openInfoWindowHtml (WINDOW_HTML);

La documentación completa en el sitio cumple con todos nuestros deseos, el uso de marcadores especiales, JSON, Ajax y mucho más. Entre otras cosas podrás encontrar muchos ejemplos de ejemplos de código directamente en línea. Una herramienta - gratis - para utilizar de inmediato!

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...

Tags:

22 comentarios a "¿Cómo poner a Google Map en su Web"

  1. getAvatar 1,0
    16 de marzo 2008 centopino Villa:

    No puedo dejarlo entrar en el comic ... usted puede tener un ejemplo o más información en italiano acerca de cómo hacerlo?
    gracias

    Responder Compartir
  2. getAvatar 1,0
    17 de marzo 2008 Giovambattista Fazioli:

    @ Villa Centopino: el ejemplo se muestra en el Post. ¿Qué problema tienes exactamente? Por algún error?

    Responder Compartir
  3. getAvatar 1,0
    28 de marzo 2008 centopino Villa:

    hola
    He insertado el globo no es copiar y pegar, no hay error ...
    Pero aún así me decidí a buscar
    Hola y gracias

    Responder Compartir
  4. getAvatar 1,0
    13 de mayo 2008 Armando:

    de latitud y longitud se pueden derivar del nombre de la ciudad y la calle?

    Responder Compartir
  5. getAvatar 1,0
    14 de mayo 2008 Google Maps: Cómo llegar Latitud y Longitud de una dirección | Undolog.com:

    [...] Esta vez la respuesta a un comentario con un puesto, dado el interés general. Armando me preguntó si era posible, a través de Google Maps, obtener de Latitud y Longitud de [...]

  6. getAvatar 1,0
    26 de mayo 2008 Alberto:

    Hola,
    Necesito una mano.
    Deseo que mi historieta fue ya en pantalla sin tener que hacer los clics del ratón.
    También me gustaría que el cómic contiene las opciones de "encontrar el camino hacia aquí y aquí.
    Es una semana que nos dirigimos sbattola, dame un favor manoper.
    Gracias y hasta pronto

    Responder Compartir
  7. getAvatar 1,0
    14 de junio 2008 Alex:

    Gracias!

    Responder Compartir
  8. getAvatar 1,0
    02 luglio, 2008 Beppe:

    Hola a todos quería preguntar por qué no mostrar la dirección y no MARKATOR dirección Mitrov ... 

      (alert (address + "no encontrado");
 ....

    Me escribió así: 

     ...
 onload = "load ();
 showAddress ( 'Road Portichina, 20 55049 Viareggio LU, Italia'); "
 = onunload "GUnload ();"
 ......

    muchas gracias

    Responder Compartir
  9. getAvatar 1,0
    24 de octubre 2008 Marcadores de 18 octubre-24 octubre - Dexle:

    [...] ¿Cómo poner a Google Map en su web - heyos_ad_user = 8748; heyos_ad_type = "G"; heyos_ad_format = "8"; heyos_color_border = "000066"; heyos_color_bg = "FFFFFF"; heyos_color_link = "005B88"; heyos_color_text = " 000000 "; heyos_color_url =" 5F5F5F "; [...]

  10. getAvatar 1,0
    11 de noviembre 2008 Adoptar un mensaje | Undolog.com:

    [...] Por ejemplo, el recordatorio de esta escritura sigue siendo uno de los más vistos Cómo poner a Google Map en su web con 17,410mo puntos de vista. Si usted tiene servicios o productos relacionados con el Mapa de Google, o al menos que [...]

  11. getAvatar 1,0
    20 de noviembre 2008 Andreas:

    Hej!

    Hasta här det är helt ny med API de Google Maps.
    Hjälp Önskar jag med att få Plats på de som krävs kod-Bitar. Uppnå Önskar följande JAG.

    Har man dar en Webbsida fyller la uppgifter lite, dar dirección bland annat, la tierra och stad. Hombre klicka "enviar" toda la información lagras och så klart i en databas.

    Min önska, nu är att man på en visningssida skall kunna klicka på en och då publicar sus Databasen hämtas Todos los visados información och på en sida. Det Som jag skall ske önskar, är att visas en karta där har hombre ES PA liten sólo pin den dirección de punto, som la tierra ort och var registrerad för den Posten.

    HUR går jag skapa för att que tillväga enkelt på ett sätt och sujetador.
    Skriver och jobb Lite mot PHP MySQL.

    Någon om Tacksam hjälpa en önskar själ okunnig!

    - Andreas

    Responder Compartir
  12. getAvatar 1,0
    20 de noviembre 2008 Giovambattista Fazioli:

    @ Andrés: Querido Andrés, puede escribir su pregunta en Inglés?

    Responder Compartir
  13. getAvatar 1,0
    20 de noviembre 2008 Andreas:

    @ Giovambattista Fazioli:

    @ Andrés: Querido Andrés, puede escribir su pregunta en Inglés?

    Hola!

    Son completamente nuevos para esto con la API de Google Maps.
    Quiero ayudar a conseguir el código de bits en su lugar según sea necesario. El siguiente, quiero lograr.

    Tiene un sitio web en la que completar algunos datos, que entre otras cosas, dirección, ciudad y país. Hacer clic en "enviar" y toda la información almacenada en una base de datos con tanta claridad.

    Mi deseo ahora es que en una página de visualización es hacer clic en una entrada en la base de datos y luego recuperar toda la información y se muestran en una página. Lo que yo espero que suceda es que el mapa muestra donde usted tiene un pequeño alfiler-punto justo en la dirección, ciudad y país que se registró para el puesto.

    ¿Cómo hago para crear de una manera simple y útil.
    Escribe un poco de PHP y trabaja en contra de MySQL.

    Agradecería cualquier persona que desee ayudar a un alma ignorante!

    -Andrew

    Responder Compartir
  14. getAvatar 1,0
    19 de enero 2009 Giovambattista Fazioli:

    @ Darío: Ver reverso de geocodificación. Mirando en la fuente de la página se encuentra el código necesario, comunqueq es decir, el núcleo de la solución es:
    Añadir un escucha para interceptar el clic y crear un GClientGeocoder

    Texto sin formato
    JavaScript:
    1. map , "click" , getAddress ) ; GEvent. AddListener (mapa, "click", getAddress);
    2. GClientGeocoder ( ) ; geocoder = new GClientGeocoder ();

    El controlador utiliza el objeto de hacer clic GClientGeocoder para recuperar información de la ubicación inicial por la latitud y longitud:

    Texto sin formato
    JavaScript:
    1. overlay , latlng ) { getAddress function (overlay, latlng) (
    2. latlng != null ) { if (latlng = null) (
    3. address = latlng;
    4. latlng , showAddress ) ; geocoder. getLocations (latlng, showAddress);
    5. )
    6. )

    Y, finalmente, el controlador de showAddress mostrará la información del lugar a través de place.address

    Responder Compartir
  15. getAvatar 1,0
    19 de enero 2009 Darío:

    Uno se pregunta si puede encontrar un sitio que los actos por el contrario, es decir, introduciendo las coordenadas se puede encontrar el lugar.

    Responder Compartir
  16. getAvatar 1,0
    21 de febrero 2009 Angeliam:

    Hola a todos!
    Pido a la mano de expertos, porque me encontré con un problema que no puedo resolver ... Me explico:
    Puedo usar el API de Google Maps para hacer un mapa de navegación y zoom con la extensión. TIFF georreferenciada que es! He encontrado algo de información con la que me he dado cuenta que la primera imagen de todos mis debe ser dividido en cuadros, sólo los recursos que he encontrado me dice que se puede hacer con Photoshop o Paint Shop Pro (o algún otro programa , creo), pero no me digas cómo ... y me tengo que quedar aquí!
    Por favor ... ayúdame, necesito!

    Responder Compartir
  17. getAvatar 1,0
    03 de marzo 2009 Claudio:

    Ola estou Queriendo passar meu mapa, ja feito em Earth y Google Maps API para, ter poder para a visão em meu blog igual a um Google Earth, em meu computador local. Si, y que Posivel, mas desconhesco como fazerlo. Poderiam me dar algumas dicas de como fazer, o para procurar algum exemplo.
    Meu Temor es que ter recadastrar cadastrado tudo em meu mapa, esperar todos los puntos.

    Ajuda pela Grateful.

    Claudio G. Pagliaro
    cgpagliaro.arroba.gmail.com

    Responder Compartir
  18. getAvatar 1,0
    20 de marzo 2009 beb Henry:

    Hola a todos, tengo un problema, genera el código para insertar API de Google Maps en mi sitio. Obras locales sin problemas pero cuando voy a internet y dentro de ke van a visitar la página en la que inserta la voz ke servidor de la API ha rechazado la solicitud y eso es porque la clave de la API no es válido porque genera para otro sitio . ¿Qué debo hacer?

    Responder Compartir
  19. getAvatar 1,0
    20 de marzo 2009 Giovambattista Fazioli:

    beb @ Enrico: se puede regenerar la llave! O mejor! Si ha utilizado el "local", como se afirma, se genera una clave para un host que no sea en línea? Básicamente, usted necesita para generar una clave de acuerdo con el servidor que lo utilizan.

    Responder Compartir
  20. getAvatar 1,0
    24 de julio 2009 los mapas de Google la publicidad:

    [...] Es realmente trivial. Vemos a la vez la base de secuencia de comandos para integrarse con el procedimiento estándar para insertar el mapa de google en el sitio. En primer lugar, cómo dar vuelta a la publicidad tradicional y luego la barra de herramientas de [...]

  21. getAvatar 1,0
    29 de agosto 2009 »Undolog.com Cómo utilizar Google Maps en Adobe Flash CS4:

    [...] En Adobe Flash, puede utilizar una amplia gama de API externa proporcionada por los servicios web como Facebook, Twitter y Flickr. En este tutorial veremos la manera de integrar, de manera muy simple, los servicios de Google Maps en una película / aplicación Adobe Flash CS4. Digo que el procedimiento con el fin de utilizar Google Maps en Flash es muy similar a lo que ocurre en HTML / Javascript (véanse los detalles en Cómo poner a Google Map en su Web). [...]

  22. getAvatar 1,0
    01 sep, 2009 Undolog.com »componente Google Maps para Flash:

    [...] Ha puesto a disposición de la API - en Javascript - para insertar sus mapas en cualquier sitio web Viedo la forma de lograr lo mismo con [...]

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL