MAPS

Search/Locate directions/place using Bing maps

INTRODUCTION
You must be familiar with the Google maps. In this article, I will introduced to the Bing maps and provide search functionality on Bing maps.

EXAMPLE
You must have integrated Google maps in your web application and provide search functionality on it. In this article, I will show you to integrate Bing maps in your web application and provide search functionality to search location or directions.

Let us start with the basic example.
To start with, the example you need to call JavaScript api in your html page in the head section  as shown below.

<script type=”text/javascript” src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&#8243;></script>

First, we will start with designing a HTML page. The HTML page will look as shown below.

In the above HTML we have call the Bing map api script in the head section in HTML as shown above.
We will be creating one more script file, which will contain the script for creating Bing maps nad search functionality.
In above HTML we are calling LoadBingMap(); JavaScript method on the body onload for loading maps on as when the page loads.

The below is the method which is used to load Bing maps on page load.

var map = null;
//Load Normal Map.
function LoadBingMap()
{
try
{
map = new VEMap(‘myMap’);
map.LoadMap(new VELatLong(22.55, 72.54), 5, ‘r’, false);
}
catch (e)
{
}
}

map = new VEMap(‘myMap’);
In the above code, the variable map stores the id of the div tag where the map will be loaded.

map.LoadMap(new VELatLong(22.55, 72.54), 5, ‘r’, false);
In the above code, LoadMap() function is used to load a basic Bing map. It will take parameter such as latitude and longitude, type of map to load and so on.

//For Finding Information.
function FindLoc()
{
var txtsearch = document.getElementById(“txtsearch”);
try
{
map.Find(null, txtsearch.value);
}
catch (e)
{
alert(e.message);
}
}

The above code is to find location using maps.

map.Find(null, txtsearch.value);
The above code is to find location on Bing maps.

For more information on visit http://msdn.microsoft.com/en-us/library/bb429645.aspx

That is it. Run the HTML in your browser and see the result. You will get the following result as shown below.

To view my sample application on Bing maps click here:
http://pranavmapia.co.nr/

For more articles on maps visit http://davepranav.co.nr

You can download the source code here.

Advertisements

Introduction to Bing Maps

INTRODUCTION
Here I will introduce you to the Bing maps. This article shows how to integrate Bing maps in your web application.

EXAMPLE
You must have integrated Google maps in your web application, but in this article, I will show you to integrate Bing maps in your web application.
Let us start with the basic example.
To start with, the example you need to call JavaScript api in your html page as shown below.

<script type=”text/javascriptsrc=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2“></script>

First, we will start with designing a HTML page. The HTML page will look as shown below.

In the above HTML we have call the Bing map api script in the head section in HTML as shown above.
We will be creating one more script file, which will contain the script for creating Bing maps.
In above HTML we are calling LoadBingMap(); JavaScript method on the body onload for loading maps on as when the page loads.
The below is the method which is used to load Bing maps on page load.

var map = null;
//Load Normal Map.
function LoadBingMap()
{
try
{
map = new VEMap(‘myMap’);
map.LoadMap(new VELatLong(22.55, 72.54), 5, ‘r’, false);
}
catch (e)
{
}
}

map = new VEMap(‘myMap’);
In the above code, the variable map stores the id of the div tag where the map will be loaded.

map.LoadMap(new VELatLong(22.55, 72.54), 5, ‘r’, false);
In the above code, LoadMap is used to load a basic Bing map. It will take parameter such as latitude and longitude, type of map to load and so on.

That is it. Run the HTML in your browser and see the result. You will get the following result as shown below.

I have created a small application representing Bing maps. To view my sample application click here.

You can download the source code here.

Mark area in google maps using polygon.

INTRODUCTION
Many times you must have seen that people are marking geographical areas in Gmap. In this article I will show you to mark area in Google map using polygon.

EXAMPLE
Our example will look something like this as shown below.

The below is the HTML code for the same.


The below is the JavaScript code for loading simple google map.

var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(‘map’));
var plt = new GLatLng(19.0170, 72.8576);
map.setCenter(plt, 12);
geocoder = new GClientGeocoder();
map.addControl(new GLargeMapControl3D());
map.setMapType(G_HYBRID_MAP);
}
}

The below JavaScript code is used to mark area on google map.

function drawcircle(address) {
if (geocoder) {
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + ” not found”);
}
else {
load();
var d2r = Math.PI / 180;//degrees to radians
var r2d = 180 / Math.PI;//radians to degrees
var earthsradius = 3963;//3963 is the radius of the earth in miles
var points = 32;
var radius = 1;//radius in miles
map.setCenter(point, 12);
//for getting latitude and longituted
var center = map.getCenter();
var lat = center.lat();
var lon = center.lng();
map.addControl(new
GLargeMapControl3D());
map.setMapType(G_HYBRID_MAP);
//find the raidus in lat/lon
var rlat = (radius / earthsradius) *r2d;
var rlng = rlat / Math.cos(lat * d2r);
var extp = new Array();
for (var i = 0; i < points + 1; i++) // one extra here makes sure we connect the
{
var theta = Math.PI * (i / (points / 2));
ex = lon + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ey = lat + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new GPoint(ex, ey));
}
map.addOverlay(new GPolygon(extp, “#000000”, 2));
}
}
);
}
}

