1

I am trying to plot multiple markers on a google map and need some help. I am taking the locations' longitude and latitude from json data being returned from an ajax api call.

I am following along the following post to implement this feature, but it's not working and I'm not sure why. Google Maps JS API v3 - Simple Multiple Marker Example

I think one of my issues are that my locations variable is not being populated with an array so when I do .length its returning to me a number like 23 even though there are only 3 locations in the result set.

var locations = [];

var map;
function initMap() {
map = new google.maps.Map(document.querySelector('.map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
}

$.ajax({
url: api/com...
success: function (result) {
   for (const row of result.payload) {
 locations = 'lat: ' + row.latitude + ', ' + 'lng: ' + 
row.longitude;
    }

 for (i = 0; i < locations.length; i++) {  
     console.log(locations.length);
    marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map,
      data: {
       name: locations[i][0]
      }
   });
   marker.addListener('click', function() {
      if(!this.infoWindow) {
       this.infoWindow = new google.maps.InfoWindow({
         content: this.data.name
       });
      }
         this.infoWindow.open(map,this);
       })
     };
    }
  });
R.P.
  • 119
  • 1
  • 1
  • 9

2 Answers2

1

Your code is close, but your locations variable doesn't contain the data you think it does. You need to pass numerical (floating point) values to the lat/long parameters.

Try something like;

locations = [];
for (const row of result.payload) {
 locations.push({lat: row.latitude, lng: row.longitude});
    }

And then;

marker=  new google.maps.Marker({
    position: {lat: locations[i].lat, lng: locations[i].lng},
    map: map
});

Full example with marker data as well:

var map;
function initMap() {
    map = new google.maps.Map(document.querySelector('.map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
}

$.ajax({
    url: 'api/com...',
    success: function (result) {
        var locations = []; //need to initialise this array empty

        for (const row of result.payload) {
            locations.push({lat: row.latitude, lng: row.longitude, name: row.name}); //Data for name
        }

        for (var i = 0; i < locations.length; i++) {
            console.log(locations.length);
            var marker=  new google.maps.Marker({
                position: {lat: locations[i].lat, lng: locations[i].lng},
                map: map,
                data: {
                    name: locations[i].name //Set data here
                }
            });
            marker.addListener('click', function() {
                if(!this.infoWindow) {
                    this.infoWindow = new google.maps.InfoWindow({
                        content: this.data.name
                    });
                }
                this.infoWindow.open(map,this);
            })
        }
    }
});
Seb Toombs
  • 401
  • 4
  • 7
  • I added in the data property so the info popup will have data to display. Though the popup is not working. Can you please add that functionality to your code snippet so I can be sure I'm following along your logic correctly? Thank you – R.P. Apr 01 '19 at 14:58
  • Anyone able to please help me get the info window popup working? i think i need to pull the name into the locations array. – R.P. Apr 01 '19 at 15:40
  • Yeah I saw the data object in your original question, but I can't see where the "name" data should be coming from. I've updated the code to include how it could be done. – Seb Toombs Apr 01 '19 at 23:04
  • How did you go with this solution @R.P. Did it work for you? – Seb Toombs Apr 04 '19 at 05:02
0
locations = 'lat: ' + row.latitude + ', ' + 'lng: ' + row.longitude;

Not sure about what I'm saying, but it seems that you replace your array by a string here. Maybe you should try :

locations.push({
    lat: row.latitude,
    lng: row.longitude,
});

Then I would get it like that :


position: new google.maps.LatLng(locations[i].lat, locations[i].lng),

// Instead of position: new google.maps.LatLng(locations[i][1], locations[i][2]),

And here, how do you expect to get the name ? I did not see you putting the name in locations above :

data: {
       name: locations[i][0]
      }
David Alvarez
  • 1,226
  • 11
  • 23