Google Maps in Flash

- Letture: 5.904

Google Maps per chi ancora non lo sapesse, è un servizio accessibile dal relativo sito web, che consente la ricerca e la visualizzazione di mappe geografiche di buona parte della Terra.

Il sito afcomponents.com contiente vari componenti Flash originali e molto efficaci, tra loro vi è un componente Flash free di nome GMap, che rende possibile l’integrazione di Google Maps in Flash.

Questo componente usa i dati di Google Map collegandosi alle ormai famose api di Google Maps.

Map V. 2.2

Abbiamo la possibilità di consultare 8 Tutorial con tanto di file source da scaricare gratuitamente tra cui:

  1. Installare il componente GMap
  2. Proprietà/eventi di GPoint
  3. Designazione di GPoint
  4. Impostare le icone su ordinazione del punto (GPoint)
  5. Utilizzo del cursore per effettuare la funzione zoom con GMap
  6. Funzioni GPolygon
  7. Funzioni GLine
  8. Strati di KML

Come potete osservare dalle screenshot, troveremo sempre le opzioni standar di Google Map, a sinistra lo zoom e in alto a destra la possibilità di visualizzare la mappa in modalità MAPPA, SATELLITE o IBRIDA

Map V. 2.2

Se abbiamo una conoscenza di base sulle api di Google Maps non ci sarà difficile integrarle nel componente Flash GMap

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

