Ciao ragazzi un saluto a tutti e complimenti per il forum. Mi serviva un aiuto ho un database mysql con
questa struttura:
Il database è collegato ad una mappa di google maps che selezionata la regione la provincia e il comune mi
estrae i markers di quel comune, la mappa è questa:
Tutto funziona perfettamente. Adesso però vorrei fare in modo di inserire delle icone diverse ai markers in
base all'attributo "TYPE" che trovo nel database. In pratica dare un icona mettiamo rossa per i bar e blu
per i restaurant.
Se servono posto anche gli script e i file collegati.
Se qualcuno sa aiutarmi grazie altrimenti grazie comunque.
questa struttura:
Codice:
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `comune`, `type`) VALUES(2, 'Buddha Thai &
Bar', '2222 2nd Ave, Seattle, WA', 41.447948, 12.174707, 'san cesareo', 'bar');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `comune`, `type`) VALUES(3, 'The Melting Pot',
'14 Mercer St, Seattle, WA', 41.447948, 12.174707, 'civitavecchia', 'restaurant');Il database è collegato ad una mappa di google maps che selezionata la regione la provincia e il comune mi
estrae i markers di quel comune, la mappa è questa:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 = []; richiesta
function initialize() {
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(41.447948, 12.629052);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
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);
}
});
}
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 marker = new google.maps.Marker({position: latlng, map: map});
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()">
<div id="contenitore">
<div id="contenuto">
<form id="comuneScelto">
<fieldset>
<label for="regioni">Regioni</label><br />
<select name="regioni" id="regioni" onChange="loadList('province', getSelected(this))" >
</select><br />
<label for="province">Province</label><br />
<select name="province" id="province" onChange="loadList('comuni', getSelected(this))">
<option>-- Seleziona prima una regione --</option>
</select><br />
<label for="comuni">Comuni</label><br />
<select onchange="geocode()" name="comuni" id="comuni">
<option>-- Seleziona prima una regione --</option>
</select><br />
</fieldset>
</form>
<!-- carica il contenuto della lista regioni -->
<div id="map_canvas" style="width:100%; height:400px; margin-top:3em;"></div>
</div><!-- /contenuto -->
<div class="clear"></div><!-- /clear -->
</div><!-- /contenitore -->
<!-- ecco lo script che precarica la lista delle regioni -->
<script type="text/javascript">
//<![CDATA[
loadList('regioni', 0);
//]]>
</script>
</body>
</html>base all'attributo "TYPE" che trovo nel database. In pratica dare un icona mettiamo rossa per i bar e blu
per i restaurant.
Se servono posto anche gli script e i file collegati.
Se qualcuno sa aiutarmi grazie altrimenti grazie comunque.
Ultima modifica di un moderatore: