Usare markers personalizzati in Google Maps

ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Attraverso le API di Google Maps è possibile visualizzare sulla mappa dei markers personalizzati. Visualizza l'esempio Ecco lo script da inserire all'interno del tag body:


<!-- div per contenere la mappa-->
<div id="map" style="width:600px;height:400px;"></div>

<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KEY"></script>
<script type="text/javascript">
    //carica la mappa con le ajax api
    google.load("maps", "2.x");
    // valori impostati per latitudine e longitudine
    var lat = 45.685488;
    var lng = 13.103485;
    function initialize() {
        // inizializza mappa
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(lat, lng), 9);
        // aggiunta dei controlli
        map.addControl(new GLargeMapControl3D());
        map.addControl(new GMapTypeControl());
        //creazione icona personalizzata
        var icona = new GIcon();
        icona.image = "http://www.example.com/PERCORSO_ICONA.png";
        icona.shadow = "http://www.example.com/PERCORSO_OMBRA_ICONA.png";
        icona.iconSize = new GSize(20, 34);
        icona.shadowSize = new GSize(37, 34);
        icona.iconAnchor = new GPoint(9, 34);
        icona.infoWindowAnchor = new GPoint(9, 2);
        // imposta l'oggetto GMarkerOptions
        markerOptions = { icon:icona };
        // imposta il punto in cui visualizzare il marker
        var point = new GLatLng(lat,lng);
        // crea e visualizza il marker sulla mappa
        var marker = new GMarker(point, markerOptions);
        map.addOverlay(marker);
    }
    google.setOnLoadCallback(initialize);
</script>

Condividi questo post


Commenti