Call the below function on the click event of GO button.

function showAddress() {
var addr = document.getElementById(‘addr’);
drawcircle(addr.value);
}

you can download the source code from the following link.

Google Maps with Street View

INTRODUCTION
In this article I will show you to implement google street view in your google application.

EXAMPLE
I will show you the google street view example taking into consideration that user has basic knowledge of implementing google maps. To get the basic knowledge of implementing google maps refer to my article “Locate directions using Gmaps”. You can access the article from the following link.

To start we will first implement basic google map in our application. It will look something as below.

streetview

Step1:-
The following is the HTML code for implementing google maps.

html

Step2:-
The following is the JavaScript code for implementing google maps and street view in google maps.

var map = null;
var geocoder = null;
function load()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById(“map”));
var plt = new GLatLng(19.0170, 72.8576);
map.setCenter(plt, 12);
map.addControl(new GLargeMapControl3D());
map.setMapType(G_HYBRID_MAP);
}
}

The above code implements the basic google map in our application.

function GetstreetView(add) {
var geoc = new GClientGeocoder();
geoc.getLatLng(add,
function(point) {
if (!point) {
alert(add + ” not found”);
} else {
var Gsview = new GStreetviewClient();
Gsview.getNearestPanorama(point,
function(panodata) {
if (panodata.code != 200) {
alert(“Street View is not available for this location”);
return;
}
var latlng = { latlng: point };
var pno = new GStreetviewPanorama(document.getElementById(“map”), latlng);
});
}
});
}

function showstreetview() {
var addr = document.getElementById(‘addr’);
GetstreetView(addr.value);
}

function handleNoFlash(errorCode) {
if (errorCode == 600) {
alert(“Street View is not available for this location”);
return;
}
if (errorCode == 603) {
alert(“Flash support is required.”);
return;
}
}

The above code is used to implement street view in our application. The function showstreetview() is called on the click event of button which will render the google street view as shown below.

protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add(“onclick”, “javascript:showstreetview();”);
}

The  google street view will look something like this.

streetview1

You can download the demo project from the following link.

Locate Direction using Gmap (Google Map)

INTRODUCTION
In this article I will show you to find location using Gmaps.

EXAMPLE
In this example I will show you to find location using Gmaps. It is a very simple example demonstrating gmaps.
Our example will look something like this:-

map

To start with you will have to obtain the Google API key which you will have to include in your html page.
You can obtain the Google API key from the following link:-
http://code.google.com/apis/maps/signup.html
After obtaining Google API key add it to your HTML page as shown below.

html

Design your HTML page as above.
The above Gmap is displayed through Gmaps API. Here I will make use of JavaScript to display map on html page.
Add the following JavaScript code in your JavaScript file.

var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(“map”));
var plt = new GLatLng(19.0170, 72.8576);
map.setCenter(plt, 12);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_HYBRID_MAP);
geocoder = new GClientGeocoder();
}
}

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + ” not found”);
}
else {
map.setCenter(point, 12);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}

function searchadd() {
var addr = document.getElementById(‘addr’);
showAddress(addr.value);
return false;
}

Then call the javascript file in your HTML page as show in the above HTML code.

map = new GMap2(document.getElementById(“map”));
In the above javascript code a new instance of Gmap is created and div tag(“map”) is added to it where the map will be displayed.
var plt = new GLatLng(19.0170, 72.8576);
The above code will latitude and longitude to a default location to display when the map loads.
map.setCenter(plt, 12);
The above code is used to set the center position of the default location.
map.addControl(new GLargeMapControl());
GLargeMapControl adds a map zoom control that allows the user to change the zoom level of the map. This control is always located on the left hand side of the map.
map.addControl(new GMapTypeControl());
GMapTypeControl adds a control to the top right hand corner of the map that allows the user to flip between the Map, Satellite, and Hybrid views.
map.setMapType(G_HYBRID_MAP);
The map.setMapType(map_type) method is used to specify the currently visible map type. For instance, the following code example would set the current map type to Hybrid.
geocoder = new GClientGeocoder();
This class is used to communicate directly with Google servers to obtain geocodes for user specified addresses.
geocoder.getLatLng
Geocoder returns a nicely formatted version of the address you sent. Geocoder returns the address broken up into components like street, country, province, prefecture, postal code, etc. Simpler version returns a GLatLng.
var marker = new GMarker(point);
It return the marker associated with the ith geocode. This method will return a non-null value only after the directions results have been loaded.
map.addOverlay(marker);
We add the new marker to our map with map.addOverlay(marker).
marker.openInfoWindowHtml(address);
It opens a simple info window at the given point. It pans the map such that the opened info window is fully visible. The content of the info window is given as HTML text.
Now open the html page in internet exploere or firefox to view the Gmap.
You can download the source code from the following link.