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
});
}
});
});
});
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
});
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With