Google Maps – Marker con nuvola al loading della mappa

Paka mi chiede in un commento:

Sto impazzendo per cercare di capire il codice da usare x far uscire la "nuvoletta" sul marker subito, senza bisogno del click… mi date una mano?

La cosa è abbastanza semplice, e la riprendiamo proprio dall’articolo in cui l’utente ha commentato. Diamo un occhio a questa porzione di codice.

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(‘Coordinate<br />’+point);
});

E’ abbastanza chiaro che stabiliamo un evento ben preciso per far comparire il marker, tramite l’oggetto GEvent. L’evento in questione è il click sul marker. Se vogliamo che questo compaia senza alcun evento predefinito, basta toglierlo dalla condizione di cui sopra. In questo caso l’evento che andrà a far apparire la nuvoletta sarà quello di default, ovvero il load della mappa.

Di seguito il codice completo della funzione.

    var map = null;
    var geocoder = null;
    var address = ‘97015 Italy’;

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmaps"));
        var geocoder = new GClientGeocoder();
       
        if(document.getElementById(‘addr’).value != ”){
          address = document.getElementById(‘addr’).value;
        }
       
        geocoder.getLatLng(address, function(point){
          if(!point){
            alert(‘Spiacente, indirizzo non trovato’);
          }else{
            var marker = new GMarker(point);
            map.addOverlay(marker);
           
            //Qui faccio apparire la nuvola!
            marker.openInfoWindowHtml(‘Coordinate<br />’+point);
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

E come mio solito, una pagina di esempio da cui estrapolare facilmente il codice sorgente.

3 thoughts on “Google Maps – Marker con nuvola al loading della mappa”

  1. Vorrei creare un marker con icona personalizzata, draggable in cui poter inserire una descrizione.
    Ho il seguente codice:
    var marker = new GMarker(latlng, {icon: getIcon(color), draggable:true,title:"prova"});
    map.addOverlay(marker);
    marker.openInfoWindowHtml('Coordinate<br />'+latlng + '<tr><input type="text"/>Nuova descrizione</tr>');
    Il balloon del marker non si apre.
    Aiuto!!!

Comments are closed.