n.milsht n.milsht - 4 years ago 189
React JSX Question

React + Google Maps JS API, dynamically render markers from state

In React, I'm trying to populate my google map with markers where each marker is determined by an array of objects in my state. Right now, if I have a reducedSites array of say 22 objects, only 1-3 of them will render as markers. This seems to be the case no matter how many objects are in state.

Updated



renderMap() {
const map = document.querySelector('#map')
this.map = new google.maps.Map(map, {
center: { lat: this.state.lat, lng: this.state.lng },
zoom: 8
});
const _this = this
let markers = this.state.reducedSites.map(function(site) {
return new google.maps.Marker({
position: {lat: parseInt(site.latitude), lng: parseInt(site.longitude)},
map: _this.map
});
});
}

Answer Source

Change parseInt to parseFloat.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download