Undefined javascript function?

Question

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

First, your code is hard to read. Second, `displayMarkers` seems to be defined inside `initialize`. — Stan, Nov 23 '12 at 16:55
Probably you have an error before the `displayMarkers()` which is causing the issue — Shiridish, Nov 23 '12 at 16:59

score 3 · Answer 1 · answered Nov 23 '12 at 16:55

3

Function displayMarkers must be on the global scope to be called like that (from an onclick attribute).

That's probably what's going on. Please format and indent your code properly, and that should be easy to spot (I think it's defined inside initialize, while it should be outside).

answered Nov 23 '12 at 16:55

bfavaretto

71,580
16
111
150

This is exactly what's going on. I just spent 10 minutes formatting it, and it's defined inside initialize. – Frank B Nov 23 '12 at 16:58
1

Note: unless you make `markers` a global too, you'll have to do ehat Salman A says to keep the function working. – bfavaretto Nov 23 '12 at 17:03
Moving it outside of initialize didn't make any difference in this case. – shaytac Nov 23 '12 at 17:23
@dizpers My favorite tool for that didn't like the code, so it was just easier to do it by hand. Plus it was more like 3 minutes, but I was trying to emphasize just how bad the code's formatting was. – Frank B Nov 23 '12 at 17:27

score 2 · Accepted Answer · answered Nov 23 '12 at 17:01

displayMarkers is defined inside the initialize function.

onclick="displayMarkers(1);" searches the global namespace for the function and obviously it is not there. Here is a workaround that makes displayMarkers function global but still able to reference variables defined inside initialize. Change:

function initialize() {
    // ...
    function displayMarkers(category) {
        // ...
    }
}

To:

function initialize() {
    // ...  
    window.displayMarkers = function (category) {
        // ...  
    }
}

Undefined javascript function?

2 Answers2

Linked