Using Google Maps API In ASP.NET

I want to build a simple page in ASP.NET, where I allow user to select a company and get the location of the company using Google Maps.

Accessing Google Maps API is more of JavaScript then any server-side scripting. So, I can do the same with any of the server-side scripting options like Java EE, PHP etc.

There is only one prerequisite to access Google Maps API - registration with Google Maps API. To register go to Sign Up page and enter your website address and click on Generate API Key button at the bottom. It will display the key in the same page. Do store the key somewhere as you have to use it while using Maps API.

Create the following Asp.Net page which allows user to select company name and then displays the location of the company using Google Maps.


<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="http://maps.google.com/maps?file=api&v=2&key=<key here>&sensor=false"  type="text/javascript"></script> <!-- replace key here with your key --> 
    <script type="text/javascript">
    var map;
    var geocoder;
    function initialize() {
        if (GBrowserIsCompatible()) {  // does browser support Google Maps API ??
            // create map in  DIV element called map. It works like container 
            map = new GMap2(document.getElementById("map"));  
            // start with Visakhapatnam with its Latitude and Longitude and zoom 5
            map.setCenter(new GLatLng(17, 83), 5);  
            map.setUIToDefault();
        }
    }

    function showAddress(addresess)
        geocoder = new GClientGeocoder();
        // get GLatLng point for the given address 
        geocoder.getLatLng( 
                address,   // address to look for 
                function (point) {  // call back function to process the result 
                    if (!point) {  // if address not found
                        alert("Sorry the given address ["  +   address +  "] was not found!");
                    }
                    else {
                        //  point contains the required Latitude and Longitude
                        map.setCenter(point, 15);  // point map to the given 
                        var marker = new GMarker(point);  
                        map.addOverlay(marker);   // display a marker at the point in the map
                        marker.openInfoWindow(address);  // show address in a window
                    }
                }
            );
     }
                
     function findAddress() {
                var ddl = document.getElementById("ddlCompanies");  
                var address = ddl.options[ddl.selectedIndex].value;  // get selected address from dropdownlist
                showAddress(address); 
                return false;   // avoid postback
     }
    </script>
</head>
<body  onload="initialize()" onunload="GUnload()">
    <form id="form1" runat="server">
    Select Person : 
    <asp:DropDownList ID="ddlCompanies" runat="server">
        <asp:ListItem Value="Microsoft Corporation, One Microsoft Way, Redmond, WA 98052-7329,USA">Microsoft Corporation</asp:ListItem> 
        <asp:ListItem Value="1600 Amphitheatre Parkway, Mountain View, CA 94043">Google Inc.</asp:ListItem> 
        <asp:ListItem Value="500 Oracle Parkway,Redwood Shores, CA 94065">Oracle Corporation</asp:ListItem> 
        <asp:ListItem Value="One Dell Way,Round Rock, Texas 78682,United States">Dell Inc.</asp:ListItem> 
    </asp:DropDownList>
    <asp:Button ID="btnGetAddress" runat="server" Text="Get Address"  OnClientClick="return findAddress()"/>
    <p />
    <div id="map"  style="width:800px;height:600px">
    </div>
    </form>
</body>body>
</html>

I have used only a subset of Google Maps API. Click here to get more details about Google Maps API.

I have used Version 2 (V2) of Google Maps API. Though it works for now, it is better to use V3, which was recently released.

You can get more details about Version 3(V3) of Google Maps API here.

Run the page and select a company from dropdown and click on Get Address button. You can see the page snapshot below.