[TUTORIAL] Select dinamiche + centratura GMAPS + ext markers relativi al comune scelt

[webtemplum]

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 rubato alcuni 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:

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

<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>

Dopo aver inserito tutte le funzioni che ci occorreranno ( notare

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

che è proprio il link che ci permette di estrarre in formato XML i ns markers ) passiamo ad inserire un semplice form con le nostre select

<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>

Notare che su
- 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

$comune = $_GET['comune'];
$query = "SELECT * FROM markers WHERE comune LIKE '$comune'";

il quale creerà un XML ben formato e lo reinvierà alla mappa....

Alla fine, senza ricaricare la nostra pagina (W Ajax!) avremo, scelto il comune, i nostri bei markers....

Enjoy!

TODO:

- mettere in sicurezza

$comune = $_GET['comune'];
$query = "SELECT * FROM markers WHERE comune LIKE '$comune'";

- 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 ID
- ampliare tale che basta la selezione della regione per vedere già i markers della regione, cosi anche per la provincia....!

[cavicchiandrea]

Quasi perfetto, non mi sono studiato il codice ma ritengo che sia tutto perfettamente funzionante e "debagato" poi non cosco il php la "perfezione" l'avresti raggiunta con una demo online (cosa che comunque puoi recuperare adesso) comunque grazie da parte di tutti (sopratutto dai fannulloni che torveranno la pappa pronta )

[webtemplum]

Giusta osservazione per la demo....

Il tempo di rimplementarla allora su un mio spazio web

Eccola qui!

http://www.webtemplum.com/webtemplum...ajax/mappa.php

PS Potresti aggiungere il link nel primo post che non posso più modificare? Grazie!

[Tulipan0nero]

Ragazzi vorrei riesumare questo post perchè lo script è interessantissimo!
http://www.webtemplum.com/wp-content.../07/script.zip
Il problema è che lo script non popola le select dinamiche....è come se non andasse il recupero dei dati dal database, ma ho controllato tutto e non ho fatto errori di sicuro.
Ecco il file zip contenente tutti i file che servono...in teoria basta creare un db di prova, importarsi il dump delle tabelle (incluso nel file zip), configurare il dbconfig.php e funzioni_php.php con le credenziali di accesso al database e lanciare quindi mappa.php.
Mi fate sapere se a voi funziona?

GRAZIE!!

Tiziano

[Tulipan0nero]

Aggiungo che l'autore dice di aver preso, per quanto riguarda la selezione delle province e comuni, spunto da:

Doverosa premessa: per il core delle liste ajax ho preso spunto da questo articolo:

http://sviluppare-in-rete.blogspot....-dinamiche.html modificato leggermente con alcune mie necessità.

db mysql regioni-pr-comuni: http://www.sarnari.net/programmazio...database-mysql/

Il bello è che a me lo script originale funziona egregiamente. Ci deve quindi essere qualcosa nella modifica fatta dal nostro amico che non fa più funzionare il recupero dati ajax. Ho rivisto tutto il codice e non riesco a trovare quale possa essere il problema...In linea di massima la differenza sostanziale tra lo script originario e quello modificato (a parte il cartografico google) sta nel fatto che quello originale parte da una pagina html con 2 select...Quello modificato invece parte da una pagina php (mappa.php) che invoca l'ausilio di uno script java lists.js per effettuare le query (script che viene però invocato anche nella versione originale).
Non capisco davvero dove stia il problema....

Riassumo cosa fa lo script: è il classico esempio di regione-proviancia-comune con ajax e javascript con in più l'aggiunta della google map che si centra in automatico sul comune che abbiamo selezionato sulla select list...sarebbe davvero una figata SE FUNZIONASSE.
Ripeto: errori di codice non ne da...Semplicemente i menù restano vuoti (dovrebbero attingere al database ma non succede).

Qualcuno ha voglia di scaricarsi lo script e provarlo?

Grazie!

TIZIANO

[webtemplum]

Ti ho già risposto alla mail privata, ma indico anche qui cosa (forse) ti manca

<script type="text/javascript">
//<![CDATA[
loadList('regioni', 0);
//]]>
</script>

L'hai aggiunto in fondo alla pagina?

Ciao!

[Tulipan0nero]

Ciao, c'era già a fine pagina quel pezzo di codice....ho usato pari pari lo zip con le pagine confezionate da te....

[Tulipan0nero]

Scusami, l'errore era mio e lo script funziona correttamente...avevo un problema di permessi sul database che avevo creato.
Sarebbe interessante sapere se lo script può inserire dall'interfaccia di select un marker.....Intendo: se cerco Lazio - Roma - Roma e clicco su OK poi quando mi vado a riprendere l'utente in automatico dovrebbe visualizzarmi il cartografico con il marker....Sarebbe possibile?