Mappa interattiva con jquery ajax e php.

maforast

Nuovo Utente
8 Nov 2010
7
0
0
Salve a tutti, sto cercando di fare una mappa interattiva con gli script in oggetto.
Vi posto un pò di codice con la speranza che mi aiutiate lì dove mi sono bloccato.

Parte jquery ajax
Codice:
function riempiCampoForm(){
		$(document).ready(function()
 		{
		var $bigMap=$('#div_regioni');
		$('area').click(function(){
			var regionId=$(this).attr('alt');
			$bigMap.slideUp('fast', function(){
				$('#'+regionId).slideDown('fast');
				$('div#divP').show();
			});
		});
		
		$('#selReg').change(function(){
			var regione = $('#selReg').attr('value');
			$.post("selection.php", {idregione:regione}, function(data){	
			$("div#divP").empty();
			$("div#divP").prepend(data);
						});
			});
						
		$('button').click(function(){
			$(this).parent('.regions').hide();
			$('div#divP').hide();
			$bigMap.show();
		});
		});
		
		}		

$(document).ready(function(){
  			$('area').click(function(){
      		var title=$(this).attr('alt');
     		$("#selReg").val( $(this).attr('optionVal') );
      		$("#selPrv").val( $(this).attr('optionVal') );
			});
      	});

In pratica quì faccio delle chiamate a una funzione php

PHP:
public function ShowRegione()
		{
			$sql = "SELECT * FROM regioni ORDER BY nomeregione ASC";
			$res = mysql_query($sql,$this->conn);
 
				while($row = mysql_fetch_array($res))
				{
					echo '<option value="' . $row['idregione'] . '">' . $row['nomeregione'] . '</option>';
				}
 
			echo '</select>';
		
		}
		
		public function ShowProvincia()
		{
		
			$sql = "SELECT * FROM province where idregione=$_POST[idregione] ORDER BY nomeprovincia ASC";
			echo"<div id=selPrv class=divFormGeoTh style=position:relative;top:3px>Provincia</div>";
			echo" <div class=divFormGeoTd>";
			echo "<select id=selPrv name=idprv class=selFormGeo >";
			
			$res = mysql_query($sql,$this->conn);
				while($row = mysql_fetch_array($res))
				{
					echo '<option value="' . $row['idprovincia'] . '">' . $row['nomeprovincia'] . '</option>';
				}
 
			echo '</select>';
		
		}
		
 
		public function ShowComune()
		{
			if($_POST['idprovincia'] == "*")
			{
				die;
			}
 
 		 		
			$sql = "SELECT * FROM comuni WHERE idprovincia=$_POST[idprovincia]";
			$res = mysql_query($sql,$this->conn);
				echo'<option value="*">Scegli...</option>';
				while($row = mysql_fetch_array($res))
				{
					echo '<option value="' . $row['idcomune'] . '">' . strtolower($row['nomecomune']) . '</option>';
				}
  
		}

per valorizzare le regioni, le province e i comuni. al tempo stesso se clicco su una regione della mappa italiana vengono modificate le entry nelle select e viene esplosa la mappa della regione al posto della mappa italiana. A sua volta la mappa della regione è mappata con le province con il classico map area html. A questo punto vorrei fare diverse cose:

1) avere la possibilità di cambiare mappa quando nella select delle regioni modifico la regione.

2) poter mostrare le select hidden anche se non opero sulla mappa ma modifico le select.
Ovvero vorrei che il comportamento fosse biunivoco nel senso che ho le stesse azioni, sia se agisco sulla mappa sia se agisco sulle select.

In questo momento la cosa funziona a metà solo se clicco sulla mappa ma se cambio regione dalla select non mi viene cambiata la mappa (non so come fare)

di seguito metto il codice html

HTML:
<div id="div_regioni" >					
<img src="http://forum.mrwebmaster.it/images/italia.gif" alt="" width="270" height="300" usemap='#Map'/> 
<map name="Map" id="Map">
...  
  <area title="Campania" shape="poly" coords="165,162,187,162,193,170,197,171,194,176,194,183,199,192,200,197,194,198,187,194,186,183,181,180,177,180,176,177,167,175"   onclick="riempiCampoForm();" alt="Campania" optionVal="8" />
...
	</map>
</div>

<div id="Campania" class="regions"><button>Italia</button>- Campania
<div id="div_province" ><img src="http://forum.mrwebmaster.it/images/campania.gif" alt="" width="279" height="260" usemap='#camp'/>
  <map name="camp" id="camp">
