Dynamically Add Google Map V3 Markers using jQuery
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
});
}
});
}
Nyxynyx
Hello :) I have no formal education in programming :( And I need your help! :D These days its web development: Node.js Meteor.js Python PHP Laravel Javascript / jQuery d3.js MySQL PostgreSQL MongoDB PostGIS
Updated on July 05, 2022Comments
-
Nyxynyx almost 2 years
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 }); } }); }); });