Click here to Skip to main content
15,867,985 members
Articles / Web Development / ASP.NET

Google Maps API V3 for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.82/5 (108 votes)
30 Dec 2011CPOL4 min read 613.1K   45.7K   267   65
The most frequently used tasks in Google Maps. The article includes an explanation of geocoding and reverse geocoding both in JavaScript and C#.

Introduction

Google Maps provides a flexible way to integrate maps to provide directions, location information, and any other kind of stuff provided by the Google Maps API in your web application. Although there are some articles in CP explaining about maps, in my article I am going to provide information about the latest Google Maps API V3 version. In this article, we will see some of the common techniques that are used with Google Maps. In order to work with the code sample explained below, you need to have some basic knowledge about JavaScript and C#.

Your First Google Maps Map

In the earlier versions of the Google Maps API, as a developer we need to register the web application with Google and we were supposed to get an API key. However with the release of the new version, key registration has been eliminated for a few days for now, but recently, Google has come up with some kind of traffic limitations and we are supposed to register the application with an API Key. You can get more information about the usage of the API and the terms at this link: http://code.google.com/apis/maps/documentation/javascript/usage.html#usage_limits. Now we will start our work and create a simple Google Maps map that can be integrated into our site. The following script is used to connect to the Google Maps API:

HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

In order to create a simple Google Map map, you can use the following JavaScript code:

JavaScript
function InitializeMap() 
{
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;

FirstGoogleMap

Google Maps Options

In the above example, we used the Map class which takes options and an HTML ID as parameters. Now moving further, we will look at the map options:

JavaScript
function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var options =
    {
        zoom: 3,
        center: new google.maps.LatLng(37.09, -95.71),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions:
        {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            poistion: google.maps.ControlPosition.TOP_RIGHT,
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 
              google.maps.MapTypeId.TERRAIN, 
              google.maps.MapTypeId.HYBRID, 
              google.maps.MapTypeId.SATELLITE]
        },
        navigationControl: true,
        navigationControlOptions:
        {
            style: google.maps.NavigationControlStyle.ZOOM_PAN
        },
        scaleControl: true,
        disableDoubleClickZoom: true,
        draggable: false,
        streetViewControl: true,
        draggableCursor: 'move'
    };
    var map = new google.maps.Map(document.getElementById("map"), options);
}
window.onload = initialize;

In the above example, all the properties of Map have been used. You can set the map options depending on your requirements.

MapOptions

The properties of the Map class are summarized in the following table:

PropertyClass
MapTypeControl:true/falsemapTypeControlOptions
PropertyConstants/Values
style
DEFAULT<br />
HORIZONTAL_BAR<br />
DROPDOWN_MENU
position
BOTTOM<br />
BOTTOM_LEFT<br />
BOTTOM_RIGHT <br />
LEFT<br />
RIGHT<br />
TOP<br />
TOP_LEFT<br />
TOP_RIGHT
mapTypeIds
ROADMAP<br />
SATELLITE<br />
Hybrid<br />
Terrain
navigationControl:true/falsenavigationControlOptions
PropertyConstants/Values
Position
BOTTOM<br />
BOTTOM_LEFT<br />
BOTTOM_RIGHT<br />
LEFT<br />
RIGHT<br />
TOP<br />
TOP_LEFT<br />
TOP_RIGHT T
style
DEFAULT<br />
SMALL<br />
ANDROID
scaleControl:true/falsescaleControlOptions: scalecontroloptions has the same properties as navigation control options (position, style) and behavior is also the same.
disableDoubleClickZoom: true/false
scrollwheel: true/false
draggable: true/false
streetViewControl: true/false

Map Marker

The Marker class provides you with an option to display a marker to the user for a given location. Use of the marker is a very general task that we will use often in our application. The following example shows you how to create a simple marker.

JavaScript
var marker = new google.maps.Marker
(
    {
        position: new google.maps.LatLng(-34.397, 150.644),
        map: map,
        title: 'Click me'
    }
);

Marker

Info Window

With the marker displayed on the map, you create an onclick event which provides the user with a popup window showing the information about the place. You can create an info window as shown below:

JavaScript
var infowindow = new google.maps.InfoWindow({
    content: 'Location info:
    Country Name:
    LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
    // Calling the open method of the infoWindow 
    infowindow.open(map, marker);
});

Combining them:

