Undefined javascript function?
- by user74283
Working on a google maps project and stuck on what seems to be a minor issue. When i call displayMarkers function firebug returns:
ReferenceError: displayMarkers is not defined [Break On This Error]
displayMarkers(1);
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(25.7889689, -80.2264393);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//var data = [[25.924292, -80.124314], [26.140795, -80.3204049], [25.7662857, -80.194692]] var data = {"crs": {"type": "link", "properties": {"href": "http://spatialreference.org/ref/epsg/4326/", "type": "proj4"}}, "type": "FeatureCollection", "features": [{"geometry": {"type": "Point", "coordinates": [25.924292, -80.124314]}, "type": "Feature", "properties": {"industry": [2], "description": "hosp", "title": "shaytac hosp2"}, "id": 35}, {"geometry": {"type": "Point", "coordinates": [26.140795, -80.3204049]}, "type": "Feature", "properties": {"industry": [1, 2], "description": "retail", "title": "shaytac retail"}, "id": 48}, {"geometry": {"type": "Point", "coordinates": [25.7662857, -80.194692]}, "type": "Feature", "properties": {"industry": [2], "description": "hosp2", "title": "shaytac hosp3"}, "id": 36}]}
var markers = [];
for (var i = 0; i < data.features.length; i++) {
var latLng = new google.maps.LatLng(data.features[i].geometry.coordinates[0], data.features[i].geometry.coordinates[1]);
var marker = new google.maps.Marker({
position: latLng,
title: console.log(data.features[i].properties.industry[0]),
map: map
});
marker.category = data.features[i].properties.industry[0];
marker.setVisible(true);
markers.push(marker);
}
function displayMarkers(category) {
var i;
for (i = 0; i < markers.length; i++) {
if (markers[i].category === category) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-container">
<div id="map"></div>
</div>
<input type="button" value="Retail" onclick="displayMarkers(1);">
