I have a problem displaying icons on an OpenLayers map when viewing the map in FireFox and Chrome. To isolate this behavior I created an Openlayers 3 script that displays icons on a map by loading data from a KML file. The script I'm using is based upon this Openlayers example:
http://openlayers.org/en/v3.4.0/examples/kml.html
Modifications to this script include reference my KML source file and the type of map to display.
Icons display properly when the kml icon reference url points to Google like:
<Icon>
<href>http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png</href>
</Icon>
But when I change the icon reference to the same icon located on my server, the icon is not visible in Chrome or FireFox.
<Icon>
<href>http://www.photoradius.com/data/assets/icons/mm_20_brown.png</href>
</Icon>
In all of my test cases, the icons display as expected in IE.
For reference, here are example files:
1) Icons display as expected in all browsers: http://photoradius.com/debugol3/kml_google.htm icon reference in kml file: http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png
2) Icons do NOT display in Chrome or FireFox (but do in IE) http://photoradius.com/debugol3/kml_local.htm icon reference in kml file: http://www.photoradius.com/debugol3/icons/mm_20_brown.png
So the only difference in the two examples I've created is the location of the icon. If the icon is located on the Google server, it is plotted in all browsers. If it resides on my server, only IE plots the icons.
Any advice will be welcome. Regards.