23 de octubre de 2009

Google Maps para ASP.NET

GoogleMaps

Google Map (GMaps) es un control de usuario ASP.NET para con escasas líneas poder agregar mapas de Google o Google Map a nuestras aplicaciones WEB.

Con este control podremos desarrollar aplicaciones WEB en ASP.NET con toda la potencia de la API oficial de GoogleMaps.

Ver demo.

Pero veamos un ejemplo paso a paso. Lo primero será descargarnos el fichero GMaps.dll desde el siguiente enlace.

Una vez descargado y copiado en la carpeta bin de nuestro proyecto, pasaremos a crear nuestra página web a la que le adicionaremos el mapa o Google Map. El código ASPX sería el siguiente:

Google Maps, ASP.NET ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMaps.aspx.cs" Inherits="GoogleMaps" %>
 
<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="cc" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:660px; height:560px;">
      <cc:GMap ID="GMap1" runat="server" />
    </div>
    </form>
</body>
</html>

Lo próximo que debemos hacer es conseguir una Key, pues lo exige Google para poder utilizar su API. La podemos conseguir desde aquí. Debemos tener en cuenta que esta clave depende del dominio donde vayamos a utilizarla, por lo que por cada Web donde utilicemos GoogleMaps.Subgurim.NET debemos obtener la Key apropiada.

Google Maps, ASP.NET web.config

El modo más sencillo donde ubicar la clave es en vuestro web.config:
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
    ...
    <appSettings>
        <add key="googlemaps.subgurim.net" value="tuClave_yourKey" />
    </appSettings>
     ...
</configuration>

De este modo, el control ya se encargará de hacer el resto.

Llegados a este punto ya tenemos un Mapa de Google en nuestra WEB ASP.NET, de echo, si ejecutamos el proyecto, veremos que ya contamos con un mapa en nuestras pagina ASP.NET. Pero para sacarle el verdadero partido a este mapa debemos configurar algunas cosillas mas, por ejemplo hagamos que se muestre una dirección especifica, por ejemplo la ubicación de nuestra empresa o vivienda y mostremos además un globo con información relacionada a ese punto. En la siguiente imagen se ve el resultado del Google Map que deseamos crear:

GoogleMaps esASP.NETEste control nos proporciona todo el poder de la API oficial de GoogleMaps sin necesidad de una sola línea de código javascript. Así que veamos como dotar a nuestro mapa de alguna de las características de la API desde codebihind, para ello usaremos C#.

Google Maps, ASP.NET C#

using System;
using System.Web.UI;
using Subgurim.Controles;
 
public partial class GoogleMaps : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            GLatLng ubicacion = new GLatLng(40.381090863719436, -3.6222052574157715);
            GMap1.setCenter(ubicacion, 15);
 
            //Establecemos alto y ancho en px
            GMap1.Height = 560;
            GMap1.Width = 660;
 
            //Adiciona el control de la parte izq superior (moverse, ampliar y reducir)
            GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));
 
            //GControl.preBuilt.MapTypeControl: permite elegir un tipo de mapa y otro.
            GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));
           
            //Con esto podemos definir el icono que se mostrara en la ubicacion
            //#region Crear Icono
            //GIcon iconPropio = new GIcon();
            //iconPropio.image = "../images/iconBuilding.png";
            //iconPropio.shadow = "../images/iconBuildingS.png";
            //iconPropio.iconSize = new GSize(32, 32);
            //iconPropio.shadowSize = new GSize(29, 16);
            //iconPropio.iconAnchor = new GPoint(10, 18);
            //iconPropio.infoWindowAnchor = new GPoint(10, 9);
            //#endregion
 
            //Pone la marca de gota de agua con el nombre de la ubicacion
            GMarker marker = new GMarker(ubicacion);
            string strMarker = "<div style='width: 250px; height: 185px'><b>" +
                "<span style='color:#ff7e00'>es</span>ASP.NET</b><br>" +
                " C/ C/ Nombre de Calle, No X <br /> 28031 Madrid, España <br />" +
                "Tel: +34 902 00 00 00 <br />Fax: +34 91 000 00 00<br />" +
                "Web: <a href='http://www.esASP.net/' class='txtBKM' >www.esASP.net</a>" +
                "<br />Email: <a href='mailto:derbis.corrales@gmail.com' class='txtBKM'>" +
                "derbis.corrales@gmail.com</a><br><br></div>";
            GInfoWindow window = new GInfoWindow(marker, strMarker, true);
            GMap1.addInfoWindow(window);
 
            GMap1.enableHookMouseWheelToZoom = true;
 
            //Tipo de mapa a mostrar
            GMap1.mapType = GMapType.GTypes.Normal;
 
            //Moverse con el cursor del teclado
            GMap1.enableGKeyboardHandler = true;
        }
    }
}

En el código C# hemos comentado alguna de las características que podemos implementar con este interesantísimo control, y esos comentarios hablan por si solos, por lo que no veo la necesidad de explicarlos mas, pero este control tiene muchas mas funcionalidades que podrás aprenderlas en la web oficial.

El único pero de este control es que la variante gratuita es totalmente funcional, pero no debemos usarla en proyectos comerciales, pues la licencia comercial tiene un coste de 10 €, pero a mi juicio no es nada en comparación con la productividad que logramos al usarlo.

Espero les sea útil este control…