javascript variable is undefined even defined?

Question

var markers;
function initListMarkers() {
        var markers;

    var mpMarkers = [
        ['place 1', 13.784420, 100.684456, 1],
        ['', 13.744571, 100.436233, 7],
        ['', 13.807593, 100.510734, 8],
        ['', 13.783086, 100.493740, 9],
        ['', 13.806426, 100.578541, 10],
        ['', 13.660516, 100.605148, 11],
        ['', 13.761079, 100.710033, 12],
        ['', 13.691707, 100.750974, 13],
        ['', 13.680032, 100.476874, 14],
        ['', 13.678364, 100.747069, 15],
        ['swb', 13.676029, 100.734709, 16],
    ];

    var infoWindowContent = [
        ['<div class="myplace-info-content"><h3>place 1</h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3></h3><p></p></div>'],
        ['<div class="myplace-info-content"><h3>swb</h3><p>suwarnnabhumi airport</p></div>'],
    ];

    var infoWindow = new google.maps.InfoWindow(), marker, i;

    for( i = 0; i < mpMarkers.length; i++ ) {
        var position = new google.maps.LatLng(mpMarkers[i][1], mpMarkers[i][2]);

        bounds.extend(position);

        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: mpMarkers[i][0]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        var mp_id = mpMarkers[i][3];
        markers[mp_id] = marker;

        map.fitBounds(bounds);
    }

    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(12);
        google.maps.event.removeListener(boundsListener);
    });
}

in firebug says

TypeError: markers is undefined

markers[mp_id] = marker;

but the markers was defined. first place is outside function. second place id inside function.

the function below works fine.

function addMarkerDraggable(group_id) {
    // get current view center location
    var current_view = map.getCenter();
    var current_lat = current_view.lat();
    var current_lng = current_view.lng();

    /**
     * set variable from ajax fixed by http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call
     */
    var mp_id = get_from_ajax_as_json();

    mp_id = mp_id.responseJSON;
    mp_id = mp_id.mp_id;

    if (mp_id != 'undefined' && mp_id != '') {
        // myplace id was set, set marker.
        marker = new google.maps.Marker({
            draggable: true,
            position: current_view,
            icon: default_marker_icon,
            map: map,
            title: '',
            animation: google.maps.Animation.DROP
        });

        // set markers array for easy to remove.
        markers[mp_id] = marker;
    }
}// addMarkerDraggable

Why it works differently which it should work same?

How to set markers array from function initListMarkers()?

Answer 1

You've declared markers but you haven't assigned it any value. If you want to make it an array, just initialize its value to a new array, like this:

var markers = [];

Arrays are ideal when you have a sequence of elements in a particular order, indexed with numbers 0 … n . However, from a cursory look at your code, it seems more like you're using it as associative array, or map, where you have an number of items, in no particular order, indexed by a string. If this is the case, it's generally more appropriate to use an object:

var markers = {};