markers afzonderlijk verbergen/showen met Google Maps API v3

[antonvdijk]

Hallo allemaal,

ik heb een probleem met Google Maps API v3 en kan nergens een goed antwoord vinden.
ik heb een kaart gemaakt met 2 verschillende typen markers erop: groep1 en groep2
nu wil ik door middel van een checkbox deze groepen showen of juist verbergen op de kaart, al naar gelang de checkbox is aangevinkt of niet.
ben al een heel eind, zie www.antonvdijk.nl
Hier staan de checkboxen al links aangegeven, maar werken nog niet.

Graag hulp!

 

[That Guy]

Well, gooi een onclick event handler op beide checkboxjes. Op een click check je dan of het aan of uit staat en laat dan die markers zien of niet. Zoiets:

[JS]var checkbox1 = document.getElementById('checkbox1');

checkbox1.addEventListener('click', function()
{
if(checkbox1.checked == true)
{
// laat groep 1 zien
showGroup(1);
}else{
// verberk groep 1
hideGroup(1);
}
}, false);


// bv. om te laten zien
function showGroup(group)
{
var i, len = locations.length;

for(i = 0; i < len; i++)
{
if(locations[4] == 'groep' + group)
{
ShowLocationOnTheGoogleMap(locations);
}
}
}[/JS]

 

[antonvdijk]

Zou je nog eens een kijkje kunnen nemen.
Heb het geprobeerd te implementeren, maar het wil niet echt lukken...

 

[That Guy]

Sowieso eerst eventjes regel 104 veranderen, daar mist een gelijk-teken na type.

Daarnaast is dit een 'klasieke' fout met DOM. Je roept de getElementById aan nog voor dat de HTML geladen is, en dus krijg je dit bericht in je foutenconsole (Firefox/Chrome ctrl+shift+J):

Error: checkbox1 is null
Source File: http://www.antonvdijk.nl/
Line: 68

De oplossing is simpel, zet de twee calls in de initialize functie (samen met de addEventListeners) of zet de Javascript NA de HTML, net voor de </body>.



Oh, en de ShowLocationOnTheGoogleMap functie was maar een voorbeeld, die bestaat natuurlijk niet; deze moet je zelf nog eventjes bouwen, maar ik weet niet hoe je precies de markers neetzet (en wist) op de map.

 

[antonvdijk]

Hmm, ik heb de code aangepast maar ik snap niet wat er misgaat.
setVisible(true) en setVisible(false) werken gewoon NIET.

ik heb het geprobeerd met setMap(null).
hiermee is alleen het probleem dat hij de gehele marker vergeet en dus niet kan terugroepen. met deze methode krijg ik het wel voor elkaar om 1 marker te laten verdwijnen van groep1, maar bij groep2 werkt ie al niet.

er zit ergens dus een fout in de code, maar ik zie gewoon niet waar.
iemand?

http://www.antonvdijk.nl

 

[That Guy]

Hi,


Nou, stiekem doet 'ie 't prima. That is, checkbox 1 werkt; als ik 'm aanzet dan staan er blauwe markers, zet ik 'm uit dan staan er alleen rode. Het probleem is het 2e checkbox: in de code op regel 78 staat een 2e addEventListener voor checkbox1. Dit moet nummer 2 zijn! Dus, dit:
[JS] checkbox1.addEventListener('click', function(){[/JS]
moet zijn
[JS] checkbox2.addEventListener('click', function(){[/JS]

heb zo 't gevoel dat 'ie dan wel werkt

 

[antonvdijk]

WAUW SUPER HET WERKT!!!!

sorry voor de capslock, ben héél erg blij nu.
de 1 die een 2 moest zijn, had ik dus echt niet zelf gevonden.

That Guy, bedankt voor al je tijd en hulp hiermee!
You're great!


_____________________________________

EDIT:

nu werken alleen de infowindows niet.

					google.maps.event.addListener(marker, 'click', (function(marker, i) {
						return function() {
						infowindow.setContent(locations[i][0]);
						infowindow.open(map, marker);
						}})(marker, i)
					);

dit was de originele code (van Google geplukt).
dit werkte wel, maar nu heb ik van de markers een array gemaakt om ze specifiek te kunnen benoemen.
hoe laat ik dan een infowindow zien?

 

[That Guy]

Foutenconsole (ctrl+shift+j) zegt:

Fout: locations is undefined
Bronbestand: http://www.antonvdijk.nl/
Regel: 58

Nu ben je een beetje bezig met closures (maar dat is gecomment) dus daar zit 't m natuurlijk weer in. Je hebt wel marker en i doorgegeven, maar niet locations! Nu is dit zo ongeveer een van de lastigste dingen van Javascript. Zowiezo is het handig om goed te indenten (zoals ik doe, maar dit is persoonlijke stijl). Hier, probeer zoiets eens:

[JS]
google.maps.event.addListener(marker, 'click', function(m, i, l)
{
return function()
{
infowindow.setContent(l[0]);
infowindow.open(map, m);
}
}(marker, i, locations));[/JS]

het makkelijkste is altijd om het even 'in stappen' te doen. Dus:

[JS]google.maps.event.addListener(marker, 'click', HierKomtDeCallBackFunctie);[/JS]
[JS]
google.maps.event.addListener(marker, 'click', function()
{
// hier komt de magie
});[/JS]
[JS]
google.maps.event.addListener(marker, 'click', function(m, i, l)
{
return function()
{
// nee, HIER komt de magie

// noot de 1 letterige variabelen. Hier kunnen we dus m, i en l gebruiken
// maak atijd andere namen voor vars, anders raak je in de war in de closure.
}
}(marker, i, locations));[/JS]

en dan kom je bij het eindresultaat

Als je er lang moeite mee hebt kan je altijd nog de callback scheiden van de event listener. Een willekeurig voorbeeldje:

[js]var i, cbfunc;

for(i = 0; i < 10; i++)
{
cbfunc = function(x)
{
return function()
{
alert(x);
}
}(i);

// cbfunc bevat nu een Function, die een alert() geeft met 0 - 9

addEventListener('bbq', cbfunc, false);
}[/js]