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
});
});
}
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download