Interfacciarsi con le google maps é facile e divertente, una delle prime necessità una volta che si é riusciti ad inserire la mappa di google sul proprio sito é quella di sostituire ai grossi pallini rossi presenti di default delle immagini più efficaci.
In questo esempio vedremo come implementare una funzione javascript che permetta di passargli il colore del pallino ed automaticamente questa utilizza l’immagine corrispondente al colore.

Per fare questo per prima cosa occorre procurarsi una serie di immagini di “segnalini” che ci piacciono, o modificare quella di default. Supponiamo di averle messe nella cartella images con i seguenti nomi:

• map_red.png - per l’immagine rossa
• map_blue.png - per l’immagine blu
• map_yellow.png - per l’immagine gialla
• nuvola.png - é l’immagine della nuvoletta che si apre quando si clicca sul pallino

Ricordarsi che le immagini sono più efficaci se hanno lo sfondo trasparente.
A questo punto ecco un semplice esempio (da inserire prima del body) che permette la visualizzazione di 3 punti con 3 colori differenti:

<script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(44.2, 8.5), 14); map.setMapType(G_SATELLITE_TYPE); var iconColor = new GIcon(); iconColor.shadow = "/images/nuvola.png"; iconColor.iconSize = new GSize(12, 20); iconColor.shadowSize = new GSize(22, 20); iconColor.iconAnchor = new GPoint(6, 20); iconColor.infoWindowAnchor = new GPoint(5, 1); function createMarkerColored(map, point, color, stringa) { iconColor.image = "/images/map_"+color+".png"; var marker = new GMarker(point, iconColor); var html = stringa; GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html);}); map.addOverlay(marker); return marker; } var marker = createMarkerColored(map, new GLatLng(44.1, 8.4), "red", "Ecco un pallino rosso"); var marker = createMarkerColored(map, new GLatLng(44.2, 8.5), "blue", "Ecco un pallino blu"); var marker = createMarkerColored(map, new GLatLng(44.3, 8.6), "yellow", "Ecco un pallino giallo"); } } //]]> </script>

L’unica cosa da fare per aggiungere “segnalini” é modificare e/o aggiungere le righe finali che richiamano la funzione createMarkerColored(). Notare che i due numeri all’interno di GLatLng() sono latitudine e longitudine, mentre il parametro successivo é il colore, ed infine l’ultimo parametro é il messaggio da scrivere nella nuvoletta che si aprirà cliccando sul “segnalino” colorato.

Credo che da questo esempio si possa partire per sviluppare interfaccia interattive interessanti.