Javascript: click-listener in google map aanroepen

[TechDude]

Hallo,

Ik ben bezig met het bouwen van een website waarbij ik veel functies handmatig inbouw met behulp van JavaScript.
De website bevat een google map met markers. Zodra de gebruiker op een marker klikt verschijnt er onder de map informatie in een jquery accordion, behorende bij die marker. Dezelfde informatie + accordion wil ik ook graag openen wanneer de gebruiker op een link klikt buiten de map om. Hierop loop ik vast...

JavaScript:

function initialize() {
   addAreaMarkers();
   ...
}

function addAreaMarkers(...params...) {
    for(var i = 0; i < jsonLength; i++) {
        var areaMarker = new google.maps.Marker({
            position: areaLatLng[i],
            map: map,
            icon: iconAreaBase + 'wijkfilter.png'
        });

        (function(...params...) {
            var listenerMarker = google.maps.event.addListener(areaMarker, "click", function(e) {       
                for(var j = 0; j < theProjectCount; j++) {
                    var newPanel = document.createElement('div');
                    newPanel.innerHTML = 
                    
                        /* Hierin de accordion met alle content uitlezen per marker */
                    
                };
            };
        })(...params...);
    };
};


function fillAreaIndex(...params...) {
    ...
    else if (clickedProv == 1) {
        var newAreaPanel4 = document.createElement('div');
        newAreaPanel4.innerHTML = 

        '<ul>' +
        '<li><a href=""><h1>' + townNames[l] + '</h1></a></li>' +
        '<li><a id="">' + areaNames[l] + '</a></li>' +
        '</ul>';
    }
}

De functie addAreaMarkers wordt onload geladen via initialize(). In die functie maak ik markers en heb ik een function closure met daarin een click-listener per marker, die onclick de accordion aanmaakt en vult met content uit een json, behorende bij die marker.

Dit principe werkt. Ik heb ook een functie fillAreaIndex, waarin een lijst met linkjes wordt aangemaakt (areaNames). Die links refereren naar dezelfde markers, en wil ik graag per link dezelfde accordion met info laten tonen als de click-listener achter de marker. Hier kom ik dus niet uit.

Ik zie zelf weinig oplossingen behalve het kopiëren van de complete code in de betreffende fillAreaIndex-functie, maar dat wordt erg omslachtig. Is er een simpelere manier om deze info aan te roepen via een link?

[DJMaze]

Maak eens van je unnamed function op regel 15 een named function

[TechDude]

Dankje, gedaan en die functie even simpel geprobeerd aan te roepen via een test-linkje:
- <a id="area-test" onclick="test();">Test</a>

En in het script via:
- document.getElementById("area-test").addEventListener("click", function() { test(); });

Deze laatste regel zowel in de closure getest als daarbuiten in fillAreaIndex() en initialize(). Buiten de closure gebeurd er niks, binnen de closure zorgt het er alleen voor dat een ander deel van mijn code niet meer werkt. Helaas werkt het dus nog steeds niet...

[DJMaze]

Dan doe je zelf iets fout, waarschijnlijk mis je wat JavaScript kennis.

Kijk hier eens naar:

JavaScript:

var jsonData = [
    {
        areaLatLng: '';
        theProjectCount
    },
    {
        areaLatLng: '';
        theProjectCount
    },
];

function showAccordion()
{
    for (var i = 0; i < theProjectCount; i++) {
        var newPanel = document.createElement('div');
        newPanel.innerHTML = /* Hierin de accordion met alle content uitlezen per marker */
    }
}

for (var i = 0; i < jsonData.length; i++) {
    jsonData[i].areaMarker = new google.maps.Marker();
    google.maps.event.addListener(jsonData[i].areaMarker, "click", showAccordion);
}

HTML:

<a onclick="showAccordion()">

[ Voor 23% gewijzigd door DJMaze op 08-11-2016 15:25 ]

[TechDude]

Ik wil graag weer even reageren in dit topic van mezelf. Dit project is even blijven liggen maar nu pak ik het weer op en ik loop nog steeds vast op dit punt.

Bedankt nog @DJMaze voor je laatste reply. Het werkt deels: ik kan function test() aanroepen via een link en de accordion verschijnt, alleen ik krijg geen vat op de juiste json-content, standaard wordt de laatste content uit de json-lijst geladen.

Dit is nu ongeveer mijn code:

code:

function initialize() {
   addAreaMarkers();
}

function addAreaMarkers(...params...) {
    
    for(var i = 0; i < jsonLength; i++) {
        var areaMarker = new google.maps.Marker({
            position: areaLatLng[i],
            map: map,
            icon: iconAreaBase + 'wijkfilter.png'
        });

        var par1 = areas[i];
        var par2 = par1.projects_count;
        
        (function(par1, par2) {
   
            function test() {
                for(var j = 0; j < par2; j++) {
                    var newPanel = document.createElement('div');
                    newPanel.innerHTML = 
                    
                    /* Hierin de accordion met alle content uitlezen per marker */        
                };
            };
        
            google.maps.event.addListener(areaMarker, "click", test);
            document.getElementById("test-url").addEventListener("click", test);

            /* document.getElementById("test-url").addEventListener("click", function() {
                par1 = areas[2];
                test();
            }); */

        })(par1, par2);
    };
};

De specifieke json-content haal ik op via de parameters (par1, par2) en de function closure is nodig om de accordion via de markers te laten werken.
Maar hoe laat ik een link corresponderen met een specifiek item in de json? Zoals in het stukje comment te zien probeer ik de parameters te manipuleren, ik snap dat hierin waarschijnlijk de oplossing ligt maar ik weet even niet hoe dit aan te pakken. Wie kan me verder helpen? Hartelijk dank alvast!

[Tsjilp]

Je loopt over jsonLength, maar roept dit verder nergens aan? Of is dit een typo?
Verder: Je overschrijft elke keer je click listener van test-url, dus het lijkt me logisch dat je het laatste item terug krijgt.

[TechDude]

jsonLength is één van de parameters die ik in addAreaMarkers() inlaad, dat klopt wel.

Dat zou inderdaad een goede verklaring over die click listener zijn, maar de closure zit in de loop en is volgens mij essentieel om de accordion via de markers te laten werken. De function test() zit weer in die closure dus wanneer ik de click listener buiten de loop plaats kan ik niet meer bij test()?

Edit: Ik heb mijn vraag uit dit topic inmiddels zelf opgelost, dit topic kan dus gesloten worden. Bedankt voor het meedenken DjMaze en Tsjilp!

[ Voor 16% gewijzigd door TechDude op 08-02-2017 12:08 ]