JavaScript
var map;
function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var marker = new google.maps.Marker
    (
        {
            position: new google.maps.LatLng(-34.397, 150.644),
            map: map,
            title: 'Click me'
        }
    );
    var infowindow = new google.maps.InfoWindow({
        content: 'Location info:<br/>Country Name:<br/>LatLng:'
    });
    google.maps.event.addListener(marker, 'click', function () {
        // Calling the open method of the infoWindow 
        infowindow.open(map, marker);
    });
}
window.onload = initialize;

With this complete, you are going to create a map and then locate the region of the user, load the map with a marker and the info window.

InfoWindow

Multiple Markers

In some cases, if you want to handle multiple markers, you achieve this like the following:

JavaScript
function markicons() {
   InitializeMap();

        var ltlng = [];

        ltlng.push(new google.maps.LatLng(17.22, 78.28));
        ltlng.push(new google.maps.LatLng(13.5, 79.2));
        ltlng.push(new google.maps.LatLng(15.24, 77.16));

        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: ltlng[i]
            });

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);

        }
}

mulitplemarkers

Directions

One of the most useful features of the Google Maps API is it can be used to provide directions for any given location(s). The following code is used to accomplish this task:

C#
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function InitializeMap() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions =
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directionpanel'));

    var control = document.getElementById('control');
    control.style.display = 'block';


}
    function calcRoute() {

    var start = document.getElementById('startvalue').value;
    var end = document.getElementById('endvalue').value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

}

function Button1_onclick() {
    calcRoute();
}

window.onload = InitializeMap;

Directions

Layers

The Google Maps API provides you with multiple layer options of which one is bicycle. By using the bicycle layer, you can show bicycle paths for a particular location on the map to users. The following code snippet allows you to add a bicycle layer to a map.

C#
var map 
function InitializeMap() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
   map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);

Gecoding

So far we have learned the basic concepts of creating Google maps and displaying information about a location to the user. Now we will see how we can calculate/find a location specified by the user. Geocoding is nothing but the process of finding out the latitude and longitude for a given region. The following API code shows you how to find the latitude and longitude for a location.

JavaScript
geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });

    }
    else {
        alert("Geocode was not successful for the following reason: " + status);
    }
});

Geocoding C#

The same calculation can also be performed by using C#:

C#
public static Coordinate GetCoordinates(string region)
{
    using (var client = new WebClient())
    {

        string uri = "http://maps.google.com/maps/geo?q='" + region + 
          "'&output=csv&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1" + 
          "-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA";

        string[] geocodeInfo = client.DownloadString(uri).Split(',');

        return new Coordinate(Convert.ToDouble(geocodeInfo[2]), 
                   Convert.ToDouble(geocodeInfo[3]));
    }
}

public struct Coordinate
{
    private double lat;
    private double lng;

    public Coordinate(double latitude, double longitude)
    {
        lat = latitude;
        lng = longitude;

    }

    public double Latitude { get { return lat; } set { lat = value; } }
    public double Longitude { get { return lng; } set { lng = value; } }

}

Reverse Geocoding

As the name indicates, it is the reverse process of geocoding; that is depending on the latitude and longitude, we can find the location name. This can be achieved using the following code:

JavaScript
var map;
var geocoder;
function InitializeMap() {

    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions =
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}

function FindLocaiton() {
    geocoder = new google.maps.Geocoder();
    InitializeMap();

    var address = document.getElementById("addressinput").value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            if (results[0].formatted_address) {
                region = results[0].formatted_address + '<br/>';
            }
            var infowindow = new google.maps.InfoWindow({
                content: 'Location info:<br/>Country Name:' + region + 
                '<br/>LatLng:' + results[0].geometry.location + ''
            });
            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow 
                infowindow.open(map, marker);
            });

        }
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

Reverse Geocoding in C#

The following C# code shows you the reverse geocoding technique:

C#
static string baseUri = 
  "http://maps.googleapis.com/maps/api/geocode/xml?latlng={0},{1}&sensor=false";
string location = string.Empty;

public static void RetrieveFormatedAddress(string lat, string lng)
{
    string requestUri = string.Format(baseUri, lat, lng);

    using (WebClient wc = new WebClient())
    {
        string result = wc.DownloadString(requestUri);
        var xmlElm = XElement.Parse(result);
        var status = (from elm in xmlElm.Descendants() where 
            elm.Name == "status" select elm).FirstOrDefault();
        if (status.Value.ToLower() == "ok")
        {
            var res = (from elm in xmlElm.Descendants() where 
                elm.Name == "formatted_address" select elm).FirstOrDefault();
            requestUri = res.Value;
        }
    }
}

