Calling Google Maps API from ASP.NET AJAX (JavaScript)

In the previous post, we created a page that’s able to call a web service from ASP.NET AJAX. In that sample we displayed a list of locations close to a zip code.

It would be very useful to also show a map to the user with the found locations, and thanks to Google Maps JavaScript API V3, it’s very easy to do.

Google Maps JavaScript API allows us to embed Google Maps in our web pages using only JavaScript.

Let’s take the code from the previous post and add some more JavaScript code.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="LocationsSample._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/LocationService.asmx" />
        </Services>
        <Scripts>
            <asp:ScriptReference Path="http://maps.google.com/maps/api/js?sensor=false" />
        </Scripts>
    </asp:ScriptManager>

    <script type="text/javascript">
        function Find() {
            var zip = $get("<%= txtZipCode.ClientID %>").value;
            LocationsSample.LocationService.FindLocations(zip, onSuccess, onFailed);
        }

        function onSuccess(results) {
            if (results.length > 0) {
                var table = "<table border=\"1\" cellspacing=\"0\" cellpadding=\"10\">";
                for (var i in results) {
                    table += "<tr>";
                    table += "<td>";
                    table += "<b>" + results[i].Name + "</b><br/>";
                    table += results[i].StreetAddress + "<br/>";
                    table += results[i].City + ", " + results[i].State + " " + results[i].Zip + "<br/>";
                    table += results[i].Phone;
                    table += "</td>";
                    table += "<td>" + results[i].Distance + "</td>";
                    table += "</tr>";
                }

                table += "</table>";
                $get("locationList").innerHTML = table;

                // show map
                createMap();

                // add addresses to map in reverse order
                for (var i = results.length - 1; i >= 0; i--) {
                    showAddress(results[i].StreetAddress + ", " + results[i].City + ", " + results[i].State + " " + results[i].Zip);
                }
            }
            else {
                $get("locationList").innerHTML = "<b>No locations found.</b>";
                $get("map_canvas").innerHTML = "";
            }
        }

        function onFailed(error) {
            $get("locationList").innerHTML = "<b>There was a problem communicating with the server.</b>";
            $get("map_canvas").innerHTML = "";
        }

        var geocoder;
        var map;

        function createMap() {
            var latlng = new google.maps.LatLng(34.03, -118.14); //default view to Los Angeles area
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            geocoder = new google.maps.Geocoder();
        }

        function showAddress(address) {
            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 {
                    // address not found
                }
            });

        }
    </script>

    <h2>
        Welcome to Oscar's Restaurants Family
    </h2>
    <p>
        Find a location near you.
    </p>
    <div>
        <span>Enter Zip Code: </span>
        <asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Find" OnClientClick="Find(); return false;" />
    </div>

    <div id="locationList" style="margin-top: 10px; float: left;"></div>
    <div id="map_canvas" style="margin: 10px; width:500px; height:400px; float: left;"></div> 
</asp:Content>

As you’ll remember from the previous post, after calling the web service from ASP.NET AJAX, the onSuccess function is invoked.

After creating the table dynamically, we’ll call a new function named createMap.

Inside this function, we first create an LatLng object that represents a point in geographical coordinates (latitude and longitude). In this case, I use the coordinates for Los Angeles.

Later we create another object to represent the options for a new map. We define the zoom, the center point we created, and the map type.

Finally, we create the Map object. Besides passing the options of the new map to the constructor, we pass a div where the map will be drawn.

With this, the map is already created. Before ending the createMap function, we also create a Geocoder object that will allow us to add markers to the map later.

Back in the onSuccess function, we call the showAddress function for each address that the web serviced returned. We start with the last address (the furthest one), and we end with the first address (the closest one) since we re-center the map every time we add a marker.

The showAddress function uses the geocode method of the Geocoder object we created earlier to center the map on the address passed into the function. Once the map has been centered, we create a new Marker object that represents a new marker in the map.

That’s all the JavaScript code we need. All it’s left is to add a new div named map_canvas to the page where we want the map to appear.

Go ahead and run the application. Enter zip code 92805 and press Find.

You’ll see the table we created before on the left and a map with the different addresses on the right.

Please leave a comment if you have any question or suggestion.