I have a Google Maps map generated from a database table. I would like to filter the marker with the help of two selections: Regione and Provincia, which are made in Ajax.
My page:
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#sel_regione').change(function(){
var cont = jQuery('#sel_regione').attr('value');
jQuery.post("selection.php", {regione_id:cont}, function(data){
jQuery("#sel_provincia").empty();
jQuery("div#result").empty();
jQuery("#sel_provincia").prepend(data);
});
});
jQuery('#sel_provincia').change(function(){
var id_naz = jQuery('#sel_provincia').attr('value');
jQuery.post("result.php", {provincia_id:id_naz}, function(data){
jQuery("div#result").empty();
jQuery("div#result").prepend(data);
});
});
});
</script>
<?php $db = mysql_connect("miodb","user","pass");
mysql_select_db("dbname", $db); ?>
<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript"></script>
<script type="text/javascript">
var mioMarker = new google.maps.Marker({
map: map,
icon: mioLogo,
title:"mioTitle"
});
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker,"click",function(){ top.location = "#" });
return marker;
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(580,400) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(43.036776,12.45758,0), 1);
map.setZoom(5);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
<? $exe1="SELECT lat,lng FROM mytable";
$result1 = mysql_query($exe1, $db)or die(mysql_error());
while(list($lat,$long) = mysql_fetch_row($result1)){
echo "
var point = new GLatLng(".$lat.",".$long.");
";
echo "var marker = createMarker(point,'');
";
echo "map.addOverlay(marker);
";
echo "
";
}
?>
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="regione">
<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowRegione();
?>
</div>
<div id="provincia">
Seleziona una provincia:<br>
<select id="sel_provincia" name="sel_provincia"><option value="no">Scegli...</option>
</select>
</div>
<div id="result">
</div>
<div id="map_canvas" style="width: 580px; height: 300px"></div>
</body>
option.class.php
<?php
class Option
{
public $conn;
public function __construct()
{
$this->DbConnectAndSelect();
}
protected function DbConnectAndSelect()
{
include_once "db_config.php";
$this->conn = mysql_connect($db_host,$username,$password);
mysql_select_db($db_name, $this->conn);
return TRUE;
}
public function ShowRegione()
{
echo 'Seleziona una regione:<br>';
echo '<select id="sel_regione" name="sel_regione"><option value="no">Scegli...</option>';
$sql = "SELECT * FROM table_regione";
$res = mysql_query($sql,$this->conn);
while($row = mysql_fetch_array($res))
{
echo '<option value="' . $row['regione_id'] . '">' . $row['nome'] . '</option>';
}
echo '</select>';
}
public function ShowProvincia()
{
if($_POST['regione_id'] == "no")
{
die;
}
$sql = "SELECT * FROM table_provincia WHERE regione_id=$_POST[regione_id]";
$res = mysql_query($sql,$this->conn);
echo'<option value="no">Scegli...</option>';
while($row = mysql_fetch_array($res))
{
echo '<option value="' . $row['provincia_id'] . '">' . $row['nome'] . '</option>';
}
}
public function ShowResult()
{
$query = "SELECT * FROM miaTable WHERE provincia_id=$_POST[provincia_id]";
$risultati=mysql_query($query);
$num=mysql_numrows($risultati);
if ($num == 0)
{
echo "<br><br> No records found";
}
else
{
echo '<br><br>Trovati i seguenti record: <br> ';
$i=0;
while ($i < $num) {
$denominazione=mysql_result($risultati,$i,"denominazione");
$indirizzo=mysql_result($risultati,$i,"indirizzo");
echo "<b>$denominazione</b><br>$indirizzo<br><br>";
$i++;
}
}
}
}
?>
file result.php
<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowResult();
?>
file selection.php
<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowProvincia();
?>
How I do this? Any help is really appreciated!
