How to use JavaScript to loop through and parse JSON data from Google Maps API

Question

How to use JavaScript to loop through and parse JSON data from Google Maps API

Hey there, I'm a beginner in javascript and I need some help. I am trying to figure out the best way to access a json object called "js" so that I can display different content for each marker on a map. Right now, all my markers are showing the same key value, which happens to be the last one in the list.


js = JSON.parse(jss);

var infowindow;
infowindow = new google.maps.InfoWindow({
  content: js.length + ' ' + iter //String(jss.length)
});
var iter = 0;

for (var key in js){

  mark = new google.maps.Marker({
    position: new google.maps.LatLng(key*0.5,key*0.5),
    map: map,
    title: 'Uluru (Ayers Rock)'
  });

  google.maps.event.addListener(mark, 'click', function(){
    infowindow.setContent(key.toString());
    infowindow.open(map,this);
  });
}

javascript json google-maps for-loop

Answer 1

Answer №1

Consider using a for loop rather than "for in" for better control,

for (var x=0; x<data.length; x++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[x]*0.5, data[x]*0.5),
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
}

Answer 2

Consider using a for loop rather than "for in" for better control,

for (var x=0; x<data.length; x++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[x]*0.5, data[x]*0.5),
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
}

Answer 3

Answer №2

Make sure to keep a reference of the key in order to pass it into the onclick function for each iteration of the loop. Here's an example:

var data = JSON.parse(jsonData);

var infoWindow;
infoWindow = new google.maps.InfoWindow({
  content: jsonData.length + ' items' //String(jsonData.length)
});
var index = 0;

for (var key in jsonData){

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(key*0.5, key*0.5),
      map: map,
      title: 'Location'
  });
  var keyStr = key.toString();
  google.maps.event.addListener(marker, 'click', function(){
      infoWindow.setContent(keyStr);
      infoWindow.open(map,this);
  });
}

Answer 4

Make sure to keep a reference of the key in order to pass it into the onclick function for each iteration of the loop. Here's an example:

var data = JSON.parse(jsonData);

var infoWindow;
infoWindow = new google.maps.InfoWindow({
  content: jsonData.length + ' items' //String(jsonData.length)
});
var index = 0;

for (var key in jsonData){

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(key*0.5, key*0.5),
      map: map,
      title: 'Location'
  });
  var keyStr = key.toString();
  google.maps.event.addListener(marker, 'click', function(){
      infoWindow.setContent(keyStr);
      infoWindow.open(map,this);
  });
}

How to use JavaScript to loop through and parse JSON data from Google Maps API

Answer №1

Answer №2

Similar questions

Instantly refreshing the Angular DOM following data modifications and retrieval from the database

Selenium was unable to scroll a sidebar or container

When combining Puppeteer with Electron, an error stating "Browser revision not found" may occur. However, this issue does not arise when running with Node

Using JavaScript to assign one object to another object

Interactive html5 canvas game with swiping mechanism

A tutorial on filtering a list to only send a specific attribute in a Node.js response

"Including Span icons, glyphs, or graphs within a table cell in AngularJS based on a specified condition or numerical

Utilizing HTML documents instead of images in Owl Carousel 2

Retrieve information from a JSON file containing multiple JSON objects for viewing purposes

What could be causing TypeScript to throw errors when attempting to utilize refs in React?

Ensuring the absence of values in deconstructed variables within an object

Please anticipate a positive response from the API call

The saving function of the Jquery camera is not working properly and does not store the

Populating options in <select> for Internet Explorer version 5

How to incorporate a new attribute into a JSON object in node.js

Is there a possibility of encountering an endless update loop within a component's render function?

Troubleshooting: Why Won't My Basic JQuery POST Request Work?

What is the Reason for Wrapping Masterpage Javascript File References in a PlaceHolder Control?

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

Modifying the state when an array within another array changes using react hooks