Introduction:
Here I will explain how to add multiple markers to Google maps API V3 using jQuery JSON in asp.netwebsite or Show multiple markers in Google maps api in asp.net.
Description:
In previous article I explained clearly how to add Google map to website in asp.net, Add marker to Google map in asp.net website, jQuery image slideshow in asp.net, Sitemap navigation control example in asp.netand many articles relating to jQuery, JavaScript, asp.net. Now I will explain how to add multiple markers toGoogle maps api in asp.net website.
Before add multiple markers to Google map in website first we need to get Google API key for that please check below url
Before add multiple markers to Google map in website first we need to get Google API key for that please check below url
Once you got the key write the following code in your aspx or html page like as shown below
<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 type="text/javascript">
function initialize() {
var markers = [
{
"title": "Chennai",
"lat": 12.897489183755905,
"lng": 80.2880859375,
"description": "Chennai"
},
{
"title": "Hyderabad",
"lat": 17.26672782352052,
"lng": 78.5302734375,
"description": "Hyderabad"
},
{
"title": "Bangalore",
"lat": 12.897489183755905,
"lng": 77.51953125,
"description": "Bangalore"
},
{
"title": "visakhapatnam",
"lat": 17.518344187852207,
"lng": 83.3203125,
"description": "visakhapatnam"
}];
var mapOptions = {
center: new google.maps.LatLng(11.44, 78.79),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>
|
If you observe above code in header section I mentioned multiple latitude and longitudes of different cities and by default I mentioned one city latitude and longitude by using that default details we can center the map to near place of other cities based on that other cities whatever we are going to mark are visible.
In remaining code markers are used to add marking in google map and infowindow is used to show info of all the cities based on the description whatever we mentioned in json string.
Demo
 |
No comments:
Post a Comment