-1

I will be very thankful if anyone can point out my mistake. One of the online tutorial link me to this tutorial Adding multiple markers with infowindows (Google Maps API) on how to display each pop up windows with their own content. I've visited other similar post on Stack Overflow but It's been a whole days and I can't really work my head around on this one.

Goal:

each marker on Google Maps

will show the restaurant location. Each location has one or more chef's recommend.

when user click on the marker it will bring up the Google Maps pop up info windows

The pop up windows info content only show the chef's recommend that has been assigned to that particular restaurant (each resutrant can have more than one chef's recommend).


What I already achieve:

Each marker position has retrieve and shown correctly on the Google Maps from the database.

Each marker has their own pop up windows.

Each pop up info windows are able to show content.

Problem:

Each pop up windows on the marker will have the same chef's recommend content that are currently the last row of the database.

Thank you.

// ******** Begin Google Maps ********* //
function initMap() {

  var restMarker = "somePathToImage.png";

  var map = new google.maps.Map(
    document.getElementById('googleMaps'), {
      zoom: 17, 
      center: { lat: gon.locations[0].latitude, lng: gon.locations[0].longitude}
    });

    // ******** BEGIN WINDOW INFO CONTENT ******** //
    for (var x = 0; x < gon.restaurant.length; x++){
      var contentString = 
      '<div id="content1">'+
        '<div class="container">'+
          gon.restaurant[x].chefRecommend +
        '</div>'+
      '</div>'
      ;
    }
   // ******** END WINDOW INFO CONTENT ******** //

   for (var i = 0; i < gon.locations.length; i++){
    var gMapsMarker = new google.maps.Marker({
      position: { lat: gon.locations[i].latitude, lng: gon.locations[i].longitude},
      map: map,
      icon: restMarker
    });

    var gMapsInfo = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 250 
    });

    gMapsMarker.gMapsInfo = gMapsInfo;

    google.maps.event.addListener(gMapsMarker, 'click', function() {
      this.gMapsInfo.open(map, this);
    });
  }
}
shafe
  • 11
  • 3
  • I get a javascript error with the posted code: `Uncaught ReferenceError: gon is not defined`. Please provide a [mcve] that demonstrates your issue. – geocodezip Oct 04 '18 at 20:37

1 Answers1

0

Hi i think that the problem is in the first for cicle..when it's finished you have the same contentString for all the second for cicle.. you need to do all in the same for :

// ******** Begin Google Maps ********* //
function initMap() {

  var restMarker = "somePathToImage.png";

  var map = new google.maps.Map(
    document.getElementById('googleMaps'), {
      zoom: 17, 
      center: { lat: gon.locations[0].latitude, lng: gon.locations[0].longitude}
    });


   for (var i = 0; i < gon.locations.length; i++){
    var contentString = "";
     if (i<gon.restaurant.length){
      contentString=
        '<div id="content1">'+
          '<div class="container">'+
            gon.restaurant[i].chefRecommend +
          '</div>'+
        '</div>'
    }
    var gMapsMarker = new google.maps.Marker({
      position: { lat: gon.locations[i].latitude, lng: gon.locations[i].longitude},
      map: map,
      icon: restMarker
    });

    var gMapsInfo = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 250 
    });

    gMapsMarker.gMapsInfo = gMapsInfo;

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

Hope this help i can't try the code and i'm not sure..

gsimo83
  • 109
  • 2
  • 9
  • Hi gsimo83, thanks you for your suggestion. I did exactly what you shown above. Each pop up info windows has different content now but it was not the correct content that has been assigned to that restaurant. – shafe Oct 04 '18 at 16:36
  • what i am trying now is putting a nested if loops like this, the info windows return nothing. if (i – shafe Oct 04 '18 at 16:53
  • Yes, you have to check the ID or the value that link the location with the restaurant and compile the correct content.I can't test the code now.. Sorry. – gsimo83 Oct 04 '18 at 17:02