Adding unique marker options and info window per marker via JS

[benjaminkohl]

I am having trouble understanding how I go about adding an array of markers to a map while also specifying unique properties and an info window for each marker via JavaScript. I am referencing this portion of the documentation: https://plugins.doublesecretagency.com/google-maps/javascript/dynamicmap.js/#map-methods

I am using JavaScript to add the markers and the markers are added to the correct position but I can't get any of the markerOptions to apply. I have tried code like this where I loop through my locations and create an array of options per marker. But I have also tried doing a single array of options but I do not understand how to assign unique IDs for each marker if I am passing a single array of options. I have to reference these markers from another part of the page which is why I need meaningful IDs that I can reference outside of the scope of the map.

Array of Options Arrays

let markerOptions = [];
this.paginator.pageResults.forEach((e) => {
    const options = {
        'id' : 'marker-'+e.id
    };
    markerOptions.push(options);
});
map.markers(this.paginator.pageResults, markerOptions).center(centeredCoords).fit();

One Array

let markerOptions = {
    'id' : '???',
    'infoWindowOptions' : {
        'content' : '<div>[CONTENT HERE]</div>'
    },
};
map.markers(this.paginator.pageResults, markerOptions).center(centeredCoords).fit();

With this latter example, I do see the little [CONTENT HERE] div info windows for each marker. With the first example, nothing seems to work.

So I guess my main two questions are:

1. How do I add unique marker IDs to each marker via JS?
2. How do I add unique info windows to each marker via JS?

[lindseydiloreto]

You're very close with the first example! Except that you are just creating a single value for markerOptions (using the ID of the last marker), and applying that equally to all markers.

Instead, you want to (1) loop over the array of locations, (2) configure the marker options for each individual location, and (3) add each marker to the map one at a time.

Try something like this instead...

// Loop through array of locations
this.paginator.pageResults.forEach((e) => {

    // Set options for a single marker
    let markerOptions = {
        'id' : 'marker-'+e.id,
        'infoWindowOptions' : {
            'content' : `<div>This is marker ${e.id}</div>`
        },
    };

    // Add single marker to the map
    map.markers(e, markerOptions);

});

// Do whatever with the complete map
map.center(centeredCoords).fit();

^ That code is untested, but I'm 95% confident it should work as expected. Let me know if you're still bumping into issues!

[benjaminkohl]

This is example is exactly what I needed! Thank you!