how to show Latitude and Longitude in gooogle map..1st plot the static values (Latitude and Longitude) and 2nd from database..in mvc at a time show all values..
What I have tried:
@model IEnumerable<bo.location>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show/Add multiple markers to Google Maps in asp.net website</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script>
CMS.Maps.map.setZoom(40);
</script>
<script type="text/javascript">
var markers = [
['Bondi Beach', 31.568524, , 74.361804],
['Coogee Beach', 31.562601, 74.352792],
['Cronulla Beach', 31.565160, 74.359315],
];
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: { lat: 31.491390, lng: 74.299242 },
zoom: 12,
});
setTimeout(function () {
window.location.reload();
}, 60000);
var model = @Html.Raw(Json.Encode(Model))
$.each(model, function (index, item) {
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var point = { lat: Number(item.Lati), lng: Number(item.Longi)};
var marker = new google.maps.Marker({
position: point,
icon: image,
});
marker.setMap(map);
});
}
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
</script>
</head>
<body >
<form id="form1">
</form>
</body>
</html>
Submit an article or tip