Google Maps API loop InfoWindow

Question

I'm having trouble reading json and displaying it on infoWindow. What happens is that you are reading only the last product in the list of objects. I wanted you to read all the objects(products) on the list.

It should show in the infowindow like this

• id_seller: 1
• name_seller: Seller 1
• name_Custommer: Custommer 2
• name_product product1
• amount: 10
• name_product product2
• amount: 5
• name_product product3
• amount: 20

Code JavaScript and JSON

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: {
      lat: -25.363,
      lng: -131.044
    }
  });
  const infoWindow = new google.maps.InfoWindow({
    maxwidth: 400 
  });
  setMarkers(map, infoWindow);
}

function setMarkers(map, infoWindow) {
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    size: new google.maps.Size(10, 12),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  }
  //  $.get("file.json", function(data) {
  function processJson(data) {
    var bounds = new google.maps.LatLngBounds();
    var a = data;
    for (var i = 0; i < a.length; i++) {
      var b = a[i].Custommer
      for (var j = 0; j < b.length; j++) {
        var c = b[j].Products
        for (var l = 0; l < c.length; l++) {
          const infoWindowContent = a[i].idSeller +
              a[i].nameSeller +
              b[j].nameCustommer +
              c[l].nameProduct +
              c[l].amount;
          const marker = new google.maps.Marker({
            position: {
              lat: a[i].lat,
              lng: a[i].lng
            },
            map,
            icon: image,
          });
          bounds.extend(marker.getPosition());
          marker.addListener("click", () => {
            infoWindow.setContent(infoWindowContent);
            infoWindow.open(map, marker);
          });
        }
        map.fitBounds(bounds);
      }
    }
  // })
  }
  processJson(jsonData);
}
var jsonData = [
    {
        "idSeller": 1,
        "nameSeller": "Seller 1",
        "lat": -25.363,
        "lng": 131.044,
        "Custommer": [
            {
                "idCustommer": 1,
                "nameCustommer": "Custommer 1",
                "Products": [
                    {
                        "nameProduct": "Product 1",
                        "amount": 10,
                        "price": 2.99
                    },
                    {
                        "nameProduct": "Product 2",
                        "amount": 5,
                        "price": 10.99
                    },
                    {
                        "nameProduct": "Product 3",
                        "amount": 20,
                        "price": 7.99
                    }
                ]
            }
        ]
    },
    {
        "idSeller": 2,
        "nameSeller": "Seller 2",
        "lat": -25.063,
        "lng": 131.045,
        "Custommer": [
            {
                "idCustommer": 2,
                "nameCustommer": "Custommer 2",
                "Products": [
                    {
                        "nameProduct": "Product 1",
                        "amount": 10,
                        "price": 2.99
                    },
                    {
                        "nameProduct": "Product 2",
                        "amount": 5,
                        "price": 10.99
                    },
                    {
                        "nameProduct": "Product 3",
                        "amount": 20,
                        "price": 7.99
                    }
                ]
            }
        ]
    }

]

Answer 1

In your loop, you are overwriting the product information in the infowindow, leaving the last product in the list showing.

Best to name your variables with more meaningful names as well.

existing code:

    for (var i = 0; i < a.length; i++) {
      var b = a[i].Custommer                 // b == customer
      for (var j = 0; j < b.length; j++) {
        var c = b[j].Products                // c == products
        for (var l = 0; l < c.length; l++) {
          const infoWindowContent = a[i].idSeller +
              a[i].nameSeller +
              b[j].nameCustommer +
              c[l].nameProduct +
              c[l].amount;
          const marker = new google.maps.Marker({
            position: {
              lat: a[i].lat,
              lng: a[i].lng
            },
            map,
            icon: image,
          });
          bounds.extend(marker.getPosition());
          marker.addListener("click", () => {
            infoWindow.setContent(infoWindowContent);
            infoWindow.open(map, marker);
          });
        }
        map.fitBounds(bounds);
      }
    }

corrected loop, with meaningful names:

    var sellers = data;
    for (var i = 0; i < sellers.length; i++) {
      let infoWindowContent = sellers[i].idSeller +
          sellers[i].nameSeller+"<br>";
      var customers = sellers[i].Custommer
      for (var j = 0; j < customers.length; j++) {
        var products = customers[j].Products
        infoWindowContent += customers[j].nameCustommer+"<br>";
        for (var l = 0; l < products.length; l++) {
          infoWindowContent += products[l].nameProduct +
            products[l].amount+"<br>";
        }
      }
      const marker = new google.maps.Marker({
        position: {
          lat: sellers[i].lat,
          lng: sellers[i].lng
        },
        map,
        icon: image,
      });
      bounds.extend(marker.getPosition());
      marker.addListener("click", () => {
        infoWindow.setContent(infoWindowContent);
        infoWindow.open(map, marker);
      });
    }

proof of concept fiddle

code snippet:

 function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 10, center: { lat: -25.363, lng: -131.044 } }); const infoWindow = new google.maps.InfoWindow({ maxwidth: 400 }); setMarkers(map, infoWindow); } function setMarkers(map, infoWindow) { const image = { url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", size: new google.maps.Size(10, 12), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 32) } // $.get("file.json", function(data) { function processJson(data) { var bounds = new google.maps.LatLngBounds(); var sellers = data; for (var i = 0; i < sellers.length; i++) { let infoWindowContent = sellers[i].idSeller + sellers[i].nameSeller+"<br>"; var customers = sellers[i].Custommer for (var j = 0; j < customers.length; j++) { var products = customers[j].Products infoWindowContent += customers[j].nameCustommer+"<br>"; for (var l = 0; l < products.length; l++) { infoWindowContent += products[l].nameProduct + products[l].amount+"<br>"; } } const marker = new google.maps.Marker({ position: { lat: sellers[i].lat, lng: sellers[i].lng }, map, icon: image, }); bounds.extend(marker.getPosition()); marker.addListener("click", () => { infoWindow.setContent(infoWindowContent); infoWindow.open(map, marker); }); } map.fitBounds(bounds); // }) } processJson(jsonData); } var jsonData = [{ "idSeller": 1, "nameSeller": "Seller 1", "lat": -25.363, "lng": 131.044, "Custommer": [{ "idCustommer": 1, "nameCustommer": "Custommer 1", "Products": [{ "nameProduct": "Product 1", "amount": 10, "price": 2.99 }, { "nameProduct": "Product 2", "amount": 5, "price": 10.99 }, { "nameProduct": "Product 3", "amount": 20, "price": 7.99 } ] }] }, { "idSeller": 2, "nameSeller": "Seller 2", "lat": -25.063, "lng": 131.045, "Custommer": [{ "idCustommer": 2, "nameCustommer": "Custommer 2", "Products": [{ "nameProduct": "Product 1", "amount": 10, "price": 2.99 }, { "nameProduct": "Product 2", "amount": 5, "price": 10.99 }, { "nameProduct": "Product 3", "amount": 20, "price": 7.99 } ] }] } ]

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <:DOCTYPE html> <html> <head> <title>Simple Markers</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>