[Vuejs]-Nuxt js: Google maps markers wont show and loop is not working

by

0👍

✅

Before the map markers even get created, the for-loop hits a runtime error, caused by a couple issues in your code.

Issue 1: clinic is not an Array

As seen in the screenshot, clinic is actually set to an Object:

clinic type

The for-loop assumed clinic was an Array, and iterated with a numeric index, but that won’t work properly with your Object. One solution is to use Object.values() for iteration like this:

// BEFORE:
// for (var i = 0; i < this.clinic.length; i++) {

for (const item of Object.values(this.clinic)) {

Issue 2: item.data does not exist

Your loop is trying to access a nonexistent data prop in each clinic item (i.e., var clinicLat = this.clinic.data[i].lat), but the lat and lng props are actually at the root of the object, as seen in the screenshot:

item format

So you could just access the props directly from the item reference. Using the corrected for-loop from above:

// BEFORE:
// for (var i = 0; i < this.clinic.length; i++) {
//   var clinicLat = this.clinic.data[i].lat;
//   var clinicLng = this.clinic.data[i].lng;
//   //...
// }

for (const item of Object.values(this.clinic)) {
  const clinicLat = item.lat
  const clinicLng = item.lng
  //...
}

Working JSFiddle with changes above

Leave a comment