[Gmap API v3] - InfoWindow con

[}gu|do[z]{®©]

Sono poco pratico delle API di google map e spulciando la documentazione non ho trovato nulla a riguardo...

ho una mappa in cui viene posizionato un marker su un indirizzo (in realtà posiziono con le coordinate) con tanto di infowindow...

tutto bene, però mi hanno chiesto se si poteva fare un infowindow uguale a quello che esce sul sito di google maps quando si cerca un indirizzo (insomma con i link in basso, tra cui "ottieni indicazioni stradali") ... si può fare tramite API? Se non si può fare tramite API secondo voi è facilmente fattibile "a mano"?

Riporto anche il codice essenziale, se dovesse servire

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">

    function initialize() {
    var latlng = new google.maps.LatLng(44.674524,10.700968);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"bla bla"
      });   


   var tooltip = '<div id="tooltip"> 

[b] bla bla[/b]</p></div>';  
   var infowindow = new google.maps.InfoWindow({
            content: tooltip
        });
   infowindow.open(map,marker);

  }
 </script> 

Grazie

[}gu|do[z]{®©]

nessuno?

[mosquito70]

Originariamente inviato da }gu|do[z]{®©
nessuno?

Ti potresti spiegare meglio?
Credo di star facendo proprio ora una cosa simile, ma che funziona, purtroppo solo su FF.
Non posso postarti il link, pero' costruisco una mappa di google, inserendo coordinate, icone e testo di commento al click sull'icona.

E' quello che ti serve?

[}gu|do[z]{®©]

Hai presente quando cerchi un indirizzo su google maps?

Ci mette un marker...

cliccando sul marcher si apre un infowindow

per esempio qui:

http://maps.google.it/maps?f=q&sourc...9&z=16&iwloc=A

con roba tipo "Ottieni indicazioni stradali: A qui - Da qui" etc etc.

mi chiedevo se ci fosse già una funzione nelle api per popolare la infowindow con quel tipo di contenuto

[mosquito70]

Originariamente inviato da }gu|do[z]{®©
Hai presente quando cerchi un indirizzo su google maps?

Ci mette un marker...

cliccando sul marcher si apre un infowindow

per esempio qui:

http://maps.google.it/maps?f=q&sourc...9&z=16&iwloc=A

con roba tipo "Ottieni indicazioni stradali: A qui - Da qui" etc etc.

mi chiedevo se ci fosse già una funzione nelle api per popolare la infowindow con quel tipo di contenuto

Scusa per il ritardo nella risposta.
Sì, c'è la funzione ed è anche abbastanza semplice implementare il tutto.

Ora però sono tornato a casa e non ho il codice sottomano. Domani mattina dall'ufficio ti mando il tutto.

Ok?

ciao

[}gu|do[z]{®©]

Ti ringrazio

aspetto domattina

[mosquito70]

Ciao,
cerco di spiegarmi e vista l'ora ed il giorno spero di non dimenticarmi niente
Prima di tutto le librerie e le chiamate a Google

1) Google key
Devi includere la chiamate alle mappe di google. Immagino che lo sai, ma e' per essere piu' completo possibile nella spiegazione te la indico

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=CHIAVE" type="text/javascript"></script>

2) Libreria markermanager.js
Devi includere questa libreria. Io l'ho scaricata direttamente in locale. Se non la trovi, fammi sapere che te la invio per mail.

<script src="markermanager.js"></script>

3) Caricamento della mappa.
Quello che serve a me e' che all'onload, la pagina mi carichi la mappa con tutti i marker e tutte le informazioni relative a questi (ovvero testo e immagini delle icone, con relativa dimensione). Quindi ho fatto cosi'. Tu adattalo alle tue esigenze.
Altra cosa. Io carico i dati attraverso un file xml opportunamente costruito e che ha una struttura del tipo

<?xml version ='1.0' encoding ='UTF-8' ?>
<markers>
<marker lat="47.3889217449458" lng="-7.99836349487305" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio1" phone1="123456678" address="via piazza, 14" city_name="citta" zipcode="9999" />
<marker lat="47.3824684933803" lng="-8.00377082824707" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio2" phone1="123456678" address="via piazza, 5" city_name="citta" zipcode="9999" />
<marker lat="47.3828265483107" lng="-9.96574783325195" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio3" phone1="123456678" address="via piazza, 62" city_name="citta" zipcode="9999" />
<marker lat="47.3817779540436" lng="-10.97231388092041" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio4" phone1="123456678" address="via piazza, 6" city_name="citta" zipcode="9999" />
</markers>

Ma chiaramente puoi evitare di crearlo e caricare i dati da un db o da un file di testo.

<body onload="javascript:showAddress('<?php echo $state_name_default.", ".$city_name_default; ?>');">