<area id="_map_sal" title="Salerno" shape="poly" coords="164,131,191,139,203,115,224,139,234,158,242,180,257,194,272,211,259,221,253,234,234,238,221,255,198,238,169,211,175,199,162,168,126,133,116,145,113,125" href="#" alt="Salerno" optionVal="38" />
  ..
  </map>


<div id="divR" class="divFormGeoTr">
			<div class="divFormGeoTh" style="position:relative;top:3px">Regione</div>
			<div class="divFormGeoTd">
				<select id="selReg" name="selReg" class="selFormGeo" onchange="" >
					<option value="" class="noselect">Seleziona</option>
					<?php
					include 'option.class.php';
					$obj = new Option();
					$obj->ShowRegione();
					?>
					</select>
			</div>
			</div>
		<div id="divP" class="divFormGeoTr" style="display:none">
			<div class="divFormGeoTh" style="position:relative;top:3px">Provincia</div>			
				<div class="divFormGeoTd">
			<select id="selPrv" name="selPrv" class="selFormGeo" >
				<option value="" class="noselect">Seleziona</option>
			</select>
			</div>
			</div>
		<div id="divC" class="divFormGeoTr" style="display:none"></div>
		<div id="divZ" class="divFormGeoZoneTr" style="display:none"></div>

Grazie per l'attenzione e per i preziosi consigli
 
Discussioni simili
Autore Titolo Forum Risposte Data
asevenx [HTML] Creare mappa interattiva con Illustrator HTML e CSS 5
M Creare mappa immagine interattiva con dati forniti da database PHP 0
O Mappa Interattiva PHP 3
M Mappa "interattiva" di isole per browsergame Javascript 7
emanuelevt mappa interattiva - problema jQuery 1
A Help..Mappa Interattiva HTML e CSS 0
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
A [Javascript] Marker personalizzati su mappa leaflet Javascript 0
C [PHP] Punto su mappa PHP 0
J [Wordpress] Mappa WordPress 2
M [Javascript] Visualizzazione mappa Javascript 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
Trapano [PHP] Mappa con gli indirizzi PHP 3
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4
S [Javascript] Creare mappa per ogni utente Javascript 5
felino [Google MyBusiness] Maker non presente durante l'esplorazione della mappa Google+ 3
F Aggiornare marker su mappa google con una funzione ajax richiamata al cambio di una select Ajax 2
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
L Array multidimensionale mappa browsergame PHP 1
L Overlapping marker mappa google Javascript 0
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
E realizzare una mappa personale e responsive HTML e CSS 6
G Mappa Javascript Presentati al Forum 0
M Mappa all'interno del sito con ricerca delle filiali Javascript 8
L Problema Inserimento Azioni Su mappa vettoriale Javascript 0
M Mappa immagine...vi prego è urgente, devo farlo quanto prima HTML e CSS 5
F zoom jquery mappa jQuery 1
J Mappa che visualizza daove sei PHP 7
F mappa jquery con effetto hover + fancybox Javascript 1
L Problemi a interagire con la mappa sul mio sito jQuery 1
felino Plugin per Mappa del sito WordPress 5
G Scaricare kml da una mappa incorporata in un sito web HTML e CSS 5
U [javascript] visualizzare marker su mappa di google Javascript 10
J Mappa con dati da db PHP 0
S [risolto] Creare una mappa Google per ogni indirizzo Javascript 14
M Mappa immagine con elenco di link reciproci Javascript 0
P Popolare un Database da una mappa di google map PHP 7
P Mostrare punti interesse du una mappa di google maps Javascript 1
M Guida su come inserire la mappa di Goggle con Jumi Joomla 1
A creare una mappa del sito in frame HTML e CSS 0
unkus_nob marker dinamici in mappa google Javascript 3
M mappa generata da librerie gd modificabile tramite form PHP 51
L Centri Media in Italia: mappa dei clienti (aggiornata) SEO e Posizionamento 9
V Mappa di Google su explorer funziona, su CHROME e FIREFOX NO! Javascript 1
A mappa del sito nascosta HTML e CSS 6
G creare mappa + legenda Webdesign e Grafica 13
voldemort Mappa con jQuery jQuery 0
M Gestione di una mappa PHP 3
E Visualizzare mappa al passaggio del mouse Javascript 2

Discussioni simili