Array of Map Locations/Markers

by freedawirl

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

CSS

html {
    height: 100%
}
body {
    height: 100%;
    margin: 0;
    padding: 0
}
#map_canvas {
    height: 100%
}

JavaScript

$(document).ready(function () {

    var myOptions = {
        center: new google.maps.LatLng(30.4, -97.75),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var storeArray = new Array(
    ["30.586513", "-97.855344", "ID1"], ["30.480655", "-97.787286", "ID2"], ["30.452932", "-97.987008", "ID3"], ["30.492887", " -97.923389", "ID4"], ["30.399688", "-97.749717", "ID5"], ["30.440332", "-97.701174", "ID6"], ["30.426817", "-97.757476", "ID7"], ["30.418366", "-97.668595", "ID8"], ["30.350983", "-97.711896", "ID9"], ["30.314233", "-97.732667"]);

    google.maps.event.addListener(map, 'bounds_changed', function () {

        for (i = 0; i < storeArray.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(storeArray[i][0], storeArray[i][1]),
                map: map
            });
        }

        for (var i = 0; i < storeArray.length; i++) {
            if (map.getBounds().contains(new google.maps.LatLng(storeArray[i][0], storeArray[i][1]))) {
                console.log("marker: " + storeArray[i][2]);
            }
        }

    });


});