I'm in the process of plotting around 120 markers on a Google Map by utilizing an ajax populated array containing google.maps.LatLng objects
Here is my script
<script type ="text/javascript">
$.ajaxSetup({
cache: false
});
var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;
// Ajax request to populate latlng array with LatLng objects
$.ajax({
type: "POST",
url: "map.aspx/getLatLng",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
xmlDoc = $.parseXML(response.d);
$(xmlDoc).find("Table").each(function () {
latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
});
//alert(latlng.length.toString());
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
// Google Maps callback and initialization
window.gMapsCallback = function () {
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function () {
if (gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(document).ready(function () {
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(24.678517, 46.702267),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Loop through latlng array and create markers
for (var i = 0; i < latlng.length; i++) {
marker = new google.maps.Marker({
map: map,
position: latlng[i]
});
var infowindow = new google.maps.InfoWindow({
content: 'Location info:<br/>Country Name:<br/>LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
</script>
Html
<div id ="map" style="width:850px; bottom:20px; height: 500px;">
</div>
I feel like I might be overlooking something
Do I need to convert the latlng array of google.maps.LatLng objects to LatLng before assigning it to position ?
marker = new google.maps.Marker({
map: map,
position: latlng[i]
});
Your assistance would be greatly appreciated, Thank you in advance,