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>

Commenti