JavaScript: Get Selected Google Marker

Question

I'm having a google map where google markers are put up. The placement of markers works well. But if I click a marker, the adress should open up in an infowindow. The adress, longtitude and latitude are loaded from model.js into the variable myLocations.

EDIT: Currently a click on any marker returns the adress of the last object in myLocations. But I would like to get the myLocations.adress of the one who was clicked.

var markerspots;
var spot;
var j;
for (j = 0; j < myLocations.length; j++){

    spot = {
        lat: parseFloat(myLocations[j].lati),
        lng: parseFloat(myLocations[j].long)
    };

    contentString = myLocations[j].adress;

    markerspots = new google.maps.Marker({
        position: spot,
        map: map,
        icon: markerspot,
        content: contentString,
        id: j
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(markerspots, "click", (function(marker) {
        return function(evt) {
            infowindow.setContent(contentString);
            infowindow.open(map, markerspots);
        }
    })(markerspots));
}

I have found lots of solutions, but I don't understand any of those. So how can I make the content of the clicked marker show up in an infowindow?

Thanks

@duncan infowindow is in the lower third, var infowindow = new google.maps.InfoWindow(). map can't be found in the piece of code i just posted, but its above that piece and create like this: var map = new google.maps.Map(document.getElementById("karte"), kartenoption); — Half_NO_oB, May 31 '17 at 13:31
Please post a [mcve] that demonstrates the issue **in the question itself** (not (just) a jsfiddle) — geocodezip, May 31 '17 at 15:48
duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example), solves your "infowindow issue" with an anonymous function closure. You need closure on contentString as well as marker. — geocodezip, May 31 '17 at 16:09
@John the project consists of lots of files and folder. I'm not familiar with jsfiddle, but i pasted the html code and the js code. Hope that helps? https://jsfiddle.net/Half_NO_oB/6r678o6t/ — Half_NO_oB, May 31 '17 at 22:42

peterulb · Accepted Answer · 2017-05-31T15:16:04.010

1

Well you are accessing your contentString, which is set to the last one you created in your for loop.
What you really want is the content property of the marker you clicked on, which is stored in this.

So

google.maps.event.addListener(markerspots, 'click', function() {
   console.log(this.content);
 });

should do the trick.

Example here: https://jsfiddle.net/4tpnh00u/

edited May 31 '17 at 15:16

answered May 31 '17 at 15:05

peterulb

2,869
13
20

wow this was on spot! quite the obvious mistake though... "this" fixed the content shown, but not the position. The infowindow always shows up on the position of the last object read from the database. I fixed it with infowindow.open(map, this); – Half_NO_oB May 31 '17 at 21:37

JavaScript: Get Selected Google Marker

1 Answers1