Selezione valori tabella per marker di Google Maps tramite pulsante

[luca9]

Ciao.
Ho creato una mappa di google maps seguendo al guida che si trova a questo link, usando come marker i valori che si trovano in una tabella del database.
https://developers.google.com/maps/articles/phpsqlajax_v3

I tag sei marker sono 2: bar, ristoranti.
Come faccio a creare un pulsante che mi selezioni nella mappa esclusivamente i marker con tag bar?

[groucho baffone]

cosa intendi con "mi selezioni nella mappa esclusivamente i marker bar"? che mostri soltanto certi marker e non gli altri?

[luca9]

si esattamente.
nella mappa ci sono due tipi di marker, anche con icone diverse.
Con un pulsante voglio che si visualizzino solo uno dei gruppo scelti.

es: clicco pulsante 1 si visualizzano solo marker riguardo i bar, clicco pulsante 2 si visualizzano solo i marker riguardo i ristoranti..

[Fede_91]

Ciao, secondo me devi fare una funzione simile alla "downloadUrl("phpsqlajax_genxml.php", function(data)" che viene richiamata dai pulsanti dove elimini tutti i marker visualizzati nella mappa e dentro al ciclo for, tramite un if-else, indichi quali marker visualizzare in base all'id del bottone, filtrando per markers[i].getAttribute("type").

F.

[groucho baffone]

concordo con la soluzione di fede_91. Ho sviluppato funzioni molto simili per un mio sito che, volendo dare altre informazioni oltre la posizione del bar o il ristorante, gestisce i marker sulla base di array js.
in pratica :
info da database in array js
clic su tipologia di attività commerciale -> se esistono marker sulla mappa, vengono eliminati. poi iterazione dell'array per la creazione dei marker relativi alle attività scelte
http://www.maremmaweb.com/sentieri.php

[luca9]

Vi ringrazio per le vostre risposte.
Sto analizzando il tuo codice javascript ma sto andando in confusione perchè ci sono tante variabili e non sono più allenato.

Potete inserirmi solo quel codice indispensabile per realizzare l'array e la funzione al click del pulsante?
Sempre se volete..

In alternativa posso creare una funzione che apra la mappa con il file in base al click?
Es: phpsqlajax_genxml-bar.php dove in questo file php ho impostato solo i marker con type bar.

[groucho baffone]

Potete inserirmi solo quel codice indispensabile per realizzare l'array e la funzione al click del pulsante?

dalle mi parti si risponde "vòi anche una fettina di 'ulo co' pinoli?"
le variabili sono tante ma sono ripetitive perlopiù.. e comunque poche parti del mio codice ti sono utili.. ho dato il link (e quindi i file) più per riferimento che per la soluzione.
però per creare l'array, la funzione js è nel js_costanti.js (non ricordo il nome). da quella poi, puoi dedurre come creare la variabile php che prende i dati dal db.

credo che la soluzione alternativa sia certamente fattibile. ma nel tempo dei linguaggi asincroni, dover ricaricare la pagina per una funzione così... oh.. per inciso.. è solo un mio parere

[luca9]

dalle mi parti si risponde "vòi anche una fettina di 'ulo co' pinoli?"

ahah. Non sono cosa significhi ma lo accetto! So di essere pesante.

Comunque ricontrollerò il codice e il file che mi hai indicato.

Ho modificato la mappa facendo generare al file php che si collega al database un file xml con tag diversi in base alla tipologia.
Es:
<bar name ecc>
<cafe name ecc>

Nella codice javascript ho messo un cliclo if dove se un checkbox è attivato vengono visualizzati nella mappa solo determinati tag xml
La stringa è : var markers = xml.documentElement.getElementsByTagName('bar');

Questo però funziona solo se aggiungo al checkbox l'onclick con la funzione load che carica l'intera mappa.

I marker cambiano nella mappa però quest'ultima si rigenera ogni volta.
Come posso evitare ciò?

[groucho baffone]

non era niente di offensivo.. si dice quando qualcuno chiede troppo.. Elio e le storie tese dicevano più o meno così : va bè, cosa devo fare? infilarmi una scopa in c..o e ramazzarti la stanza?"

riguardo al ricaricamento della mappa.. non capisco perchè debba ricaricarsi.. non puoi semplicemente svuotare l'array marker e ri-riempirlo con gli elementi relativi al checkbox cliccato?
vedere il tuo codice mi farebbe dire qualcosa di più preciso

[luca9]

Si si l'avevo immaginato che non era niente di offensivo. Stai tranquillo!

Inserisco un po di codice per farti capire, se non basta vi lascio il link diretto.

Il file php che si collega al database genera questo xml. L'ho configurato in questo modo:

---- solo alcuni dati..
<markers>
<allmarkers name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/><allmarkers name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>
<bar name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>
<restaurant name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/>
</markers>
----

La pagina php dove c'è la mappa ha questo codice:

----
<script type="text/javascript">
//<![CDATA[

var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};


infoWindow = new google.maps.InfoWindow();

function load() {

var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'terrain'
});


// Change this depending on the name of your PHP file

downloadUrl("phpsqlajax_genxml-bar.php", function (data) {

var xml = data.responseXML;

if (document.selezione.bar.checked) {
var markers = xml.documentElement.getElementsByTagName('bar');

}
else {
var markers = xml.documentElement.getElementsByTagName('allmarke rs');
};



for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,

});

bindInfoWindow(marker, map, infoWindow, html);
}
});

}


function bindInfoWindow(marker, map, infoWindow, html) {

google.maps.event.addListener(map, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);


});

google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

//]]>

</script>

</head>

<body onLoad="load()">

<form name="selezione" method="get" action="action">
BAR<input type="checkbox" name="bar" value="bar" id="bar" onClick="load()" /><br />

</form>
<div id="map" style="width: 500px; height: 300px"></div>

</body>
</html>

----

In questo modo la selezione di determinatim marker funziona ma devo agirew sulla funzione load per far partire il ciclo if.

Spero che così puoi capir meglio come ho realizzato la mappa e dire dove ho sbagliato.