Ciao!
Come promesso... il mio script che fa quanto segue (tra parentesi l'uso della tecnologia applicata):
1 - 3 select dinamiche (regione->provincia->comune) [AJAX+PHP+MYSQL];
2 - scelto il comune la mappa si centra sul comune [JS + Gmap V3];
3 - scelto il comune automaticamente si estrae da un XML - generato da MYSQL con PHP - i markers relativi a quel comune [PHP+MYSQL].
Doverosa premessa: per il core delle liste ajax ho preso spunto da questo articolo:
http://sviluppare-in-rete.blogspot.c...dinamiche.html modificato leggermente con alcune mie necessità.
db mysql regioni-pr-comuni: http://www.sarnari.net/programmazion...atabase-mysql/
Articolo di Gmaps per l'estrazione dei markers (modificato per la V3 delle API): http://code.google.com/intl/it-IT/ap...hpsqlajax.html
In più tutto il supporto di bionicoz al quale ho rubatoalcuni suoi script che aveva pubblicato. Da questo collage è nata una cosa che (sembra) funziona(re)
![]()
Qui http://www.webtemplum.com/webtemplum.../07/script.zip troverete:
codice:mappa.php (la pagina da mostrare) generazione_xml.php (lo script che si occupa di estrarre markers) request.php (script che in connubio con db_configure.php e js/lists.js si occupa di estrarre i valori che ci servono per le select dinamiche) js/util.js (serve a Gmap per le estrazioni dei markers) il Dump SQL di regioni-province-comuni + markers (alcuni sono sballati, ma il test è quello che conta :) )
Non riporterò gli interi listati; anche se non sono commentati pesantemente, sono di non difficile comprensione.
Cominciamo con la mappa
Dopo aver inserito tutte le funzioni che ci occorreranno ( notarecodice:<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 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>che è proprio il link che ci permette di estrarre in formato XML i ns markers ) passiamo ad inserire un semplice form con le nostre selectcodice: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
Notare che sucodice:<form id="comuneScelto"> <fieldset> <label for="regioni">Regioni</label> <select name="regioni" id="regioni" onChange="loadList('province', getSelected(this))" > </select> <label for="province">Province</label> <select name="province" id="province" onChange="loadList('comuni', getSelected(this))"> <option>-- Seleziona prima una regione --</option> </select> <label for="comuni">Comuni</label> <select onchange="geocode()" name="comuni" id="comuni"> <option>-- Seleziona prima una regione --</option> </select> </fieldset> </form>
- regioni e province si invia l'evento onChange per caricare le liste rispettivamente di province e comuni. COmuni invece invierà a geocode() il nome del comune per tirarne fuori lat e lgt e centrarne la mappa.
Lo stesso valore sarà passato a generazione_XML.php via GET per estrarne solo i markers.
QUindi, scelta la nostra regione lo script invia richiesta a js/utils.js (che non riporto perchè già commentato al suo interno) il quale si occuperà di comunicare con request.php per estrarre ID e nomi delle province della regione scelta...
Idem per comuni.
Una volta scelto il nostro comune, GMaps si occuperà di chiamare generazione_xml.php con il nome del comune via get
il quale creerà un XML ben formato e lo reinvierà alla mappa....codice:$comune = $_GET['comune']; $query = "SELECT * FROM markers WHERE comune LIKE '$comune'";
Alla fine, senza ricaricare la nostra pagina (W Ajax!) avremo, scelto il comune, i nostri bei markers....
Enjoy!
TODO:
- mettere in sicurezza
- si può ipotizzare di riprendere invece sempre l'ID del comune e fare ricerca per ID, sicuramente più accurato --> a monte nel db markers dobbiamo essere sicuri che è stato inserito lo stesso IDcodice:$comune = $_GET['comune']; $query = "SELECT * FROM markers WHERE comune LIKE '$comune'";
- ampliare tale che basta la selezione della regione per vedere già i markers della regione, cosi anche per la provincia....!
![]()

alcuni suoi script che aveva pubblicato. Da questo collage è nata una cosa che (sembra) funziona(re)
Rispondi quotando