Ciao a tutti e un grazie anticipato a chi mi sapra aiutare. Ho creato questa mappa seguendo dei tutorial in cui vengono estratti da mysql i markers del comune scelto. Ora vorrei inserire icone dei markers diverse in base al tipo di struttura (es. ristoranti,bar) ed ho provato cosi:
Codice PHP:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mappa</title>
<script type="text/javascript" src="js/lists.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript">
var infowindow;
var map;
var markersArray = []; // inserisco tutti i markers creati in un array per poi pulire in caso di nuova richiesta
var customIcons = {
ristorante: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function initialize() {
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(41.447948, 12.629052);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function geocode() {
clearOverlays(); //richiama la funzione per cancellare eventuali precedenti markers
var ind1 = document.getElementById("comuni").value;
var ind2 = " ,IT";
var address = ind1 + ind2; // se cercassimo solo "Roma" potremmo rischiare di trovare una citta' con nome simile, pertanto aggiungo anche ,IT
geocoder.geocode({
'address': address,
'partialmatch': true
}, geocodeResult);
var link = "generazione_xml.php?comune=";
downloadUrl(link+ind1, function(data) { // trasmetto a generazione_xml con GET il nome del comune di cui voglio estrarre i markers
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), latlng);
var type = markers[i] .getattribute("type");
}
});
}
function geocodeResult(results, status) {
if (status == 'OK' && results.length > 0) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
function createMarker(name, latlng) {
var icon = customicons[type] || { };
var marker = new google.maps.Marker({position: latlng, map: map, icon: icon.icon, shadow: icon.shadow
});
markersArray.push(marker);
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
</script>
</head>
<body onload="initialize()" style="background-image: url('../Image/Grigio_Soft.jpg')">
<div class="style1">
<div id="contenitore">
<div id="contenuto">
<form id="comuneScelto">
<fieldset>
<table style="width: 100%" class="style5">
<tr>
<td class="style7" style="width: 400px">
[b]Regioni[/b]</td>
<td class="style10">[b]Provincie[/b]</td>
<td class="style10">[b]Comuni[/b]</td>
</tr>
<tr>
<td class="style8" style="height: 20px; width: 400px">
<select name="regioni" id="regioni" onChange="loadList('province', getSelected(this))" style="width: 214px; height: 22px" >
</select></td>
<td style="height: 20px" class="style9">
<select name="province" id="province" onChange="loadList('comuni', getSelected(this))" style="width: 214px">
<option>-- Seleziona prima una regione --</option>
</select></td>
<td style="height:20px"class="style9">
<select onchange="geocode()" name="comuni" id="comuni">
<option>-- Seleziona prima una regione --</option>
</select></td>
</tr>
</table>
</fieldset>
</form>
<div id="map_canvas" style="width:100%; height:100%; "class="style2"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
//<![CDATA[
loadList('regioni', 0);
//]]>
</script>
</div>
</body>
</html>
...ma purtroppo non funziona spero qualcuno possa aiutarmi.Grazie
Rispondi quotando