post icon

Integrar Google Maps con ASP.Net

Integrar Google Maps hoy día a nuestras aplicaciones es muy fácil y existen disversas formas de hacerlo ya sea integración JavaScript, Flash, Control de Servidor en el caso de ASP.Net, etc. Me quiero centrar en la última opción mencionada. Para ello debemos descargar el WebControl del sitio de Subgurim. La misma ofrece el control de manera gratuita y con licencias.

También para poder utilizar el mapa, necesitamos que Google nos provea de un Key para nuestro sitio, el mismo también es gratis y pueden obtenerlo desde este enlace.

Una vez descargado descomprimimos el fichero .zip y copiamos la .dll GMaps.dll a la carpeta Bin de ASP.Net para que quede registrada.

Luego en la página Default.aspx agregaremos el mapa, pero primeramente registraremos el ensamblado en el mismo asi:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix= "cc1" %>

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

Luego sólo queda agregar el siguiente código para ver el mapa (recuerden agregar sus Key API en la propiedad correspondiente)

<div align="center">
        <cc1:GMap ID="gMap" runat="server" enableGoogleBar="True"
            enableHookMouseWheelToZoom="True"
            enableServerEvents="True" Height="700px"
            Version="3" Width="800px" enableGKeyboardHandler="True"
            serverEventsType="AspNetPostBack"
            Key="FGGHDkhkhghwryiu5&980r879we29ry2r2grgfgvhuoihgiushfihdfihsd45468485467hGJHF45454f542dsf"
            enableStore="False" enableGetGMapElementById="True"
            enableDragging="True" />
    </div>

En el Script anterior he agregado un par de propiedades típicas que no están activas por defecto, como lo son la barra de búsqueda, poder arrastrar el mapa, eventos del servidor, realizar zoom con el scroll del mouse, crear ID’s para los elementos, etc. ustedes pueden cambiarles según sus necesidades.

Con esto ya podemos ver un mapa bastante simple. Pero podemos hacer más que esto.

Iniciar el mapa en alguna zona del mundo especifica

Agregamos en el codigo servidor el siguiente uso

using Subgurim.Controles;

Creamos un metodo nuevo, y lo invocamos desde el Page_Load si no es Postback

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
		InicializarGoogleMapsServer();
}

private void InicializarGoogleMapsServer()
{
	// centramos en Paraguay el mapa al iniciar
	GLatLng latlng = new GLatLng(-24.086589258228, -57.37060546875);

	// centramos el mapa en las coordenadas
	gMap.setCenter(latlng);
}

Mostrar Barra de Zoom

Con todo ésto aun no vemos la típica barra de zoom y otros features que tienen los mapas, agregaremos esto continuando el código del método anterior.

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
		InicializarGoogleMapsServer();
}

private void InicializarGoogleMapsServer()
{
	// centramos en Paraguay el mapa al iniciar
	GLatLng latlng = new GLatLng(-24.086589258228, -57.37060546875);

	// centramos el mapa en las coordenadas
	gMap.setCenter(latlng);

	// agregamos los controles de navegacion y zoom a los 3
	gMap.addControl(new GControl(GControl.preBuilt.LargeMapControl));

	// agregamos los listeners
	gMap.addListener(new GListener(gMap.GMap_Id, GListener.Event.zoomend,
	string.Format(@"
	function(oldLevel, newLevel)
	{{
	  if ((newLevel > 7) || (newLevel < 4))
	  {{
		  var ev = new serverEvent('AdvancedZoom', {0});
		  ev.addArg(newLevel);
		  ev.send();
	  }}
	}}
	", gMap.GMap_Id)));
}

Usar Marcadores en el Mapa

Podemos usar marcadores dentro del mapa y controlarlos desde el servidor, en mi ejemplo no se podrá arrastra pero es posible hacerlo ademas que pueden crear mas de un marcador se no reinician los mismos

protected string gMap_Click(object s, GAjaxServerEventArgs e)
{
	// Mostramos las coordenadas
	Response.Write("Sus Coordenadas son: \r\n Latitud: " + e.point.lat + "\r\n" + "Logitud: " + e.point.lng);
	// creamos las coordenadas con el clic que hizo el usuario
	GLatLng latlng = new GLatLng(e.point.lat, e.point.lng);
	// limpiamos todos los marcadores del mapa
	gMap.resetMarkers();
	// creamos un marcador
	GMarkerOptions mkrOpts = new GMarkerOptions();
	// seteamos que no se pueda arrastrar, asi estara obligado a dar clic de nuevo si quiere cambiar
	mkrOpts.draggable = false;
	// creamos un marcador nuevo, con las coordenadas del usuario
	GMarker marker = new GMarker(latlng, mkrOpts);
	// agregamos el marcador al mapa
	gMap.Add(marker);
	// centramos el mapa con las coordenadas del usuario
	gMap.setCenter(latlng);
	// agregamos un tool tip para facilitar el entendimiento al usuario
	marker.options.title = "Aqui vivo";
	// retornamos vacio
	return string.Empty;
}

Finalmente el mapa se vería así:


Existen más funciones pero éstas serán suficientes para la mayoría de los usuarios, si tienen mejoras o más funciones no duden en agregarlos en los comentarios..

Comentarios desde Facebook:

Trackbacks/Pingbacks

  1. Tweets that mention Integrar Google Maps con ASP.Net | DevTroce.com -- Topsy.com UNITED STATES - 8 enero 2011

    […] This post was mentioned on Twitter by DevTroce. DevTroce said: Integrar #Google Maps con ASP.Net: Integrar Google Maps hoy día a nuestras aplicaciones es… http://goo.gl/fb/2qyqw […]

Responder