Google Maps - Oggetto GMarker e gestione openInfoWindowHtml

Quante volte abbiamo visto mappe di GMaps con uno o tanti marker i quali cliccati mostravano la famosa nuvoletta con delle informazioni scritte all'interno. Molto utile se oltre a voler indicare visivamente le coordinate di un punto vogliamo anche dare informazioni ulteriori sul luogo.

Abbiamo già visto come produrre ed inserire in un punto preciso della mappa un marker. Oggi vedremo come abbellirlo con del testo inserito nella famosa nuvoletta, che comparirà al click dell'utente sul marker.

Il tutto è abbastanza semplice e si ottiene facendo lavorare di pari passo l'oggetto GMarker, che ci restituisce il puntatore a mappa e la classe GEvent, aggiungendo un listener all'evento onClick del marker generato mostri la nuvola (openInfoWindowHtml). Sembra uno scioglilingua, ma leggendo il codice apparirà tutto più chiaro.

    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);
            GEvent.addListener(marker, "click", function() {
                   marker.openInfoWindowHtml('Coordinate<br />'+point);
          });
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

In questo caso, per semplicità, ho deciso di mostrare le coordinate LatLng del punto a cui il marker fa riferimento. E' ovvio che avrei potuto scrivere la qualsiasi cosa, in semplice codice HTML.

Come sempre, una pagina per testare live quanto detto.