Google Maps - Un marker personalizzato

Può essere molto utile usare un marker personalizzato. I marker, abbiamo già visto qualche articolo fa, sono i segnalibri che compaiono sulla mappa di Google ed indicato una determinata coordinata.

L'uso del marker personalizzato riesce a distogliere l'utente dalla mappa stessa ed a farla personalizzare con il proprio web, prescindendo quindi da Google. Inoltre un uso dinamico dei marker permette una lettura veloce dei punti segnalati. Possiamo usare un marker a forma di ristorante per indicare i punti di ristoro, uno a forma di croce per indicare gli ospedali, e così via.

In codice tutto risulta abbastanza semplice e si esplica nell'istanziare l'oggetto GIcon. Di seguito un facile esempio:

    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;
        }

        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = null;
        baseIcon.image = 'http://www.davidonzo.com/gmaps/icon/3.png';
        markerOptions = { icon:baseIcon };

        geocoder.getLatLng(address, function(point){
          if(!point){
            alert('Spiacente, indirizzo non trovato');
          }else{
            var marker = new GMarker(point, markerOptions);
            markerOptions = { icon:baseIcon };
            map.addOverlay(marker);
            GEvent.addListener(marker, "click", function() {
                   marker.openInfoWindowHtml('Coordinate<br />'+point);
          });
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

Come sempre una pagina con un esempio un po' più complesso, da usare al volo.