I am adding markers to Google Maps dynamically using jquery and Google Maps V3 API. When the button search_button is clicked, a request is sent to the server using AJAX, which returns a JSON array of LatLng corresponding to the results, which will be used to place the markers. However in my Javascript Conole, I get the error: Invalid value for property <map>: map. Where did I go wrong? Here's my code:

HTML Header JS:

<script type=text/javascript>

  function initialize() {

  var latlng = new google.maps.LatLng(42.354183,-71.065063);

  var options = {

    zoom: 15,

    center: latlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

    };

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

}

</script>

jQuery

$(function() {



$(#search_button).click(function(e){

    e.preventDefault();





        // Place markers on map

        for( i = 0; i < json.length; i++) {

            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);

            var marker = new google.maps.Marker({

                position: latLng,

                map: map

            });

        }



    });

});

});