Google Maps para ASP.
NET
Google Map (GMaps) es un control de usuario [Link] para con escasas lneas poder agregar
mapas de Google o Google Map a nuestras aplicaciones WEB.
Con este control podremos desarrollar aplicaciones WEB [Link] con toda la potencia de la
API oficial de GoogleMaps.
Ver demo. ([Link]
Pero veamos un ejemplo paso a paso. Lo primero ser descargarnos el fichero [Link] desde el
siguiente enlace. ([Link]
Una vez descargado y copiado en la carpeta bin de nuestro proyecto, pasaremos a crear nuestra
pgina web a la que le adicionaremos el mapa o Google Map. El cdigo ASPX sera el siguiente:
Google Maps, [Link] ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="[Link]" Inherits
="GoogleMaps" %>
<%@ Register Assembly="GMaps" Namespace="[Link]" TagPrefix="cc" %>
<html xmlns="[Link]
<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 prximo que debemos hacer es conseguir una Key, pues lo exige Google para poder utilizar
su API. La podemos conseguir desde aqu.( [Link]
Debemos tener en cuenta que esta clave depende del dominio donde vayamos a utilizarla, por lo
que por cada Web donde utilicemos [Link] debemos obtener
la Key apropiada.
Google Maps, [Link] [Link]
El modo ms sencillo donde ubicar la clave es en vuestro [Link]:
<configuration xmlns="[Link]
...
<appSettings>
<add key="[Link]" 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 [Link], de echo, si
ejecutamos el proyecto, veremos que ya contamos con un mapa en nuestras pagina [Link]. Pero
para sacarle el verdadero partido a este mapa debemos configurar algunas cosillas mas, por ejemplo
hagamos que se muestre una direccin especifica, por ejemplo la ubicacin de nuestra empresa o
vivienda y mostremos adems un globo con informacin relacionada a ese punto. En la siguiente
imagen se ve el resultado del Google Map que deseamos crear:
Este control nos proporciona todo el poder de la API oficial de GoogleMaps sin necesidad de una
sola lnea de cdigo javascript. As que veamos como dotar a nuestro mapa de alguna de las
caractersticas de la API desde codebihind, para ello usaremos C#.
Google Maps, [Link] C#
using System;
using [Link];
using [Link];
public partial class GoogleMaps : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
if (![Link])
{
GLatLng ubicacion = new GLatLng(40.381090863719436, -3.6222052574157715);
[Link](ubicacion, 15);
//Establecemos alto y ancho en px
[Link] = 560;
[Link] = 660;
//Adiciona el control de la parte izq superior (moverse, ampliar y reducir)
[Link](new GControl([Link]));
//[Link]: permite elegir un tipo de mapa y otro.
[Link](new GControl([Link]));
//Con esto podemos definir el icono que se mostrara en la ubicacion
//#region Crear Icono
//GIcon iconPropio = new GIcon();
//[Link] = "../images/[Link]";
//[Link] = "../images/[Link]";
//[Link] = new GSize(32, 32);
//[Link] = new GSize(29, 16);
//[Link] = new GPoint(10, 18);
//[Link] = 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>[Link]</b><br>" +
" C/ C/ Nombre de Calle, No X <br /> 28031 Madrid, Espaa <br />" +
"Tel: +34 902 00 00 00 <br />Fax: +34 91 000 00 00<br />" +
"Web: <a href='[Link] class='txtBKM' >[Link]</a>" +
"<br />Email: <a href='[Link] class='txtBKM'>" +
"[Link]@[Link]</a><br><br></div>";
GInfoWindow window = new GInfoWindow(marker, strMarker, true);
[Link](window);
[Link] = true;
//Tipo de mapa a mostrar
[Link] = [Link];
//Moverse con el cursor del teclado
[Link] = true;
}
}
}
En el cdigo C# hemos comentado alguna de las caractersticas que podemos implementar con
este interesantsimo 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 podrs
aprenderlas en la web oficial. [Link]
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 ,
Crear un Mapa con la ubicacin y con los datos del instituto enviar los dos trabajos al campus
virtual
Para la ubicacin modificar el cdigo
GLatLng ubicacion = new GLatLng(40.381090863719436, -3.6222052574157715);
El 15 es el zoom, para saber las coordenadas ingresar a esta pgina y buscar su ubicacin
([Link] las coordenadas estn en la barra separadas con una
como ejemplo [Link]
