Filtrare risultati Google Maps

**giggi1991** · 27-08-2013, 09:43

Salve ragazzi avrei un piccolo problemino.
In pratica ho due select create tramite ajax; le select in questione sono Regione e Provincia. Se un'utente seleziona ad esempio Lazio come Regione e Roma come Provincia, vengono visualizzati i negozi presenti nella città di Roma, i quali sono presi direttamente dal mio database mysql. Per rendere il tutto più performante ho inserito la mappa dell'italia con Google Maps e i marker vengono estrapolati tutti dal database. Ora vorrei però fare in modo di filtrare la mappa, ovvero se un'utente sceglie di visualizzare i negozi di Roma i marker dovrebbero scomparire tutti lasciando il posto solo a quelli localizzati su tale città.
Di seguito vi posto i file che ho utilizzato che, anche se i marker non vengono aggiornati, potrebbero comunque essere utili a chi cerca di realizzare qualcosa del genere.

Questa è la mia pagina html

codice:

<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&amp;v=2&amp;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 miatable"; //selezioni latitudine e longitudine
     $result1 = mysql_query($exe1, $db)or die(mysql_error());  //estraggo i risultati
     while(list($lat,$long) = mysql_fetch_row($result1)){ 

            echo "\n var point = new GLatLng(".$lat.",".$long.");\n";
            echo "var marker = createMarker(point,'');\n";
            echo "map.addOverlay(marker);\n";
            echo "\n"; //stampo i risultati con un ciclo loop
    }
?> 

}
    }

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

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

La classe option.class.php

codice:

<?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:
';
            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>';
        }

Il file result.php

codice:

<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowResult();
?>

il file selection.php

codice:

<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowProvincia();
?>

Qualsiasi aiuto è altamente apprezzato. Grazie in Anticipo

**cavicchiandrea** · 27-08-2013, 16:44

Per cominciare dovresti passare alla versione 3 (la 2 non mi sembra più supportata da google) poi dovrai popolarti l'array mapOptions con le coordinate (latitudine e longitudine) del database per maggiori dettagli api google

**giggi1991** · 27-08-2013, 16:48

Originariamente inviato da cavicchiandrea
Per cominciare dovresti passare alla versione 3 (la 2 non mi sembra più supportata da google) poi dovrai popolarti l'array mapOptions con le coordinate (latitudine e longitudine) del database per maggiori dettagli api google

Ciao Andrea, ho dovuto utilizzare quel tipo di api poichè lavoro con Magento in Locale e con la versione 3 mi dava dei problemi. Ad ogni modo i dati vengono presi correttamente dal database e i marker sono correttamente inseriti sulla mappa. Il mio problema è filtrarli nel momento in cui un utente sceglie una provincia. Ho provato stamane ad inserire una terza richiesta con jQuery ovvero

jQuery('#sel_provincia').change(function(){

var mappa = jQuery('#sel_provincia').attr('value');

jQuery.post("file.php", {provincia_id:mappa}, function(data){
jQuery("div#map_canvas").empty();
jQuery("div#map_canvas").prepend(data);
});
});

});

Inserendo nel file.php lo script per la creazione della mappa, in modo tale che all'aggiornamento delle select, cambi automaticamente anche la mappa prendendo le nuove coordinate; Ma sembra comunque non funzionare

**cavicchiandrea** · 27-08-2013, 17:02

Ma se li passi direttamente a div map_canvas non credo che possa funzionare dovrai prima passarli a map.setCenter(new GLatLng(43.036776,12.45758,0), 1); poi richiamare (nuovamente) initialize()

**giggi1991** · 28-08-2013, 09:29

Odio avere la pappa pronta, ma non riesco proprio a sistemarlo purtroppo sono una schiappa con javascript e annessi

potresti per caso dirmi come sistemarlo? Ti ringrazio Andrea! Ho letto che sei di Bologna, anche io! Ti offrirò una birra

**cavicchiandrea** · 28-08-2013, 11:16

Dovrei studiarmi le mappe v2 che non ho mai usato, non so se una birra basterà forse ci vuole anche la pizza

comunque mandami un mp con tuoi contatti

Discussione: Filtrare risultati Google Maps

Strumenti discussione

Ricerca discussione

Visualizza

Filtrare risultati Google Maps

Permessi di invio