Sviluppo » PHP » Javascript » Internet » Flash » ActionScript

Come inserire Google Map nel proprio Web

martedì 23 gennaio, 2007

Web2.0 significa anche software distribuito tramite API (Interfaccia di Programmazione di un’Applicazione). La possibilità di sfruttare funzioni e funzionalità remote altrove risulta estremamente utile in realtà come Internet. Oltre a Yahoo, con il suo ToolKit 2.0 style, anche Google – nell’ambito della geo-referenzazione – propone i suoi strumenti free, in questo caso per la manipolazione e gestione delle mappe.

Google Maps API permette di inserire Google Maps nelle proprie pagine Web tramite Javascript.

Google Maps

La prima cosa da fare, prima di poter iniziare a sperimentare le API, è registrarsi sul sito http://www.google.com/apis/maps/ in modo da ottenere una chiave (una UID) relativa al sito di utilizzo. Di fatto per ogni Web è necessaria una chiave!

Google fornisce sia un servizio gratuito che uno Enterprise, per soluzioni intranet e utilizzi avanzati – vedi: Google Maps for Enterprise

La versione gratuita, tuttavia, risolve già tutte le possibili esigenze. Ottenuta la chiave viene automaticamente proposta una pagina di riepilogo con una codice Javascript di esempio. Il primo passo è recuperare longitudine e latidudine della zona che si vuole visualizzare.

1
2
3
4
5
6
    function showMap() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

Il codice di esempio è abbastanza semplice. Esso si basa sull’instanza di una classe GMap2() collegata ad un DIVpresente sulla pagina, in questo caso un DIVcon id="map".
La documentazione completa delle API fornisce poi ulteriori spunti di visualizzazione, come l’impostazione della vista ibrida – satellite/mappa – l’attivazione dei controlli per lo Zoom e gli spostamenti, la possibilità di collegare un “fumetto” con indicazioni personalizzate.

Un modo per attivare una serie di controlli è:

1
2
3
4
5
6
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 17, G_HYBRID_MAP); // Mappa ibrida
map.addControl(new GMapTypeControl());       
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl()); // Zomming

È inoltre possibile associare un GMarker, un “fumetto” con ulteriori indicazioni e farlo reagire al click del mouse.

1
2
3
4
5
6
7
8
9
10
11
var WINDOW_HTML = '<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>';

var marker = new GMarker(center);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() {
  marker.openInfoWindowHtml(WINDOW_HTML);
});
GEvent.addListener(marker, 'infowindowclose', function() {
  map.recenterOrPanToLatLng(center, 2);
});
marker.openInfoWindowHtml(WINDOW_HTML);

Sul sito la documentazione completa esaudisce ogni nostro desiderio, dall’uso di speciali Marker, JSON, Ajax e moltissimo altro. Tra l’altro troverete moltissimi esempi di codice con esempi direttamente online. Un tool – free – da usare da subito!

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , ,

