PHPBBIntegrare PHPBB PHPFunzioni PHP CFunzioni C EcologiaLa mia ecologia   Chi siamoChi è Senamion HomeHome page corner Il Web e l'ecologia

Senamion


Chi siamo:

Il web e l'ecologia, condividere il web e un momento di riflessione sullo stato dell'ecologia e sul suo futuro

Google

Mettere i puntini colorati (o altre immagini) in google Maps

1 Agosto 2006 by Giovanni | Argomenti: , , | 13255

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.

Pubblicato in Google Maps |

2 Commenti a “Mettere i puntini colorati (o altre immagini) in google Maps”

  1. Giamiro scrive:

    Ciao a tutti!
    seppur prendendo atto che questo tutorial sia ben fatto, io non sono riuscito ad inserire il mio marker nella mappa.
    sono riuscito a customizzare un po la info window, ma non sono riuscito ad allegare questo script con quello gia esistente in questa pagina: http://www.threers.it/mappa.html.
    Sono quasi disperato!

  2. Giovanni scrive:

    Seguendo le istruzioni non dovrebbe essree difficile, prova a postare la pagina con le prove che fai e vediamo se capisco dov’è il problema.

Scrivi un commento