Llamar Google Maps API desde ASP.NET AJAX (JavaScript)

En el post anterior creamos una pagina capaz de llamar un servicio web desde ASP.NET AJAX. En ese ejemplo mostramos una lista de locaciones cerca de un código postal.

Seria muy útil que también mostráramos un mapa al usuario con las locaciones encontradas, y gracias a Google Maps JavaScript API V3, es muy fácil hacerlo.

Google Maps JavaScript API nos permite integrar Google Maps en nuestras paginas web utilizando solo JavaScript.

Vamos a tomar el código del post anterior y agregar un poco mas de código JavaScript.

<%@ 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();

                // agregar direcciones al mapa en orden inverso
                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); //area de Los Angeles
            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 {
                    // direccion no encontrada
                }
            });

        }
    </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>

Como recordaras del post anterior, después de llamar el servicio web desde ASP.NET AJAX, la función onSuccess es invocada.

Después de crear la tabla dinámicamente, vamos a llamar una nueva función llamada createMap.

Dentro de esta función, primero creamos un objeto LatLng que representa un punto en coordenadas geográficas (latitud y longitud). En este caso, utilizo las coordenadas de Los Angeles.

Después creamos otro objeto para representar las opciones para un nuevo mapa. Definimos el zoom, el punto central que creamos, y el tipo de mapa.

Finalmente creamos el objeto Map. Además de pasar las opciones del nuevo mapa al constructor, pasamos un div donde el mapa será dibujado.

Con esto, el mapa ya esta creado. Antes de terminar la función createMap, también creamos un objeto Geocoder que nos permitirá agregar marcadores al mapa después.

De regreso en la función onSuccess, llamamos a la función showAddress por cada dirección que el servicio web retorno. Comenzamos con la ultima dirección (las mas retirada) y terminamos con la primer dirección (la mas cerca), ya que re-centramos el mapa cada vez que agregamos un marcador.

La función showAddress utiliza el método geocode del objeto Geocoder que creamos anteriormente para centrar el mapa en la dirección pasada a la función. Una vez centrado el mapa, creamos un nuevo objeto Marker que representa un nuevo marcador en el mapa.

Este es todo el código JavaScript que necesitamos. Solo nos queda agregar un nuevo div llamado map_canvas a la pagina donde queremos que el mapa aparezca.

Ahora ejecuta la aplicación. Escribe el código posta 92805 y has clic en Find.

Veras la tabla que creamos antes en el lado izquierdo y un mapa con las distintas direcciones en el lado derecho.

Por favor deja un comentario si tienes alguna pregunta o sugerencia.