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

    });
});
});

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

    });
});
});

• javascript
• jquery
• ajax
• google-maps
• google-maps-api-3

• How do you perform the ajax call first and then load the maps with markers? Because map is loaded on window onload and ajax call is performed later so lat/lng are received later after the map has been loaded. Can you please help me I am stuck on this for hours. How can I force the Ajax call to go first and get the array and then load the map with marker? – Faizan Commented Oct 29, 2013 at 18:17

1 Answer 1

you should make global your variable called map. That's all, in fact my recommendation it's to move all to a javascript file like this

    $(document).ready(initialize);
    var map;

function initialize() {
    var latlng = new google.maps.LatLng(42.354183,-71.065063);
    var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map($('#map-canvas')[0], options);

    $("#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
            });
        }

    });
}