Conclusion

In this article, I have tried to explain some of the basic and most frequently used tasks of the Google Maps API V3. Hope this article will help you in completing your tasks. Further, there are lot more things in the API which I have not discussed and I would try to include them in my future updates of this article. Any comments and feedback are always welcome.

External Resources

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Collabera
Singapore Singapore
S V Sai Chandra is a Software Engineer from Hyderabad Deccan. He started Embedded Programing in his college days and now he is a Web Developer by Profession. He Loves coding and his passion has always been towards Microsoft Technologies. Apart from coding his other hobbies include reading books, painting and hang out with friends is his most favorite past time hobby.
He blogs at
http://technowallet.blogspot.com
Technical Skills:
C#,Ado.Net,Asp.Net,Sql Server,JavaScript,XML,Web services.

Comments and Discussions

 
QuestionGeocoding in c# Pin
Member 94774772-Oct-12 4:31
Member 94774772-Oct-12 4:31 
GeneralMy vote of 5 Pin
Dinesh Ambaliya2-Oct-12 0:37
Dinesh Ambaliya2-Oct-12 0:37 
GeneralMy vote of 5 Pin
Abinash Bishoyi20-Aug-12 13:50
Abinash Bishoyi20-Aug-12 13:50 
QuestionHow to add image to marker Pin
footballpardeep10-Aug-12 10:37
footballpardeep10-Aug-12 10:37 
QuestionUsing Json google reverse geocoder Pin
donpp4611-Jul-12 23:55
donpp4611-Jul-12 23:55 
QuestionGpoogle map registration Pin
waldhin7-Jul-12 11:16
waldhin7-Jul-12 11:16 
AnswerRe: Gpoogle map registration Pin
S V Saichandra8-Jul-12 21:43
professionalS V Saichandra8-Jul-12 21:43 
GeneralMy vote of 5 Pin
André Coimbra-Villela30-May-12 4:44
André Coimbra-Villela30-May-12 4:44 
Great work! Makes it look like so easy!!
thank`s a lot
QuestionMultiple Place directions Pin
nipeshshah15-May-12 1:38
nipeshshah15-May-12 1:38 
QuestionWhen I use this code in my aspx page it throw javascript error Pin
allankianand19-Apr-12 0:41
allankianand19-Apr-12 0:41 
GeneralMy vote of 5 Pin
TinTinTiTin12-Jan-12 23:22
TinTinTiTin12-Jan-12 23:22 
GeneralMy vote of 5 Pin
TG_Cid3-Jan-12 4:19
TG_Cid3-Jan-12 4:19 
GeneralMy Vote of 5 Pin
Jim Garrison31-Dec-11 4:22
Jim Garrison31-Dec-11 4:22 
Questionlooks like great minds think alike Pin
jimibt20-Dec-11 0:21
jimibt20-Dec-11 0:21 
Questionusing the Google APIs in a native (non web based) App. Pin
Akhilesh K Gupta15-Dec-11 19:27
Akhilesh K Gupta15-Dec-11 19:27 
AnswerRe: using the Google APIs in a native (non web based) App. Pin
S V Saichandra15-Dec-11 21:45
professionalS V Saichandra15-Dec-11 21:45 
GeneralMy vote of 5 Pin
raju melveetilpurayil11-Dec-11 13:51
professionalraju melveetilpurayil11-Dec-11 13:51 
QuestionButton and text box inside infowindow Pin
tp20068-Dec-11 11:43
tp20068-Dec-11 11:43 
Questionhow to use with asp.net master page Pin
Member 20681696-Dec-11 2:12
Member 20681696-Dec-11 2:12 
AnswerRe: how to use with asp.net master page Pin
S V Saichandra6-Dec-11 2:39
professionalS V Saichandra6-Dec-11 2:39 
GeneralMy vote of 5 Pin
itaitai5-Dec-11 21:16
professionalitaitai5-Dec-11 21:16 
GeneralMy vote of 5 Pin
omymma@hotmail.com5-Dec-11 20:02
omymma@hotmail.com5-Dec-11 20:02 
QuestionInfoWindow with scroll bars Pin
Coding 1015-Dec-11 10:19
Coding 1015-Dec-11 10:19 
AnswerRe: InfoWindow with scroll bars Pin
S V Saichandra5-Dec-11 23:51
professionalS V Saichandra5-Dec-11 23:51 
GeneralThanks All .......! Pin
S V Saichandra30-Nov-11 7:23
professionalS V Saichandra30-Nov-11 7:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.