Problems Getting XML data with custom icon to show in Google Map on my site - google-maps-api-3

Question

Hello all I am trying to resolve an issue with getting my XML data to show in a map. I am still learning the code, but perhaps someone could help me determine why the icons / data will not show.
Here is a sample of my XML:
<?xml version="1.0"?>
<markers>
<marker
id="461"
name="Pilot Travel Center"
address="I-20 / 59, Exit 123"
city="Birmingham"
state="AL"
zip="35204"
phone="xxx-xxx-xxxx"
fax="xxx-xxx-xxxx"
manager="Joe"
lat="33.529307"
lng="-86.852215"
url="http://www.pilotflyingj.com"
type="restaurant"/>
<marker
id="1402"
name="Flying J Travel Plaza"
address="Ross Clark Highway / Highway 231"
city="Dothan"
state="AL"
zip="36301"
phone="xxx-xxx-xxxx"
fax="xxx-xxx-xxxx"
manager="Johnny"
lat="31.192005"
lng="-85.399838"
url="http://www.pilotflyingj.com"
type="restaurant"/>
</markers>
and here is the google API portion
<script>
var customIcons = {
restaurant: {
icon: 'ts_images/cat_scales.png',
},
bar: {
icon: 'ts_images/xx.png',
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(39.809734, -98.555620),
zoom: 4
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('xml/cat_scales.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var city = markerElem.getAttribute('city');
var state = markerElem.getAttribute('state');
var zip = markerElem.getAttribute('zip');
var phone = markerElem.getAttribute('phone');
var fax = markerElem.getAttribute('fax');
var manager = markerElem.getAttribute('manager');
var url = markerElem.getAttribute('url');
var phone = markerElem.getAttribute('phone');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
I have searched but cannot determine what the issue is. I would greatly appreciate the help. Thank You.

Answer 1

Use the full URL of the custom icons. It needs to be a complete URL publicly available on the web (pointing to your webserver where you have your custom icon).
for example (using icons on my server):
http://www.geocodezip.com/mapIcons/marker_red.png
So define the custom icon structure like this:
var customIcons = {
restaurant: {
icon: 'http://www.geocodezip.com/mapIcons/marker_red.png',
},
bar: {
icon: 'http://www.geocodezip.com/mapIcons/marker_blue.png',
}
};
proof of concept fiddle
code snippet:
var customIcons = {
restaurant: {
icon: 'http://www.geocodezip.com/mapIcons/marker_red.png',
},
bar: {
icon: 'http://www.geocodezip.com/mapIcons/marker_blue.png',
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(39.809734, -98.555620),
zoom: 4
});
var infoWindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP or XML file
// downloadUrl('xml/cat_scales.xml', function(data) {
// var xml = data.responseXML;
var xml = xmlParse(xmlStr);
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var city = markerElem.getAttribute('city');
var state = markerElem.getAttribute('state');
var zip = markerElem.getAttribute('zip');
var phone = markerElem.getAttribute('phone');
var fax = markerElem.getAttribute('fax');
var manager = markerElem.getAttribute('manager');
var url = markerElem.getAttribute('url');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
// });
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
google.maps.event.addDomListener(window, 'load', initMap);
function xmlParse(str) {
if ((typeof ActiveXObject != 'undefined') || ("ActiveXObject" in window)) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return document.createElement('div', null);
}
var xmlStr = '<?xml version="1.0"?><markers><marker id="461" name="Pilot Travel Center" address="I-20 / 59, Exit 123" city="Birmingham" state="AL" zip="35204" phone="xxx-xxx-xxxx" fax="xxx-xxx-xxxx" manager="Joe" lat="33.529307" lng="-86.852215" url="http://www.pilotflyingj.com" type="restaurant"/><marker id="1402" name="Flying J Travel Plaza" address="Ross Clark Highway / Highway 231" city="Dothan" state="AL" zip="36301" phone="xxx-xxx-xxxx" fax="xxx-xxx-xxxx" manager="Johnny" lat="31.192005" lng="-85.399838" url="http://www.pilotflyingj.com" type="bar"/></markers>';
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map'></div>