81 Commenti

  1. Ciao Julius, sempre Tommaso.
    Ho seguito quanto indicato nel tutorial per la creazione di una mappa e tutto và bene, visualizzo la mappa perfettamente nella mia pagina web solo che se voglio personalizzarla con i dati con i dati del collegamento KML, il codice html ml mi restituisce un errore di debug. Se ti posto la pagina html mi dai un’occhiata per capire cos’è sbagliato?
    Grazie mille ancora!!!

  2. Francesca

    salve!
    ho utilizzato tranquillamente la mappa di google, grazie agli esempi è veramente facile, ma ho la necessità di visualizzarla più da vicino all’apertura…attualmente si vede tutto il mondo e mi sembra un po’ troppo perchè per arrivare alla zona della via della città che mi serve…c’è bisogno di un po’ di tempo…qualcuno mi può dare una manooo per favore sono disperata!!!!

  3. @Tommaso posta pure…

    @Francesca ciao, sinceramente non ho approfondito, ma mi pare di aver visto in un esempio che è possibile alla partenza della visualizzazione della mappa, oltre a stabilire una posizione specifica, anche impostare lo zoom a nostro piacimento…

  4. Francesca

    ho rivisto tutti gli esempi e ho trovato solo questa istruzione che sembra fare al mio caso ma non funziona…ti posto tutto il codice che ho inserito per la visualizzazione del codice, forse c’è qualcosa che sbaglio…

    /*la prima riga è il codice che ho inserito recentemente per lo zoom automatico, tutto il resto funziona correttamente*/
    var zoomControl = new com.afc.GMap.controls.zoom.GZoomControl({display:”expanded”});
    map.addControl(map.GZoomControl());
    map.addControl(map.GPositionControl());
    map.addControl(map.GTypeControl());

    import flash.filters.DropShadowFilter;

    var myLayer = map.addLayer({name:”my locations”});

    var point = myLayer.addPoint({lat:41.234500, lng:16.301500, index:”SP”,name:”Super Pizza”,fillRGB:0xFF0000, strokeThickness:1});

    point.addEventListener(“GEOMETRY_ON_RELEASE”, this);

    function GEOMETRY_ON_RELEASE(evnt){

    map.setCenter({lat:evnt.target.lat, lng:evnt.target.lng});

    evnt.target.openInfoWindow({title:evnt.target.name, content:”Via Piero della Francesca, 11 – 70031 Andria”, h:80});
    }

  5. se vuoi inviami il fla cosi ci do uno sguardo stasera, sempre se riesco a rimettere apposto il portatile…purtroppo ho preso un TROJAN :(

    ciao

  6. sono al punto di prima, ti ringrazio per il suggerimento, ma non è quello che cercavo…a parte il fatto che non ci ho capito molto visto che con l’inglese sono negata decisamente.
    però se non ho capito male serve la classe zoom e non quella position perchè position serve per posizionare la mappa in un certo modo. come faròòò :”(

  7. Trovato :)

    sintassi
    gMap.setCenter(gMap.GLocation(lat, lng), zoom);

    esempio
    gMap.setCenter(gMap.GLocation(45.463622, 9.188175), 13);

    ciao

  8. Ciao Julius ormai spero di essere una vecchia conoscenza per te, hehe ^_^ comunque volevo chiederti: come posso inserire un Tooltip usando appunto il componente Gmap? Ho utilizzato un po le action del tutorial “gmap_gpoint_style_1” e modificando longitudine e latidudine e zoom ecc, sono riuscito in quello che volevo però vorrei inserire un Tooltip per mettere indirizzo ecc ecc… grazie di tutto e sempre complimenti al tuo sito

  9. Ciao,

    negli esempi è descritto tutto molto bene comunque basta aggiungere

    point.addEventListener("GEOMETRY_ON_RELEASE", this);
    function GEOMETRY_ON_RELEASE(evnt) {
    map.setCenter({lat:evnt.target.lat, lng:evnt.target.lng});
    evnt.target.openInfoWindow({title:evnt.target.name, content:"Via Popolo della Liberi, 23- 80531 Sondrio", h:80});
    }

  10. Che io sappia è possibile inserire una linea di congiunzione tra il punto di partenza e quello di arrivo.

    Gmap è solo per flash 8

  11. Ciao ho bisogno di aiuto.
    sono riuscita ad inserire la mappa all’interno del mio fla. Quando faccio la pubblicazione riesco a visulizzarla ma se la richiamo con la pagina HTML no. Sai per caso indicarmi il motivo?

    grazie in anticipo

    Serena

  12. Il problema potrebbe essere prorprio nella pubblicazione nella pagina HTML

    se vuoi inviami i file alla casella di posta che do uno sguardo

    saluti

  13. Ciao,
    ho integrato facilmente il component e lo uso senza difficoltà alcuna. Vedo però che quando carico il mio filmato sulla barra di stato appare una richiesta al sito afcomponents.com. Nessuno sa o intuisce che chiamata viene fatta? Per me è un limite non da poco ch evorrei eliminare.

    Ora mi leggo bene le condizioni d’uso ma mi piacerebbe usare questo strumento per i miei clienti che non vogliono vedere richieste a siti diversi da quelli che hanno acquistato. ;-)

  14. Ciao ,

    Come faccio ad usare una via al posto di longitudine e latitudine ?

    Grazie
    Ottimo Blog!

  15. Ciao paolo,
    devi usare longitudine e latitudine per segnalare un posto…

    Però se non sbaglio dovrebbe esserci anche un esempio della mappa utilizzata con la ricerca tramite l’inserimento di una via, è quello che cercavi?

  16. Si Julius, Ho guardato tutti gli esempi ma funzionano tutti con latitudine e longitudine, non c’è un modo in cui da un indirizzo posso trovare lat. e long. in automatico con uno script php esterno che invii le variabili a flash ?

  17. Pingback: Google Maps in Flash : sastgroup.com

  18. Pingback: Mappa interattiva in Flash : sastgroup.com

  19. Ciao, sai dove e` possibile reperire un DVD con lla mappa SATELLITARE dell`Italia, cos“i` comer si vede da GOOGLE MAPS ma senza bisogno di connettersi?

    grazie. Beppe.

  20. Non saprei, esistono dei software a pagamento con i quali hai la possibilità di vedere le mappe stradali, ma non saprei…

  21. Pingback: Shannon.it

  22. Ciao Julius, stiamo cercando di costruire un sito con google integrato in flash, ma abbiamo un problema (anche di più ma non fa nulla) e visto che sei diventato il nostro riferimento grazie al tuo indispensabile sito, abbiamo deciso di chiederti consulenza direttamente. Non riusciamo ad associare il componente tooltips con dei punti da noi trovati. Non compare il baloon in nessuna maniera. Abbiamo acquistato i componenti, istallati e tutto, abbiamo studiato esempi e tutorial, ma niente da fare. Puoi darci una mano. Ti postiamo il codice che siamo riusciti a creare, ma che con i tool non funziona. Grazie in anticipo e complimenti per il sito davvero utile ed interessante.
    // setup tooltip
    AFC_Tooltip.hideTooltip();
    AFC_Tooltip.show = true;

    // add kml layer
    var layer = gMap.setCenter(gMap.GLocation(45.313936,9.502584), 16);

    //importa mappa globale con navigazione e livelli//
    gMap.addKMLLayer({path:”Olympic_Host_Cities.kml”});

    //per caricare mappa con comandi//

    function eventResponder(evnt){

    // open info window
    evnt.target.openInfoWindow({title:evnt.target.name, content:evnt.target.description, contentAutoSize:true});
    }
    point.addEventListener(“GEOMETRY_ON_ROLL_OVER”, eventResponder);

    Stage.align = “TL”;
    Stage.scaleMode = “noScale”;

    gMap.addControl(gMap.GTypeControl());
    gMap.addControl(gMap.GZoomControl({display:”compact”}));
    gMap.addControl(gMap.GPositionControl());

    gMap.setSize(Stage.width, Stage.height);

    function onResize()
    {
    gMap.setSize(Stage.width, Stage.height);

    }
    Stage.addListener(this);
    //fine codice mappa//

    //psizionamento maeker//

    var point = gMap.addPoint({lat:45.314355,lng:9.502788, name:”Tappa 3, Cattedrale”, description:””});

    // add roll over and roll out event listeners to points to show and hide the toolip
    function KML_READY(evt:Object)
    {
    var pnts = evt.target.getGeometryObjects();
    for (var i:Number = 0; i < pnts.length; i++)
    {
    if (pnts[i].type == “GPoint”)
    {
    pnts[i].addEventListener(“GEOMETRY_ON_ROLL_OVER”, showAFC_Tooltip);
    pnts[i].addEventListener(“GEOMETRY_ON_ROLL_OUT”, hideAFC_Tooltip);
    }
    }
    }

    // show tootip, set the text to point’s name
    function showTooltip(evt:Object)
    {
    AFC_Tooltip.content = evt.target.name;
    AFC_Tooltip.showTooltip();
    }

    // hide tooltip
    function hideTooltip(evt:Object)
    {
    AFC_Tooltip.hideTooltip();
    }

    // resize the map with the Stage
    Stage.align = “TL”;
    Stage.scaleMode = “noscale”;
    gMap.setSize(Stage.width, Stage.height);
    Stage.addListener(this);

    function onResize()
    {
    gMap.setSize(Stage.width, Stage.height);
    }

    if (AFC_Tooltip != undefined)
    warning_txt._visible = false;
    else
    {
    warning_txt.htmlText = “Please drag AFC Tooltip component here and give it an instance name \”AFC_Tooltip\”.If you don’t have tooltip component, you’ll have to buy it from http://www.afcomponents.com for this sample to work.”
    }

  23. Ciao Julius,
    ho creato un Gpoint a cui è associata una finestra utilizzando il codice:

    var point = gMap.addPoint({lat:45.314355,lng:9.502788, name:”Tappa 3, Pippo”, description:””});

    Come faccio ad aggiungere nella finestra un link ad una pag. esterna ??

    Grazie mille !!!

    Ciao

  24. L’esempio che ho citato sopra dovrebbe poterti aiutare

    comunque penso siano dei parametri da configurare da componente

  25. ciao julius,
    funziona tutto…grazie mille per i tutorial!
    Ora vorrei aggiungere una barra di caricamento associata al componente…
    ma non saprei come fare…

    Grazie mille in anticipo

    buba

  26. Potresti provare a simularla…

    Ti spiego

    Molti flasher utilizzano dei piccoli clip filmati che vanno a lopp per un tot di secondi, utilizzano questa tecnica per inserire qualche oggetto che faccia intendere all’utente che qualcosa si stia caricando..

    L’utente finale non sa però che non sta avvenendo un vero e proprio precaricamento, ma il risultato è identico =P

    Quindi crea un nuovo livello, e inserisci una piccola animazione, questa verrà coperta dal componente appena caricato.

  27. Ciao Julius,

    ho creato una google map in flash senza alcun problema grazie ai tuoi esempi e tutorial.
    Ho dei dubbi per la pubblicazione: l’API key che va generata deve essere scritta nel codice html della pagina o nello script di flash.
    E in che modo va scritta?
    Grazie in anticipo e complimenti per il sito: fatto veramente bene.

    Luca

  28. Se non sbaglio l’API key serve solo per google maps in js?

    In flash non dovrebbe servire…magari sbaglio…dove te la chiede?

  29. Ho implementato il tutto e mi sembra molto carino e funzionale…

    Avrei una domanda: è possibile avere un campo testo dove inserire la via di partenza e in automatico ti calcola il percorso fino al PDI impostato come default?
    Nel sito non ho trovato nulla a riguardo, voi sapete qualche cosa?

  30. Ciao Julius,

    il flash non mi chiede l’API key.
    Credevo andasse lo stesso inserito nell’html come codice di autorizzazione verso Google per usare la mappa.
    Ne sai qualcosa?

    Saluti
    Luca

  31. Ciao julius, scusa la domanda stupida……
    Dovrei inserire inun sito una mappa interattiva,
    La mappa si deve apreire direttamente all’indirizzo da me deciso, e se non ho capito male le devo impostare tramite le coordinate….giusto???
    Ecco la domanda: come faccio a trovare le coordinate esatte del mio indirizzo???
    E poi come faccio a far aprire la pagina direttamente all’indirizzo da me impostato ????

    Ti ringrazio…

  32. Ciao Julius, la domanda riguardante le coordinate è sempre valida, mentre quello che intendevo nella seconda era praticamente lo ZOOM…
    Come faccio a far aprire la mappa senza partire dalla visualizzazione di tutto il mondo???

    Io “sfruttando” un po i vostri post, ho inserito questo script:

    map.addControl(map.GZoomControl());
    map.addControl(map.GPositionControl());
    map.addControl(map.GTypeControl());
    import flash.filters.DropShadowFilter;
    var myLayer = map.addLayer({name:”my locations”});
    var point = myLayer.addPoint({lat:30.000000, lng:50.300000, index:”?”,name:”PROVA”,fillRGB:0xFF0000, strokeThickness:1});
    point.addEventListener(“GEOMETRY_ON_RELEASE”, this);
    function GEOMETRY_ON_RELEASE(evnt){
    map.setCenter({lat:evnt.target.lat, lng:evnt.target.lng});
    evnt.target.openInfoWindow({title:evnt.target.name, content:”Via Mazzini, 20 – 73020 Cannole”, h:80});
    }

    Bene tu hai detto che questa è la soluzione:
    gMap.setCenter(gMap.GLocation(lat, lng), zoom);

    ho provato in tutti i modi ma non funziona…..
    Sapresti aiutarmi???

    PS: SEI UN GRANDE; MA COME FAI A STARE DIETRO A TUTTI NOI???
    COMPLIMENTI!

  33. @Luca che io sappia non ci vuole nessuna api key..

    @cico allora per trovare il punto cerca le coordinate sul web utilizzano google maps..

    quando trovi il punto clicca in alto a destra URL di questa pagina o collegamento ora non ricordo

    fatto questo otterai un link in cui ci saranno le coordinate fa inserire da esempio…

    PS: non lo so neanche io…passione?

  34. Ciao julius, non vorrei essere “oppressivo”, ma dovrei consegnare sto situzzo in un paio di giorni,
    ti prego aiuto!!!!!!!!

    Per le coordinate tutto OK!!!
    Ma quando apro la mappa, visualizzo tutto il mondo, mentre io vorrei visualizzarla molto piu ravvicinata, questo è lo script che ho usato ma dove dovrei intervenire???

    map.addControl(map.GZoomControl());
    map.addControl(map.GPositionControl());
    map.addControl(map.GTypeControl());
    import flash.filters.DropShadowFilter;
    var myLayer = map.addLayer({name:”my locations”});
    var point = myLayer.addPoint({lat:30.000000, lng:50.300000, index:”?”,name:”PROVA”,fillRGB:0xFF0000, strokeThickness:1});
    point.addEventListener(”GEOMETRY_ON_RELEASE”, this);
    function GEOMETRY_ON_RELEASE(evnt){
    map.setCenter({lat:evnt.target.lat, lng:evnt.target.lng});
    evnt.target.openInfoWindow({title:evnt.target.name, content:”Via Mazzini, 20 – 73020 Cannole”, h:80});
    }

    Poi vorrei che per richiamare l’etichetta, non devo cliccare sul segnale ma mi ci si apra direttamente!!!!

    Scusami e grazie!!!

  35. ciao carissimi,
    volevo sapere come faccio ad integrare nel componente questo scenario con i relativi punti di interesse già creati sul mio account di google map?

    cerco di farmi capire:
    io vorrei che il componente mostrasse questo link in un box all’interno del sito in flash:

    come potete vedere i punti di interesse e le informazioni non devono essere specificate nel mio swf… ma è l’swf che copia le info da google.

    thx

  36. Ciao Julius,
    innanzitutto complimenti per il sito, bello, utile ed essenziale.
    Vorrei chiederti se mi sai dire: perchè nella mappa inserita in un sito flash grazie al tuo consiglio (GMap) non riesco a vedere la barra dello zoom e i tre tipi di mappa visualizzabile (Mappa-Satellite-Ibrida)?
    E inoltre, è possibile inserire la finestra di info come quella che visualizza googleMap quando ricerchi un indirizzo (quella che sembra un “fumetto”!)?
    Grazie in anticipo.
    Complimenti ancora.
    Giorgio

  37. ok, adesso funziona..

    volevo chiedere se potevo usarlo liberamente o no…

    grazie mille

  38. ho dato un’occhiata al file e quando esporto in swf mi esce in output questo errore:

    Errore durante l’apertura dell’URL ‘http://www.afcomponents.com/map_google/scripts/getMapCopyright.php?spn=100.938095304283,193.359375&vp=39,-104&z=2’

    c’è quidni qualcosa che non va oppure ho sbagliato io??

    Se provo a esportare in html e aprire con safari safari si pianta…

    non capisco…

    ciao e grazie

  39. oops, scusa per i continui messaggi…

    sono riuscito finalmente a capire come funziona ma non riesco a capire una sola cosa che credo che anche cico servirebbe da come ho letto:

    Ma quando apro la mappa, visualizzo tutto il mondo, mentre io vorrei visualizzarla molto piu ravvicinata….

    ciao e grazie

Commenti