3

I am trying to display a title in each markers info window that will display the name of the event. Right now I only can display the very last elements name in the JSON array, and am unsure how to make the others their event title. Any help is appreciated, thanks! I would also like to eventually show along with the event name a couple other elements such as "eventPhone" etc...

The info window only showing last element:

current display

what the array looks like:

JSON elements display

my add marker function:

addMarkersMap(markers){
for(let marker of markers)
{ 
var loc = marker.calEvent.locations[0]['coords'];
var name = marker.calEvent['eventName'];

  console.log(name); //displays name of each event within this object


  marker = new google.maps.Marker({
   position: loc,
  map: this.map,

  });



  var infoWindow = new google.maps.InfoWindow({

      //content: name
    }); 


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



}
}

JSON:

http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

skotienos13
  • 39
  • 5

1 Answers1

1

EDIT: So, just change all your var to let to enable let's proper block scoped variable declaration to work, and also to follow convention.

It's possible that you are experiencing a closure issue where the value of marker is the last one.

Although let should solve this as it makes your marker be in block scope, try to make your addListener into an IIFE and see if that helps:

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

More info on closures here

syciphj
  • 986
  • 5
  • 11
  • tried with your edit but every info window still displays "The Santa Claus Parade" – skotienos13 Oct 27 '17 at 03:30
  • What does a sample `locations` json look like? Can you include that in your question post. And your 9 other console errors might be affecting this. You could also list those in your post. Try changing your `var` to `let` for convention as well. – syciphj Oct 27 '17 at 03:40
  • here is the JSON feed: http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500 – skotienos13 Oct 27 '17 at 03:41
  • Ok that's good. Your JSON for `location` data is also in good format (as it's apparently from an external site). You can then try to remove the closure, back to your original. See if that works. Here's the reasoning behind closures and e6 with `let`: [link](https://medium.com/front-end-developers/es6-variable-scopes-in-loops-with-closure-9cde7a198744) – syciphj Oct 27 '17 at 03:48
  • would I then do the same thing to say display the eventWebsite underneath? and is there a good way to display the name in bold? – skotienos13 Oct 27 '17 at 03:51
  • If you mean display the eventWebsite underneath the name, just change how you build your infoWindow from just `content:name` to inserting html. I suggest you create another variable like `let contentString = ''

    ' + name +'

    '+ '

    website: ' + eventWebsite + '

    '` You can also add classes to the html or however you want to manipulate it. Learn more about it here in the [documentation](https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple)     – syciphj Oct 27 '17 at 03:56
  • If my answer + comment has helped, it would also help me and others if you accept my answer :) – syciphj Oct 27 '17 at 04:00