Radio & Google Maps
3) Un ulteriore passo e' quello di inserire adesso nella mappa delle ICONE (chiamate Marker da Google Maps) , in un determinato punto geografico, e dei dati associati che vengono visualizzati cliccando sull'icona. Questo codice viene utilizzato per esempio dal sito RSGB Repeater che permette di visualizzare in modo grafico i ponti ripetitori inglese. Ecco il codice da usare:
<script src="http://maps.google.com/maps?file=api&v=2&key=GOOGLE API KEY "
type="text/javascript"></script>
<script type="text/javascript">
//]]>
//<![CDATA[
var gmarkers = [];
var htmls1 = [];
var htmls2 = [];
function createMarker(point, html1, html2, id)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml([new GInfoWindowTab("dati",html1), new GInfoWindowTab("dati2",html2)]);
});
gmarkers[id] = marker;
htmls1[id] = html1;
htmls2[id] = html2;
return marker;
};
function myclick(i) {
gmarkers[i].openInfoWindowTabsHtml([new GInfoWindowTab("General",htmls1[i]), new GInfoWindowTab("Details",htmls2[i])]);
}
var map;
function MakeMap() {
map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(41.926803, 13.364868), 8, G_HYBRID_TYPE);
var point = new GLatLng(42.060445,12.800875);
var marker = createMarker(point, '<b>ICONA DI PROVA</B> ', '<b>ICONA DI PROVA</B> ','1');
map.addOverlay(marker);
}
setTimeout('MakeMap()', 600);
//]]>
</script>
</script>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
La parte selezionata in rosso e' quella che contiene i dati relativi all'Icona-marker da visualizzare. Il risultato e' questo, e' stata visualizzata un'Icona nella posizione 42.060445 12.800875, cliccandoci sopra attiviamo l'informazione testuale.
Clicca per per continuare a leggere la guida