Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Adding Multiple Markers to Google Maps V3 using JSON with JavaScript in Website

Jan 18, 2013
Introduction:

Here I will explain how to add multiple markers to Google maps API V3 using jQuery JSON in asp.net website 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.net and many articles relating to jQuery, JavaScript, asp.net. Now I will explain how to add multiple markers to Google 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

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

Adding Multiple Markers to Google Maps V3 using JSON with JavaScript in Website

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

10 comments :

Anonymous said...

Wonderful posts! Keep up the good work!!

Love & Regards,
Jack.

Anonymous said...

Hi Suresh i need only Chennai All areas in google map especially marked by Anna Nagar Place...

kazi said...
This comment has been removed by the author.
kazi said...

HI

I been using this code for one of my project and its been working great. But from few week i am getting an Javascript error on my webbrowser control called InvalidCharacterError. I have read on few blog that it because of IE and suggested to Hack Registry Key on each computer. But in my case there are more then 100 users use my solution so i cannot go and update each computer. Can you help please?

Anonymous said...

Great Work :)

Anonymous said...

Thank U very much.
U are doing a nice job.
God bless U !!

Unknown said...

can it show user current position on above code?, please show me

Anonymous said...

So... where is the json ???

Unknown said...

Hello,
Can you show sample to add places on map dynamically from the code.

Anonymous said...

nice

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.