I have the old infowindows in a loop problem where the content for the last loop is showing in all infowindows. Yes I know there are several questions about this already on Stack Overflow but none of them seem to work for me.
<script>
var map;
var myMarker = [];
var myData = [];
function initialize() {
var Nazareth = { lat: -29.847073, lng: 30.853513 };
var myCenter = new google.maps.LatLng(-29.847073, 30.853513);
var mapOptions = {
center: Nazareth,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
SetMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
var infoWindow = new google.maps.InfoWindow();
function SetMarkers() {
var geocoder = new google.maps.Geocoder();
$('#btnTrainer').click(function () {
var suburb = $("#address").val();
$.ajax({
type: "POST",
url: '#Url.Action("ShowAll", "Map")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "suburb": suburb }),
cache: false,
dataType: "json",
success: function (myData) {
for (i = 0; i < myData.length; i++) {
var data = myData[i];
var name = myData[i].FirstName;
var address = myData[i].Address;
geocoder.geocode({ 'address': data.Address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "Trainer" + " "
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(name + "," + address);
infoWindow.open(map, marker);
}
})(marker, i));
}
else {
console.log("We can't found the address, GoogleMaps say..." + status);
}
});
};
}
})
})
}
</script>
Related
all. Please help me solve this issue. Currently I have a dropdown of multiple location for google map. But the marker keeps on duplicating when I change the location. Here is the code for google map. I would like the map to clear the previous marker and only display marker on the current selected location
var geocoder;
var map;
var marker;
function initMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(4.2105,101.9758),
zoom: 6.5
};
map = new google.maps.Map(mapCanvas, mapOptions);
geocoder = new google.maps.Geocoder();
google.maps.event.addDomListener(window, "load", initMap);
}
function geocodeAddress(location) {
var address = '';
if (location != 'all') {
var resultFromAjax = $.ajax({
type: 'POST',
url: "{{ route('getLocation') }}",
data: {
id: location
},
success: function (response) {
if (response.location != '') {
address = response.location;
}
},
error: function (xhr) {
console.log(xhr);
},
async: false
});
}
else {
address = 'Malaysia';
}
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location
});
console.log(marker)
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
I have found the solution, instead of locally declare the marker, I set it as a global function before populate it based on location using geocoding.
var geocoder;
var map;
var marker;
function initMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(4.2105,101.9758),
zoom: 6.5
};
map = new google.maps.Map(mapCanvas, mapOptions);
geocoder = new google.maps.Geocoder();
//Marker
marker = new google.maps.Marker();
marker.setPosition(map.getCenter());
marker.setMap(map);
//
google.maps.event.addDomListener(window, "load", initMap);
}
function geocodeAddress(location) {
var address = '';
if (location != 'all') {
var resultFromAjax = $.ajax({
type: 'POST',
url: "{{ route('getLocation') }}",
data: {
id: location
},
success: function (response) {
if (response.location != '') {
address = response.location;
}
},
error: function (xhr) {
console.log(xhr);
},
async: false
});
}
else {
address = 'Malaysia';
}
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
marker.setOptions({
map: map,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location
});
// var marker = new google.maps.Marker({
// map: map,
// animation: google.maps.Animation.DROP,
// position: results[0].geometry.location
// });
console.log(marker)
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Controler Action code
[HttpGet]
public JsonResult findlatlon()
{
Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
var latlon = entities.LatLangs.ToList();
return Json(new { AddressResult = latlon }, JsonRequestBehavior.AllowGet);
}
findlatlon.cshtml View code
{ ViewBag.Title = "findlatlon"; }
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCM7G5ruvunb0K7qxm6jb1TssJUwROqs-g" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var myMarkers = [];
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: '#Url.Action("findlatlon", "Home")',
data: '{}',
success: function(result) {
//get address from controller action.....
myMarkers = result.AddressResult;
}
});
//init google map
function googleMap() {
//alert("Hellooooooo");//alert
var mapOptions = {
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//alert(myMarkers[0].Latitude);//alert
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < myMarkers.length; i++) {
data = myMarkers[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.Latitude, data.Langitude),
map: map
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.Location_Adress);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
//....
google.maps.event.addDomListener(window, 'load', googleMap);
})
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>
Out-Put
{"AddressResult":[{"Id":1,"Latitude":"33.9982","Langitude":"71.4999","Address":"Peshawar","Image":null,"Title":"Peshawar"}]}
So here the AJAX call the controller and controller retrieve the longitude and latitude from the database and return it in json string to view like the above output.
But here I wants that the Latitude and longitude value which return by the json is assign to the
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude)
And I wants to show the location on google map according to the Lat and Long
Here is an example of displaying google map on button clicked, which display accordingly your response, make sure use 'markers.push(v);' need to make change accordingly your code.
var markers = [];
window.onload = function () {
$('#getMap').click(function () {
var deviceId = $('#deviceNumber').val();
if (deviceId != null || deviceId != "") {
$.ajax({
type: "GET",
url: url,
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, v) {
markers.push(v);
});
var mapOptions = {
center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7'
});
poly.setPath(path);
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
},
error: function () {
alert('error');
}
});
}
});
}
Hope this helps!
Step-1 First of all Create the Controller Action :
public ActionResult googlemap()
{
return View();
}
Step-2 Create Empty View to this action:
#{
ViewBag.Title = "Google Map";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR-KEY" type="text/javascript"></script>
<script type="text/javascript">
var myMarkers = [];
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: '#Url.Action("googlemapfindlatlon", "Home")',
data: '{}',
success: function (data) {
$.each(data, function (i, v) {
myMarkers.push(v);
});
var mapOptions = {
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//alert(myMarkers[0].Latitude)
//alert(myMarkers[0].Langitude)
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < myMarkers.length; i++) {
var data = myMarkers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.Address);
infoWindow.open(map, marker);
});
})(marker, data);
}
//map.setCenter(latlngbounds.getCenter());
//map.fitBounds(latlngbounds);
}
});
//init google map
}
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>
Step-3 From the above View the ajax call is made i.e,
url: '#Url.Action("googlemapfindlatlon", "Home")'
so create the "googlemapfindlatlon" JsonResult action in controller:
public JsonResult googlemapfindlatlon()
{
Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
var latlon = entities.LatLangs.ToList();
//var latlon = entities.LatLangs.OrderByDescending(x => x.Id).Take(1).ToList();
return Json(latlon, JsonRequestBehavior.AllowGet);
}
This is do work correctly for me.
Thank You very much
There is an asp.net web form to show the location of a moving object in google map. According to a given interval it fetches the current location of the object from the database and update it on the map.
Everything works fine. But per each interval it adds same markers on top of the previous ones. I want to clear the markers on the map before fetch the current data from database. I used markers.setMap(null) before calling current values. Then it doesn't show any marker on the map. Any help would be appreciated.
window.onload = function () {
LoadGoogleMap();
}
var markers = [];
var map;
function LoadGoogleMap() {
markers = GetMapData();
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
setInterval(SetMarker, 5000);
}
function SetMarker() {
//markers.setMap(null)
markers = [];
markers = GetMapData();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
icon = data.color;
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Name,
icon: new google.maps.MarkerImage(icon)
});
}
};
function GetMapData() {
var json = '';
$.ajax({
type: "POST",
url: "WebForm4.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (resp) {
json = resp.d;
},
error: function () { debugger; }
});
return json;
}
I found the answer as follows....
<script type="text/javascript">
window.onload = function () {
LoadGoogleMap();
}
var markers;
var map;
var markers1 = [];
function LoadGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng('6.894373', '79.857963'),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
setInterval(SetMarker, 3000);
}
function SetMarker() {
for (i = 0; i < markers1.length; i++) {
markers1[i].setMap(null);
}
markers1 = [];
markers = [];
markers = GetMapData();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
icon = data.color;
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Name,
icon: new google.maps.MarkerImage(icon)
});
markers1.push(marker);
//var infoWindow = new google.maps.InfoWindow();
//infoWindow.setContent("<div style = 'width:50px;min-height:20px'>" + data.Description + "</div>");
//infoWindow.open(map, marker);
}
};
function GetMapData() {
var json = '';
$.ajax({
type: "POST",
url: "WebForm5.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (resp) {
json = resp.d;
},
error: function () { debugger; }
});
return json;
}
</script>
I am trying to update the location of a marker with out refreshing the whole page. I have tried to use setTimeout(function() however I am having no luck..
here is my code I have so far..
thanks in advance
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35.66, -80.50),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "getjson.php",
'dataType': "json",
'success': function (data) {
json = data; } });
return json;})();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
here is my JSON output.
[{"lat":35.6606376,"lng":-80.5048653,"content":"bca"}, {"lat":42.6799504,"lng":-36.4949205,"content":"abc"}]
I would suggest using setInterval rather than setTimeout.
Here is some code that simulates an update via JSON in a fiddle, using your provided JSON with the required "description" member added for each marker:
var map = null;
var gmarkers = [];
var intervalNumber = 0;
setInterval(function () {
new Request.JSON({
url: '/echo/json/',
data: {
json: JSON.encode([{
"lat": 35.6606376 + (0.01 * intervalNumber),
"lng": -80.5048653 + (0.1 * intervalNumber),
"content": "bca",
"description":"first marker"
}, {
"lat": 42.6799504 + (0.01 * intervalNumber),
"lng": -36.4949205 - (0.1 * intervalNumber),
"content": "abc",
"description": "second marker"
}]),
delay: 3
},
onSuccess: function (response) {
update_map(response);
intervalNumber++;
}
}).send();
}, 5000);
update_map = function (data) {
var bounds = new google.maps.LatLngBounds();
// delete all existing markers first
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
gmarkers = [];
// add new markers from the JSON data
for (var i = 0, length = data.length; i < length; i++) {
latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data[i].title
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
infoWindow.open(map, marker);
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
infoWindow.open(map, marker);
});
})(marker, data[i]);
gmarkers.push(marker);
}
// zoom the map to show all the markers, may not be desirable.
map.fitBounds(bounds);
};
function initialize() {
// initialize the map on page load.
var mapOptions = {
center: new google.maps.LatLng(35.66, -80.50),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// add the markers to the map if they have been loaded already.
if (gmarkers.length > 0) {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
https://developers.google.com/maps/documentation/javascript/reference
markerObject.setPosition(latlng:LatLng|LatLngLiteral)
I don't think you need to redraw the map, but in case you do:
google.maps.event.trigger(mapObject, 'resize');
I'm trying to put about 120 marker on a Google Map using ajax populated array of google.maps.LatLng objects
here's my script
<script type ="text/javascript">
$.ajaxSetup({
cache: false
});
var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;
$.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);
}
});
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);
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 think i'm missing something here
Should i parse latlng array of google.maps.LatLng objects to LatLng before i assign it to position ?
marker = new google.maps.Marker({
map: map,
position: latlng[i]
});
Your help will be appreciated,
Thanks in advance,
i think the problem is that you aren't taking into account the asynchronous nature of the ajax request.
you need to build the markers after the ajax request has completed.
put your for each loop in a function and call it within 9at the end) of your on success ajax callback.
you will also need to load the ajax after google maps has loaded otherwise you wont be able to create google latlng objects becasue google maps librbary may not be loadded yet.
withjout rewriting everything this may work..
$.ajaxSetup({
cache: false
});
var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;
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);
$.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()));
});
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);
});
}
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
I moved xml processing after map initialization
$(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);
xmlDoc = $.parseXML(stringxml);
$(xmlDoc).find("Table").each(function () {
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text())
});
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();
});
And every marker in its proper place.
Thanks guys