Arriviamo quindi al codice.
Ti scrivo la funzione showAddress() ed indico con i commenti all'interno del codice i passaggi che ho fatto.

    function showAddress(address) {
    
    var geocoder = new GClientGeocoder();

    // Questo ti serve per centrare la mappa
    // Se non ti serve togli tutto ed inizia da mgrOption

    geocoder.getLatLng(
    address,
    function(point) {
        if (!point) {
            alert(address + " not found");
        } else {
            // inizio centra la mappa
            var map = new  GMap2(document.getElementById("DIV_CHE_CONTIENE_LA_MAPPA"));
            map.addControl(new GMapTypeControl());
            map.setUIToDefault();
            map.setCenter(point, 13);
            
            // assegna un marker semplice al centro della mappa
            var marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(address);
            GEvent.addListener(marker, "click", function() {
            marker<?=$contador?>.openInfoWindowHtml(address);
            });

            // fine centra la mappa

            // definizioni
            // MaxZoom e' il massimo zoom con il quale si puo' visualizzare il marker.
            var mgrOptions = { borderPadding: 50, maxZoom: 20, trackMarkers: true };
            var mgr = new MarkerManager(map, mgrOptions);

            // apro l'xml
            GDownloadUrl("XML_GoogleMap.xml", function(data) {
                
                //leggo l'xml
                var xml = GXml.parse(data);
                
                // scorro i vari marker (ovvero image,lat, etc...)
                var markersxml = xml.documentElement.getElementsByTagName("marker");

                var markers=[];

                for (i=0; i < markersxml.length; i++) {
                    
                    // richiamo la classe GIcon di google

                    var icon_tienda = new GIcon();

                    // assegno i vari parametri all'icona
                    // InfoWindowAnchor e' fondamentale per permettere il click
                    // inconAnchor indica in che posizione verra visualizzato il testo al click,
                    // rispetto al marker
                    // Nota che Image, puo' essere anche un indirizzo web con relativo parametro
                    icon_tienda.image= markersxml[i].getAttribute("image");
                    icon_tienda.iconSize = new GSize(markersxml[i].getAttribute("width"), markersxml[i].getAttribute("height"));
                    icon_tienda.iconAnchor = new GPoint(37, 59);
                    icon_tienda.infoWindowAnchor = new GPoint(31, 8);
                
                    // Il testo che si visualizza al click sul marker
                    // Qui puoi inserire anche l'immagine
                    
                    var infoMarker="<div style=\"white-space:nowrap\">[b]"+markersxml[i].getAttribute("alias")+"[/b]
"+markersxml[i].getAttribute("phone1")+"
"+markersxml[i].getAttribute("address")+"
"+markersxml[i].getAttribute("city_name")+"
"+markersxml[i].getAttribute("zipcode")+"</div>";
                
                    // definisco la coordinata
                    var latlng = new GLatLng(markersxml[i].getAttribute("lat"),markersxml[i].getAttribute("lng"));
                    
                    // posiziono l'icona ed i suoi attributi
                    var markerOptions = { icon:icon_tienda };
                    
                    // associo alla coordinata, l'icona e i suoi attributi
                    var marker=new GMarker(latlng,markerOptions);

                    // Metodo necessario per visualizzare al click                
                    map.addOverlay(marker);
                    
                    marker.bindInfoWindowHtml(infoMarker);        
                    
                    markers.push(marker);

                }
                
                // Carico tutte le cordinate contemporaneamente
                // questo e' un passaggio fondamente. Infatti, una sola richiesta a google
                // e' piu' veloce di n-richieste per ogni coordinata. Tra l'altro google potrebbe
                // bloccare dopo un tot di richieste, mentre con una sola non hai problemi

                mgr.addMarkers(markers,1);
                mgr.refresh();
                });
            }
        });
}

4) Risorse internet
Ti indico un po' di link. Dagli un'occhiata.
http://code.google.com/intl/es-ES/ap...GMarkerManager
http://code.google.com/p/gmaps-utility-library-dev/
http://maps.forum.nu/
http://www.svennerberg.com/2009/01/h...n-google-maps/

5) Consigli:
Attenzione ad indicare nel formato corretto la longitudine e latitudine, altrimenti google sballa e ti ritorna errore (un alert non proprio simpatico) e non carica nessun marker.
Ovvero... non dimenticarti il punto decimale "."

Spero di essere stato abbastanza esaustivo, altrimenti chiedi pure qui o in privato

Ah...buon divertimento (almeno per me e' stato cosi')

Ciao ciao

ps x gli amministratori: se diventasse una pillola(ina), mi farebbe davvero piacere.

[}gu|do[z]{®©]

hem.. ti ringrazio ma quello è codice per le API v2, io sto usando le v3 (vedi codice primo post).

Ad ogni modo nel mio caso il marker è uno e statico (è una mappa "fissa", che indica la posizione di un B&B... l'unico motivo per cui non c'è un'immagine è che la mappa di google è navigabile ).

Mi pare di capire comunque che non c'è una comoda funzioncina che dato un marker (o una coordinata) realizi un'infowindow uguale a quella di google maps... ma bisogna mtterci il contenuto a mano (e fin lì c'ero.. la cosa interessante era più che altro quel "Ottieni indicazioni stradali: A qui - Da qui" che così su due piedi non saprei come ricreare "a mano" )

Grazie

[mosquito70]

Originariamente inviato da }gu|do[z]{®©
hem.. ti ringrazio ma quello è codice per le API v2, io sto usando le v3 (vedi codice primo post).

Ad ogni modo nel mio caso il marker è uno e statico (è una mappa "fissa", che indica la posizione di un B&B... l'unico motivo per cui non c'è un'immagine è che la mappa di google è navigabile ).

Mi pare di capire comunque che non c'è una comoda funzioncina che dato un marker (o una coordinata) realizi un'infowindow uguale a quella di google maps... ma bisogna mtterci il contenuto a mano (e fin lì c'ero.. la cosa interessante era più che altro quel "Ottieni indicazioni stradali: A qui - Da qui" che così su due piedi non saprei come ricreare "a mano" )

Grazie

Per le "ottieni indicazioni" non saprei dirti, ma dando un'occhiata ai link che ti ho inviato, dovresti trovare qualcosa.

Se mi capita di divertirmi anche su questo aspetto, ti faccio sapere

ps. La versione v3, non credo che cambi molto rispetto alla v2

[}gu|do[z]{®©]

Originariamente inviato da mosquito70
ps. La versione v3, non credo che cambi molto rispetto alla v2

Mi sembra più sintetico il codice (già il fatto di non dover impostare la key non è poco in termini di portabilità del file ), oltre ad essere ottimizzato a quanto ho letto

Grazie