Marker Clustering in Google Map (Too many location)

If you have to create a map with too many location then use marker clustering in that.

Capture

 

To implement this:

<script src=”http://maps.googleapis.com/maps/api/js?key=####&sensor=false&#8221; type=”text/javascript”></script>
<script type=”text/javascript” src=”Scripts/markerclusterer.js”></script>
<script type=”text/javascript” src=”Scripts/mootools.js”></script>
<script type=”text/javascript”>

var markerClusterer = null;
var map = null;
var imageUrl = ‘http://chart.apis.google.com/chart?cht=mm&chs=24×32&&#8217; +
‘chco=FFFFFF,008CFF,000000&ext=.png’;
var myCenter = new google.maps.LatLng(52.44752859573569, -1.8621826171875);
function initialize() {
var marker, i;
var markers = [];
var infowindow = null;
var mapProp = {
center: new google.maps.LatLng(51.60221, -2.93139),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map”)
, mapProp);
}

function showAddress() {
var marker, i;
var markers = [];
var infowindow = null;

var loca = document.getElementById(“<%=txtAddress.ClientID %>”).value.split(‘~’);
var sPost = document.getElementById(“<%=txtpostcode.ClientID %>”).value;
if (loca != ”) {

if (sPost != ‘Enter Postcode’) {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 9,
center: new google.maps.LatLng(loca[0].split(‘|’)[2], loca[0].split(‘|’)[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
else {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 5,
center: new google.maps.LatLng(51.60221, -2.93139),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}

var infowindow = new google.maps.InfoWindow();

var marker, i;
for (i = 0; i < loca.length; i++) {

marker = new google.maps.Marker({
position: new google.maps.LatLng(loca[i].split(‘|’)[2], loca[i].split(‘|’)[1]),
map: map
});

google.maps.event.addListener(marker, ‘mouseover’, (function (marker, i) {
return function () {
infowindow.setContent(loca[i].split(‘|’)[0]);
infowindow.open(map, marker);
}
})(marker, i));

markers.push(marker);
}

var markerCluster = new MarkerClusterer(map, markers);
}
}

window.onload = function () {
// initialize();
showAddress();
};
</script>

Just Paste the above code to your page head section.

sAddress ={Address|Longitude|Latitude~Address|Longitude|Latitude~Address|Longitude|Latitude}

How to get Latitude or Longitude from Address using Google Map API in C#

Once I was assigned a task to create a map for the stockist list in a trade site.

The basic aim behind creation of this project is to have a location for all stockist for the particular brand, and provide end user with integrative google map services so that they visualize real-time.

Image

If we are supposed to insert a simple google map, then we just have to insert a piece javascript code, and boom you are done.

But in my project, I have requirement where different restaurant/hotel owner register and give us their details and addresses.

So, What is Google Map API?

The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

All map related functionalities can be achieved as seen onhttp://maps.google.com/

Then what was hurdle for me in using Map API?

These are the pure JavaScript code..!! You can develop whatever rich Map application you wanted to develop by writing piece of JavaScript codes.

Actually to host a map on your page, you need to have two parameters, Latitude & Longitude. But how do I get lat. and long. from server side scripting?

But I had no idea how to call Google Map API from C#/VB.NET.

So for my project, as usual, I start googling to find out my piece of sweet.

After searching for couple of hours, I come across this good article.

http://jatinkacha.wordpress.com/2010/10/02/call-google-map-webservice-api-from-cand-vb-net-call-geocoding-map-api-webservice-from-c-and-vb-net/

Here the author explained the how to obtain the latitude and longitude co-ordinates for an address using the Google Maps API.

But again here, it is pure JavaScript that utilize Google Map API to get lat & long of any address. But my problem is still there?

Hurrray….. I found the solution

Then accidently I come to across Google Maps API Web Services.

It is basically Maps API Web Services, a collection of HTTP interfaces to Google services providing geographic data for your maps applications.

In the documentation (http://code.google.com/apis/maps/documentation/webservices/),

I see that you can utilize Google Map API web service by making HTTP request to a specific URL, providing necessary parameters with URL. Which in return, gives a response in desired format.

You can get response inform of JSON or XML.

Say for e.g. it can be called like this URL

http://maps.google.com/maps/geo?q=khandala, maharashtra&output=xml&key=xxxxxxxxxxxxxx

Paste it into your browser and you will receive a XML response.

I thought why not to develop a library that make a call to this URL and parse the returned output to get lat & long…!!?

So for that purpose I write this library.

Obviously, before doing all these, you will need to register with Google Map API and get a key so that you can utilize their API.

Sign up and get a Google Maps API Key.  You will need one for the domain name of where you will be hosting the map.  You can get your API Key from here (http://code.google.com/apis/maps/signup.html)

Following is the complete code that I used to call Google Map Geocoding API from Asp.net.

All you have to do Is to just create a class file and paste the following code. And you are ready to call Google Map Geocoding API.

How to call Geocoding API from Asp.net?

Step 1

/// Resolve addresses into latitude/longitude coordinates using Google MAP API webservices

public static class Geocoder{

private static string _GoogleMapsKey =Config.getAppSetting(“GoogleMapsKey”);

/// Google.com Geocoder

/// Url request to

/// http://maps.google.com/maps/geo?q=youraddress&output=xml&key=xxxxxxxxxxxxxx

public static Geolocation? ResolveAddress(string query)

{

if (string.IsNullOrEmpty(_GoogleMapsKey))

_GoogleMapsKey = ConfigurationManager.AppSettings[“GoogleMapsKey”];

string url = “http://maps.google.com/maps/geo?q={0}&output=xml&key=”+ _GoogleMapsKey; 

url = String.Format(url, query);

XmlNode coords = null;

try{

string xmlString = GetUrl(url);

XmlDocument xd = new XmlDocument();

xd.LoadXml(xmlString);

XmlNamespaceManager xnm = new XmlNamespaceManager(xd.NameTable);

coords = xd.GetElementsByTagName(“coordinates”)[0];

}

catch { }

Geolocation? gl = null;

if (coords != null){

string[] coordinateArray = coords.InnerText.Split(‘,’);

if (coordinateArray.Length >= 2)

{

gl = newGeolocation(Convert.ToDecimal(coordinateArray[1].ToString()),Convert.ToDecimal(coordinateArray[0].ToString()));

}

}

return gl;

}

public static Geolocation? ResolveAddress(string address, stringcity, string state, string postcode, string country)

{

return ResolveAddress(address + “,” + city + “,” + state + “,” + postcode + ” “ + country);

}

///
<summary>

/// Retrieve a Url via WebClient

private static string GetUrl(string url)

{

string result = string.Empty;

System.Net.WebClient Client = new WebClient();

using (Stream strm = Client.OpenRead(url))

{

StreamReader sr = new StreamReader(strm);

result = sr.ReadToEnd();

}

return result;

}

}

public struct Geolocation

{

public decimal Lat;

public decimal Lon;

public Geolocation(decimal lat, decimal lon)

{

Lat = lat;

Lon = lon;

}

public override string ToString()

{

return “Latitude: “ + Lat.ToString() + ” Longitude: “ + Lon.ToString();

}

public string ToQueryString()

{

return “+to:” + Lat + “%2B” + Lon;

}

}

Step 2

Now, you just need to put a key in AppSetting section that hold your Google Map API key.

Step 3

I have provided 2 overloaded methods to call Geocoding Map API Webservice, named ResolveAddress.

Say for e.g. you can call method like this.

Geocoder.ResolveAddress(“University road”,”rajkot”,”gujarat”,””,”India”)

I hope this will solve your purpose, those who wanted to develop Geocoding application, those who want to access Google Map Webservice API from c#/vb.net.

Happy programming…

Get Google Maps Api Key for Website

Introduction:

Here I will explain how to generate Google map api key for website or create Google maps api key for localhost website or get Google maps api key for website .

Description:

If we want to use Google maps in website first we need to get api key from Google for that you need to follow below steps

First open the APIs Console page at https://code.google.com/apis/console and log in with your Google Account. Whenever you open above url it will show like as shown below

Now click on Create project once login click on the Services link from the left-hand menu.

Once open Services tab check for Google Maps API v3 and click on “off” to activate that service in the next screen select conditions and click “Accept” button.

Now Click on API Access link from the left-hand menu. Once if it opens Your API key is available from the API Access page, in the Simple API Access section. In that Maps API applications click on Create new Browser key button >> in next window give url of your application and click Create

Once we got the key Simple API Access section will show data like as shown below

This way we can generate Google MAP API key to use this key to integrate in websites.

How to add google map to your website.

Marker

To add the Google map on your asp.net web page. Simply paste the code given below.

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyBVaXuUwG51lC0vu6q-E-PzaCGI_u6UX1A&sensor=false&#8221;
type=”text/javascript”></script>
<script type=”text/javascript”>

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(51.659369, -0.029843), 15);
map.setUIToDefault();
marker = new GMarker(new GLatLng(51.659369, -0.029843));
map.addOverlay(marker);
}

}

</script>

Insert a div named “map_canvas” where you want to put map on your page.

<div id=”map_canvas” style=”width: 300px; height: 350px”></div>

For showing any address just pass the longitude and latitude values for your address and replace:
map.setCenter(new GLatLng(51.659369, -0.029843), 15);

Get longitute and latitute from address for google map

Note: you also need to change the Key for your project. You can generate new key from: https://code.google.com/apis/console/

Get Google Map API Key for website