I have a list of objects that have title, latitude, longitude and description and want to place them in google map but I can't place the pins in the map. Any idea what I'm doing wrong?
Thank you in advance! :)
foreach (var item in list)
{
markers += "{";
markers += string.Format("'title':'{0}',", item.Name);
markers += string.Format("'lat':'{0}',", item.Latitude);
markers += string.Format("'lng':'{0}',", item.Longitude);
markers += string.Format("'description':'{0}',", item.Description);
markers += "},";
}
markers += "];";
ViewBag.Markers = markers;
return View();
And the .cshtml code
function InitializeMap() {
var latlng = new google.maps.LatLng(24.4324, 26.83333);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markers = @Html.Raw(ViewBag.Markers);
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatLng = { data.lat, data.lng };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
Title: data.title
});
}
}
So I found out the problem was that for some reason the coordinates were with a comma and not a dot ( ex initial coord was 21.32754 and in javascript were 21,32754) so the only thing I had to do is convert it to float. Thank you guys!