Everything seems to be working perfectly with my Google Map - the centering feature is smooth and accurate. However, I'm facing an issue when trying to add markers without reloading the entire map. Unfortunately, no visible markers appear on the map.
Here's a glimpse of my script:
function initializeMap(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(48.2136522, 16.386172),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
}
function addMarkerToMap(locations){
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: true
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
The crucial part of my ajax request looks like this:
...
success:function(data){
$('#pagination_content table').empty();
data = $.parseJSON(data);
i = 1;
coordinates = "";
for(var i in data.results) {
$('#content_table').append("blablabla");
coordinates += "['" + data.results[i].title + "', " + data.results[i].lat + ", " + data.results[i].lat + ", " + i++ + "], ";
};
coordinates = coordinates.slice(0, -2)
addMarkerToMap(coordinates);
},
...
The output of coordinates
appears as follows:
['abc', 48.1857442, 48.1857442, 0], ['xyz', 48.2136522, 48.2136522, 1]
The initializeMap
function is triggered by the document.ready()
event.
I am utilizing API v3 for this implementation.