Undefined javascript function?

Posted by user74283 on Stack Overflow See other posts from Stack Overflow or by user74283
Published on 2012-11-23T16:52:16Z Indexed on 2012/11/23 17:04 UTC
Read the original article Hit count: 154

Filed under:

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);">

© Stack Overflow or respective owner

Related posts about JavaScript