With the use of the Google Maps API v3, I am currently displaying a map of the United States with markers placed at specific locations obtained from address queries in my Postgres database. My goal is to customize the marker image based on the result of each query. Although I have successfully created two separate objects for these queries and logged them individually, I am struggling to utilize this information to determine which markers are shown.
var labels = '';
var iconBase = 'green.png';
var iconBaseRed = 'red.png';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var arr = JSON.parse(xhr.responseText);
console.log(xhr.responseText);
if(Array.isArray(arr)){
showMarkers(arr);
}
}
}
xhr.open('GET', 'markers.php', true);
xhr.send();
function showMarkers(locations){
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
icon: iconBase,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var xhrred = new XMLHttpRequest();
xhrred.onreadystatechange = function() {
if (xhrred.readyState == 4) {
var arrred = JSON.parse(xhrred.responseText);
console.log(xhrred.responseText);
if(Array.isArray(arrred)){
showMarkers(arrred);
}
}
}
xhrred.open('GET', 'markersred.php', true);
xhrred.send();
function showMarkers(locations){
var markersRed = locations.map(function(locationred, i) {
return new google.maps.Marker({
position: locationred,
icon: iconBaseRed,
label: labels[i % labels.length]
});
});
var markerClusterRed = new MarkerClusterer(map, markersRed,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
I initially tried creating distinct variables for each XMLHttpRequest to generate multiple JSON objects. Unfortunately, when attempting a similar approach with the showMarker function, it did not yield the desired outcome. This is where my issue lies... Any assistance would be greatly appreciated.
For testing purposes, you can access the link below (refer to console log for data): www.rightmediasolutions.com/gs_chrome/testing.html
Currently, only the iconBaseRed marker is being displayed.