23 commenti a: “Come inserire Google Map nel proprio Web”

  1. 16 mar, 2008 villa centopino:

    Non riesco a fargli inserire il fumetto…è possibile avere un’esempio o maggiori informazioni in italiano su come fare?
    grazie

    Rispondi Quota
  2. 17 mar, 2008 Giovambattista Fazioli:

    @Villa Centopino: l’esempio è quello mostrato nel Post. Quale problema hai riscontrato esattamente? Di da qualche errore?

    Rispondi Quota
  3. 28 mar, 2008 villa centopino:

    ciao
    si non mi inseriva il fumetto copiando ed incollando, nessun errore…
    però continuando a cercare ho risolto
    ciao e grazie

    Rispondi Quota
  4. 13 mag, 2008 armando:

    è possibile ricavare latitudine e longitudine a partire dal nome della città e la strada?

    Rispondi Quota
  5. 14 mag, 2008 Google Maps: come ottenere Latitudine e Longitudine da un indirizzo | Undolog.com:

    [...] questa volta rispondo ad un commento con un Post, visto il generale interesse. Armando mi chiedeva se era possibile, tramite Google Maps, ottenere Latitudine e Longitudine a partire da [...]

  6. 26 mag, 2008 Alberto:

    Ciao,
    mi servirebbe una mano.
    vorrei che il mio fumetto fosse gia visualizzato senza dover necessariamente fare il click col mouse.
    Inoltre vorrei che il fumetto contenesse le opzioni “trova il percorso A QUI e DA QUI”.
    E’ una settimana che ci sbattola testa, dammi una manoper favore.
    Grazie e a presto

    Rispondi Quota
  7. 14 giu, 2008 Alex:

    Grazie!!!

    Rispondi Quota
  8. 02 lug, 2008 beppe:

    Ciao a tutti volevo chiedervi come mai non visualizzo il markatore dell’indirizzo e non mitrova l’indirizzo…

    1
    2
    (alert(address + " not found");
    ....

    io lo scritto cosi:

    1
    2
    3
    4
    5
    ...
    onload="load();
    showAddress('Via della Portichina, 20 55049 Viareggio LU, Italia');"
    onunload="GUnload();"
    ......

    grazie mille

    Rispondi Quota
  9. 24 ott, 2008 Bookmarks dal 18 Ottobre al 24 Ottobre - Dexle:

    [...] Come inserire Google Map nel proprio 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. 11 nov, 2008 Adotta un post | Undolog.com:

    [...] esempio, nel memento in cui scrivo uno dei post più visti rimane Come inserire Google Map nel proprio Web, con 17410 visualizzazioni. Se avete servizi o prodotti inerenti a Google Map o, comunque, che [...]

  11. 20 nov, 2008 Andreas:

    Hej!

    Är helt ny till det här med Google MAPS API.
    Jag önskar hjälp med att få på plats de kod-bitar som krävs. Följande önskar jag uppnå.

    Har en webbsida där man fyller i lite uppgifter, där bland annat adress, stad och land. Man klickar “submit” och all information lagras så klart i en databas.

    Min önskan, är nu att man på en visningssida skall kunna klicka på en post i databasen och då hämtas all information och visas på en sida. Det som jag önskar skall ske, är att en karta visas där man har en liten pin-point på just den adress, ort och land som var registrerad för den posten.

    HUR går jag tillväga för att skapa detta på ett enkelt och bra sätt.
    Skriver lite PHP och jobbar mot MySQL.

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

    –Andreas

    Rispondi Quota
  12. 20 nov, 2008 Giovambattista Fazioli:

    @Andreas: dear Andreas, can you write your question in english?

    Rispondi Quota
  13. 20 nov, 2008 Andreas:

    @Giovambattista Fazioli:

    @Andreas: dear Andreas, can you write your question in english?

    Hello!

    Are completely new to this with the Google Maps API.
    I want help to get into place the code-bit as needed. The following, I wish to achieve.

    Have a website where you fill in some data, which among other things, address, city and country. You click “submit” and all information stored so clearly in a database.

    My wish now is that on a display page is to click on an entry in the database and then retrieved all the information and displayed on a page. What I hope will happen is that a map shows where you have a small pin-point just at the address, city and country that was registered for the post.

    HOW do I go about to create this in a simple and useful way.
    Writes a little PHP and works against MySQL.

    Grateful if anyone wishing to help an ignorant soul!

    -Andrew

    Rispondi Quota
  14. 19 gen, 2009 Giovambattista Fazioli:

    @Dario: vedi Geocoding Reverse. Sbirciando nel sorgente della pagina troverai il codice necessario, comunqueq sia, il “core” della soluzione è:
    Aggiungere un listener per intercettare il click e creare un oggetto GClientGeocoder:

    1
    2
    GEvent.addListener(map, "click", getAddress);
    geocoder = new GClientGeocoder();

    L’handler del click usa l’oggetto GClientGeocoder per recuperare le informazioni del luogo partendo da latitudine e longitudine:

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

    Poi, alla fine, l’handler showAddress mostrerà le info del luogo tramite place.address

    Rispondi Quota
  15. 19 gen, 2009 Dario:

    Ti chiedo se è possibile trovare un sito in cui agisca al contrario, cioè inserendo le coordinate si possa trovare il luogo .

    Rispondi Quota
  16. 21 feb, 2009 Angeliam:

    Ciao a tutti!
    Chiedo a mano di esperti, perchè mi sono imbattuto in un problema che non riesco a risolvere…ora vi spiego:
    devo utilizzare le api di google maps per rendere navigabile e zoomabile una mappa con estenzione .tiff che è georeferenziata! Ho trovato delle indicazioni con le ho quali ho capito che prima di tutto la mia immagine deve essere divisa in tiles, solo che sulle risorse che ho trovato io si dice che si può fare questo con photoshop o paint shop pro (o con qualche altro programmino, credo) ma non mi dice come…e mi sono bloccato in questo punto!
    Vi prego…aiutatemi, ne ho davvero bisogno!!!

    Rispondi Quota
  17. 03 mar, 2009 Claudio:

    Ola estou querendo passar meu mapa, ja feito em Google Earth e Maps para Api , para poder ter a visão em meu blog igual a um Google Earth, local em meu computador. Se que e posivel, mas desconhesco como fazerlo. Me poderiam dar algumas dicas de como fazer, o onde procurar algum exemplo.
    Meu temor es ter que recadastrar tudo cadastrado em meu mapa, todos os wait point.

    Grato pela ajuda.

    Claudio G. Pagliaro
    cgpagliaro.arroba.gmail.com

    Rispondi Quota
  18. 20 mar, 2009 enrico beb:

    Salve a tutti, ho un problema, ho generato il codice API per inserire google maps nel mio sito. In locale funziona senza problemi ma una volta ke lo inserisco in internet e vado a visitare la pagina dove è inserito mi esce la scritta ke il server API ha rifiutato la richiesta e questo perchè il codice API non è valido perchè generato per un’altro sito. Cosa devo fare?

    Rispondi Quota
  19. 20 mar, 2009 Giovambattista Fazioli:

    @enrico beb: puoi rigenerare la chiave! O meglio! Se l’hai utilizzato in “locale”, come sostieni, avrai generato una chiave per un host diverso da quello online? In pratica devi generare una chiave a seconda del server su cui lo usi.

    Rispondi Quota
  20. 24 lug, 2009 Google maps advertising:

    [...] è veramente banale. Vediamo subito lo script base da integrare alla normale procedura di inserimento di google map nel sito. Vediamo dapprima come attivare la pubblicità tradizionale e poi la toolbar di [...]

  21. 29 ago, 2009 Undolog.com» Come usare Google Maps in Adobe Flash CS4:

    [...] In Adobe Flash è possibile utilizzare un vasto assortimento di Web API esterne fornite da servizi come Facebook, Twitter o Flickr. In questo tutorial vedremo come integrare, in modo davvero semplice, i servizi di Google Maps in un filmato/applicazione Adobe Flash CS4. Premetto che il procedimento per poter utilizzare Google Maps in Flash è molto simile a quello che accade in HTML/Javascript (vedi per dettagli Come inserire Google Map nel proprio Web). [...]

  22. 01 set, 2009 Undolog.com» Google Maps component per Flash:

    [...] ha reso disponibile le API – in Javascript – per inserire le sue mappe in qualsiasi sito Web. Viediamo come realizzare la stessa cosa con [...]

  23. 15 giu, 2010 Wpae:

    Scusate, sapete come eliminare le scritte di google in basso dei “crediti”?
    Ho una mappa mostrata come ibrida, ma è abbastanza piccola, quindi il testo va in eccedenza, ed è graficamente bruttino.

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>                                  // blocco generico
<code></code>                                // blocco generico
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL