API Google Maps

Versión. 3.2.0.

1 -04/12/2008

DOCUMENTACION EN ESPAÑOL

Indice
Iniciación Cómo empezas a utilizar GoogleMaps.Subgurim.NET ................................................................1 Clave de Google o Key ...............................................................................................................2 Comercial Key ...........................................................................................................................3 Basico .......................................................................................................................................5 Basico 2.....................................................................................................................................6 Basico 3.....................................................................................................................................8 Zoom ...................................................................................................................................... 10 Zoom 2.................................................................................................................................... 11 Tipo de Mapa .......................................................................................................................... 12 GKeyboardHandler .................................................................................................................. 13 Asignar Centro ........................................................................................................................ 14 Custom Mouse Cursors ........................................................................................................... 15 Minimizar Código .................................................................................................................... 16 Controles y overlays Controles Prefabricados. ......................................................................................................... 17 Controles Extra........................................................................................................................ 19 GOverViewMap....................................................................................................................... 21 Líneas...................................................................................................................................... 23 Polígonos ................................................................................................................................ 25 TileLayers ................................................................................................................................ 27 GGroundOverlay ..................................................................................................................... 29 GScreenOverlay ...................................................................................................................... 30 Custom Overlays ..................................................................................................................... 31 GStreetViewOverlay ................................................................................................................ 32 Hierarchical Map Type Control ................................................................................................ 33 GLayer .................................................................................................................................... 35 InfoWindows InfoWindow ............................................................................................................................ 36 InfoWindow con Icon .............................................................................................................. 37 InfoWindow con Pestañas ....................................................................................................... 38 ShowMapBlowUp.................................................................................................................... 40 GInfoWindowOptions.............................................................................................................. 41 Iconos Iconos ..................................................................................................................................... 45 Iconos Avanzados .................................................................................................................... 47 Marker Manager ..................................................................................................................... 49 Otros Mapas Static Map ............................................................................................................................... 51 GoogleEarth Map .................................................................................................................... 53 Mars Map ............................................................................................................................... 54

Moon Map .............................................................................................................................. 55 Sky Map .................................................................................................................................. 56 Custom Maps .......................................................................................................................... 57 GStreetViewPanorama ............................................................................................................ 59 Eventos Y JavaScript Eventos ................................................................................................................................... 61 Eventos de Servidor ................................................................................................................ 63 Eventos de Servidor2............................................................................................................... 67 ASP.NET Postback ................................................................................................................... 70 Custom Javascript ................................................................................................................... 72 Custom Inside Javascript ......................................................................................................... 74 ToString .................................................................................................................................. 76 GMap.ToString ........................................................................................................................ 77 getGMapElementById ............................................................................................................. 79 Store ....................................................................................................................................... 81 Geo GeoCoding .............................................................................................................................. 84 GeoCoding 2 ........................................................................................................................... 86 GeoCoding Avanzado .............................................................................................................. 88 Geocoding Inverso .................................................................................................................. 93 GGeoXml................................................................................................................................. 96 GTrafficOverlay ....................................................................................................................... 97 GDirections Basic .................................................................................................................... 98 GDirections Avanzado ............................................................................................................. 99 GeoIP .................................................................................................................................... 101 Gmaps Utility Library DragZoomControl.................................................................................................................. 103 LabeledMarker ...................................................................................................................... 105 ExtMapTypeControl .............................................................................................................. 106 MapIconMaker...................................................................................................................... 107 MarkerTracker ...................................................................................................................... 109 Otros Add Genérico ........................................................................................................................ 110 Movimiento y Animación ...................................................................................................... 112 GLatLngBounds ..................................................................................................................... 114 DataSource ........................................................................................................................... 116 Soporte PostBack .................................................................................................................. 118 GAdsManager ....................................................................................................................... 119 Nota y Agradecimiento Nota y Agradecimiento.......................................................................................................... 120

.

Controles" tagprefix="cc1" %> Y en vuestro . no tenéis más que arrastrar vuestro control desde vuestra ToolBox.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> y este campo al style de vuestra página: <style type="text/css"> v\:* { behavior:url(#default#VML). El modo más sencillo donde ubicar la clave es en vuestro web.config: <configuration xmlns="http://schemas. Fijaos que esa clave depende del dominio donde vayáis a utilizarla...0.Subgurim. <appSettings> <add key="googlemaps. no tenéis más que añadir un atributo (a continuación se muestra en negrita) a vuestro tag head.Controles.Subgurim.NET debéis crear la Key apropiada.NET – Versión: 3.com/. no dudéis en preguntar en el foro.1 – 04/12/2008 . el control ya se encargará de hacer el resto.Lo primero que debéis hacer es conseguir una Key. Google aconseja que las página cumplan los estándares XML. 2.NetConfiguration/v2.NET Previa Tras descargar el control y seguir las instrucciones de instalación.0"> ..subgurim.NET: Imports Subgurim.Cómo empezar a utilizar GoogleMaps.net" value="tuClave_yourKey" /> </appSettings> .. } </style> 3. Para ello.Ahora ya sólo queda comenzar a utilizar el control! Para ello se recomienda seguir los ejemplos y ante cualquier duda. La podéis conseguir desde aquí. no olvidéis importarla mediante: C#: using Subgurim. GoogleMaps.. idea o sugerencia. por lo que por cada Web donde utilicéis el GoogleMaps.Subgurim..Controles 1 Instrucciones 1.w3.microsoft. pues lo exige Google para poder utilizar su API.Para un correcto funcionamiento en todos los navegadores.. Vuestra página quedará encabezada por algo similar a: <%@ register assembly="GMaps" namespace="Subgurim.2. VB. </configuration> De este modo.aspx tendréis: <cc1:GMap ID="GMap1" runat="server" /> Y para usar la librería en código. de modo que se asemeje a: <html xmlns="http://www.

.subgurim.. sigue valiendo asignar la clave desde la propiedad "Key" tanto en el mismo control como en código.com/apis/maps/signup.microsoft. Tal y como se comenta en ¿Cómo empezar? el modo más sencillo de asignar la clave al control es poniendo lo siguiente en el web.com/.Clave de Google o Key Imprescindible tener la clave de la API de google: http://www. Sin embargo. </configuration> 2 De este modo. </configuration> GoogleMaps. también se le puede asignar a la propiedad "Key" del control la key del elemento appSettings que contiene la clave.aspx <cc1:GMap ID="GMap1" runat="server" Key="ClaveDeGoogle" /> Alternativamente.microsoft.cs GMap1.1 – 04/12/2008 .aspx.NET – Versión: 3.config: web. web..0"> . el control ya se encargaría de todo.... <appSettings> <add key="googlemaps. o .0. en caso de que no se quiera utilizar la configurada por defecto "googlemaps.Subgurim.cs GMap1.NetConfiguration/v2.aspx. <appSettings> <add key="myOwnKey" value="ClaveDeGoogle" /> </appSettings> .config <configuration xmlns="http://schemas.config <configuration xmlns="http://schemas.2.0"> .NetConfiguration/v2.Key = "myOwnKey".html.net": ..subgurim.net" value="ClaveDeGoogle" /> </appSettings> .com/. .Key = "ClaveDeGoogle"..google.

microsoft..Subgurim. </configuration> De este modo.subgurim..Subgurim. <appSettings> <add key="googlemaps. el control parezca totalmente vuestro.. 3 Con esto se consigue que. Eliminación de los comentarios en código. Más información sobre licencias Asignar una CommercialKey a un mapa se hace de forma muy similar a hacerlo con la clave de Google o Key. Google Maps ASP.cs GMap1. Con la compra de una licencia se proveerá de la "CommercialKey" que. o . . en que se hace referencia al inicio y al final del código propio del control.NetConfiguration/v2. producirá el siguiente efecto: • • Eliminación del mensaje "Powered By Subgurim.2.net_Commercial" value="CommercialKey" /> </appSettings> .0.aspx. Del mismo modo también vale asignar la clave desde la propiedad "CommercialKey" tanto en el mismo control como en código.NET" ubicado detras del mapa y que el visitante puede ver instantes antes de que se cargue el mapa.CommercialKey = "CommercialKey". (Ocurre sobretodo con el navegador FireFox). también se le puede asignar a la propiedad "CommercialKey" del control la GoogleMaps.NET dispone de licencias comerciales para la utilización del control en aplicaciones profesionales. El modo más sencillo de asignar la CommercialKey al control es poniendo lo siguiente en el web. el control ya se encargaría de todo.com/.0"> .1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" CommercialKey="CommercialKey" /> Alternativamente.Comercial Key GoogleMaps. de cara tanto al visitante como (si es el caso) al cliente al que le estáis vendiendo la aplicación.NET – Versión: 3.config <configuration xmlns="http://schemas.NET. tras aplicarla al control..config: web.

web. </configuration> 4 GoogleMaps.key del elemento appSettings que contiene la CommercialKey..cs GMap1.net_Commercial": .1 – 04/12/2008 .0..CommercialKey = "myOwnCommercialKey".com/.aspx.microsoft..NetConfiguration/v2.NET – Versión: 3..Subgurim.config <configuration xmlns="http://schemas.2. <appSettings> <add key="myOwnCommercialKey" value="CommercialKey" /> </appSettings> .0"> . en caso de que no se quiera utilizar la configurada por defecto "googlemaps.subgurim.

GMap1.NET – Versión: 3.Language = "es". Podemos elegir la versión de la API de Google Maps que queremos que utilice el control.enableDragging = false.BackColor = Color. Usando la propiedad "Language" podremos definirlo. En el ejemplo vemos lo fácil que es elegir la versión "2.43".White.Version = "2. GMap1.43".enableGoogleBar = true.1 – 04/12/2008 .cs // GMaps1.Subgurim. pero si queremos activar otra versión previa (por ejemplo por compatibilizar el código). GoogleMaps. Si no hacemos nada la versión es la que el equipo de Google Maps define por defecto.Básico En nuestro primer ejemplo. vemos que es increiblemente sencillo tener el mapa de google en nuestra página.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.0. GMap1. GMap1. En nuestro ejemplo no vamos a permitirlo. Con la propiedad BackColor podremos definir el color de fondo del mapa mientras esperamos a que éste se cargue (sólo funciona si se dispone de licencia) 5 Code. Otra de las características básica es el idioma del mapa.2. Por defecto sí es así. basta con definirlo con la propiedad Version. También podemos decidir si el usuario puede mover el mapa con el ratón (Dragging).aspx.

2. Ahora hay que usar Width y Height del mismo modo que se usa en cualquier otro control.aspx <cc1:GMap ID="GMap1" runat="server" Width="90%" Height="250px" /> <cc1:GMap ID="GMap2" runat="server" /> GoogleMaps.NET – Versión: 3.Básico 2 GMap_Height y GMap_Width han desaparecido definitivamente.0. 6 Code.1 – 04/12/2008 .Subgurim.

Subgurim. 15). 7 GoogleMaps.NET – Versión: 3.setCenter(new GLatLng(20.Width = 300. 6). GMap2. GMap2.aspx.2.Height = 456. 2).1 – 04/12/2008 .Code. 2). GMap2.0.setCenter(new GLatLng(41.cs GMap1.

8 La solución es utilizar el método getChangeHiddenStateFunction() de cada mapa. vemos que se ejecuta ese javascript en el preciso momento en que se hace clic sobre su TabPanel correspondiente. por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".2.1 – 04/12/2008 .0.Subgurim. Code. el cual devuelve un javascript que debemos ejecutar en el momento en que se vaya a mostrar el mapa.NET – Versión: 3. En el ejemplo del TabContainer. Tenemos este problema. pues acaba descuadrándose o. directamente.aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="1"> <ContentTemplate> <cc1:GMap ID="GMap1" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="2"> <ContentTemplate> Empty Tab GoogleMaps.Básico 3 GoogleMaps no se lleva bien con los elementos que lo ocultan con un Hidden. no mostrándose.

GMap2. TabPanel1. GMap2. GMap1.1 – 04/12/2008 . TabPanel3.addControl(new GControl(GControl.NET – Versión: 3.getChangeHiddenStateFunction().extraBuilt.addControl(new GControl(GControl.TextualCoordinatesControl)).addControl(new GControl(GControl.</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="3"> <ContentTemplate> <cc1:GMap ID="GMap2" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="4"> <ContentTemplate> Empty Tab </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> Code.MarkCenter)).extraBuilt. GMap1.extraBuilt.Subgurim.2.extraBuilt.addControl(new GControl(GControl.setCenter(new GLatLng(40. GMap2.getChangeHiddenStateFunction().MarkCenter)).aspx.OnClientClick = GMap2.0.cs GMap1.setCenter(new GLatLng(39.TextualCoordinatesControl)). 1)). 2)). 9 GoogleMaps.OnClientClick = GMap1.

GZoom = 3. manejaremos la propiedad GZoom. y conforme aumentemos nos acercaremos más. 10 Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.cs GMap1.aspx.2.NET – Versión: 3.Zoom Para asignar el zoom del mapa. Tened en cuenta que en algunas zonas no hay mapas disponibles para zooms elevados.1 – 04/12/2008 . GoogleMaps.Subgurim.0. El 1 se corresponde con el zoom más alejado.

aspx. // GMap1.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. para desactivarlas: // GMap1. GoogleMaps.NET – Versión: 3. GMap1.enableHookMouseWheelToZoom = true. permitiremos que el usuario haga zoom con la rueda del ratón.enableDoubleClickZoom = false. Además.Zoom 2 Haciendo doble clic sobre el Mapa podemos hacer un Zoom IN (botón de la izquierda) y un Zoom Out (botón de la derecha). Pero además. Las propiedades encargadas de tal menester son enableDoubleClickZoom y enableContinuousZoom.cs // Ambas propiedades están activadas por defecto.enableContinuousZoom = false. ese zoom ocurrirá de forma gradiente y continua.2.Subgurim. 11 Code. si lo activamos.0. con el que.1 – 04/12/2008 . también contamos con enableHookMouseWheelToZoom.

GTypes.Physical Con el el control para ASP.GTypes.NET. GoogleMaps.addMapType(GMapType. Code.Satellite Híbrido: GMapType.aspx.1 – 04/12/2008 . GMap1.mapType = GMapType. Existen cuatro tipos de mapas: • • • • 12 Normal: GMapType.GTypes.GTypes.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Normal (por defecto) Satélite: GMapType.0.GTypes. GMap1.preBuilt.Subgurim.addControl(new GControl(GControl.NET – Versión: 3.2. elegir entre un tipo de mapa u otro no consiste más que en utilizar el IntelliSense.cs GMap1.Hybrid Físico: GMapType.GTypes.Tipo de mapa El tipo de mapa lo podemos elegir usando la propiedad mapType.Physical).MapTypeControl)).Physical.

Subgurim.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.cs GMap1.enableGKeyboardHandler = true. 13 Code.1 – 04/12/2008 . permitiremos que el usuario pueda navegar por el mapa con las flechas del teclado.GKeyboardHandler Activando el GKeyboardHandler (está desactivado por defecto).aspx.0.NET – Versión: 3.2. pudiendo incluso utilizar dos flechas al mismo tiempo. GoogleMaps.

GTypes maptype = GMapType. 10. GMap1.Asignar Centro Para asignar el centro utilizaremos el método setCenter() Éste tiene tres sobrecargas: • • • setCenter(GLatLng): sólo marcamos el centro setCenter(GLatLng.aspx.setCenter(latlong).setCenter(latlong. //GMap1.TextualCoordinatesControl)). 4).2.cs GLatLng latlong = new GLatLng(15. Code.2. GMapType. maptype).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.0. //GMap1.addControl(new GControl(GControl.GTypes): el centro.Subgurim. 14 Nota: las variables del tipo GLatLng pueden sumarse y restarse con los operadores '+' y '-'. GMap1.1 – 04/12/2008 .Hybrid.extraBuilt. GoogleMaps. GMap1. int): marcamos el centro y el zoom setCenter(GLatLng.extraBuilt.NET – Versión: 3. el zoom y el tipo de mapa.9). int GMapType. 4.addControl(new GControl(GControl.GTypes.setCenter(latlong.MarkCenter)).

cursor.2.cs GCustomCursor customCursor = new GCustomCursor(cursor. draggingCursor: el tipo de cursor cuando estemos moviendo el mapa.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 .addCustomCursor(instancia_GCustomCursor).addCustomCursor(customCursor).0.Custom Mouse Cursors Podemos asignar tipos de cursores según la acción que se esté realizando sobre el mapa.crosshair.text). GoogleMaps. que coinciden con la definición de tipo de cursor que se da en CSS: auto. pointer.aspx. Para ello tenemos que crear un objeto del tipo GCustomCursor y añadirlo al mapa mediante GMap1. hand. help. del que podemos elegir 9 opciones. text. crosshair.Subgurim. GMap1. Default. Code.NET – Versión: 3. GCustomCursor tiene dos propiedades: • • draggableCursor: el tipo de cursor cuando podamos mover el mapa. wait. move. 15 Ambas porpiedades son del tipo enumerado cursor.

aspx <cc1:GMap ID="GMap1" runat="server" /> Code. de modo que podemos aplicar algunas opciones para minimizar el código al máximo. Sin embargo. sino que aporta funcionalidades que la API de Google Maps no posee. en ocasiones no nos es necesario utilizar toda la potencia.NET es muy potente. enableStore: si no vamos a usar la propiedad Store no debemos activar esta opción (desactivada por defecto). es recomendable desactivar esta opción (está activada por defecto). que devuelve una simple imagen. pues no solo es un parseador de ASP.NET – Versión: 3. Code.NET a javascript. 16 Si nuestro único objetivo es mostrar mapas con GPolygons o GMarkers y no queremos que el usuario tenga la opción de interactuar con el mapa.2.cs GMap1.enablePostBackPersistence = false. GMap1.Minimizar Código El control de Google Maps para ASP. deberíamos estudiar la posibilidad de utilizar Static Maps. enableServerEvents: sólo debemos activar esta opción si vamos a usar server events (desactivado por defecto). Pero el Static Map suele quedarse corto en muchas ocasiones (el usuario no tiene opción de moverse en el mapa). es recomendable desactivar esta opción (está activada por defecto). enableGetGMapElementById: Si no vamos a usar nunca la opción de getGMapElementById.Subgurim. GoogleMaps.0.enableGetGMapElementById = false.aspx. de modo que aquí van algunas opciones que se pueden aplicar en el mapa para dejar el código a mínimos: • • • • enablePostBackPersistence: Si la página que contiene el mapa no va a realizar ningún PostBack.1 – 04/12/2008 .

Controles Prefabricados
Los controles prefabricados son aquellos que Google provee por defecto, y con ASP.NET es muy sencillo añadirlos a nuestro mapa. Para ello se utiliza GControl. En el caso de los controles prefabricados, lo que haremos será inicializar el GControl con un elemento del enumerador GControl.preBuilt (en el código ejemplo se puede ver cómo). Hay 6 tipos de GControl.preBuilt:
• • • • •

• • •

GControl.preBuilt.MapTypeControl: permite elegir entre un tipo de mapa y otro. GControl.preBuilt.MenuMapTypeControl: permite elegir entre un tipo de mapa y otro en forma de menú desplegable. GControl.preBuilt.HierarchicalMapTypeControl: permite elegir entre un tipo de mapa y otro en forma de menú jerárquico. Tiene opciones avanzadas. GControl.preBuilt.SmallMapControl: añade cuatro flechas para navegar por el mapa, así como dos botones para aumentar y reducir el zoom. GControl.preBuilt.LargeMapControl:añade cuatro flechas para navegar por el mapa, dos botones para aumentar y reducir el zoom, y una barra en la que poder elegir cualquier cualquier nivel de zoom. GControl.preBuilt.SmallZoomControl: botones para aumentar y reducir el zoom. GControl.preBuilt.ScaleControl: marca la escala del mapa. GControl.preBuilt.GOverviewMapControl: añade un pequeño mapa (que se puede minimizar) que permite navegar a grandes rasgos por los alrededores de nuestro mapa actual.

17

Además del GControl.preBuilt, el GControl nos permite decidir las cuatro posiciones posibles en la que se colocará el mapa utilizando la propiedad position del tipo GControlPosition. En los ejemplos se ven los casos más explicativos. Las cuatro posiciones posibles se pueden acceder desde el enumerador GControlPosition.position, y son:
• • • •

Top_Right: arriba a la derecha. Top_Left: arriba a la izquierda. Bottom_Right: abajo a la derecha. Bottom_Left: abajo a la izquierda.

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

18

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GControl control = new GControl(GControl.preBuilt.GOverviewMapControl); GControl control2 = new GControl(GControl.preBuilt.MenuMapTypeControl, new GControlPosition(GControlPosition.position.Top_Left)); GMap1.addControl(control); GMap1.addControl(control2); GMap1.addControl(new GControl(GControl.preBuilt.SmallMapControl, new GControlPosition(GControlPosition.position.Top_Right)));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Controles Extra
Los controles extra son aquellos fabricados para este control, que no vienen por defecto en la API de GoogleMaps. En algunos casos se trata de controles que Google provee como ejemplo. Éste será uno de los campos donde más se va a desarrollar para las futuras versiones de googlemaps.subgurim.net Para los controles extra, lo que haremos será inicializar el GControl con un elemento del enumerador GControl.extraBuilt (en el código ejemplo se puede ver cómo). Hasta la versión actual nos encontramos con estos tipos de control extraBuilt:
• • •

19

TextualZoomControl: Añade dos cuadros de texto desde los que se puede alejar y acercar el zoom. NumericalZoomControl: Añade dos cuadros de texto desde los que se puede alejar y acercar el zoom con el número del zoom como texto. TextualCoordinatesControl: Añade un cuadro de texto con las coordenadas del punto central del mapa. Se actualiza a medida que se arrastra el mapa. Clickando sobre éste salta una ventana desde la que recoger las coordenadas exactas en que nos encontramos. TextualOnClickCoordinatesControl: Añade un cuadro de texto con las coordenadas del punto en que se ha hecho click por última vez. Clickando sobre el cuadro, no salta una ventana desde la que recoger las coordenadas exactas en que nos encontramos. MarkCenter: Añade una '+' marcando el centro exacto del mapa.

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GControl control = new GControl(GControl.extraBuilt.NumericalZoomControl); GMap1.addControl(control);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

addControl(new GControl(GControl.GMap1.1 – 04/12/2008 .position.Top_Right))).0.addControl(new GControl(GControl.extraBuilt.MarkCenter)).extraBuilt. 20 GoogleMaps.2.Subgurim.NET – Versión: 3.TextualCoordinatesControl. GMap1. GMap1.position.TextualOnClickCoordinatesControl. new GControlPosition(GControlPosition. new GControlPosition(GControlPosition.addControl(new GControl(GControl.extraBuilt.Bottom_Right))).

Add(new GControl(GControl.2.preBuilt. 150). en ocasiones vamos a querer un mayor control sobre este OverViewMap. y que en esencia son bastante similares a las que se ofrecen para un mapa normal.aspx. Code.NET – Versión: 3.. 1). donde vemos que no hay más que hacer GMap1.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Líneas: añadiremos polilineas mediante addPolyline(GPolyline).cs GLatLng latlng = new GLatLng(40.GOverviewMapControl)).1 – 04/12/2008 . Vamos a poder trabajar con: • • • • • • 21 Dimensiones: mediante la propiedad gSize podemos elegir las dimensiones.Subgurim. podremos elegir ciertas características del OverViewMap que antes no podíamos.0. Control de escala: análogamente instanciaremos el control de escala mediante addControl_Scale(). Mediante GOverViewMap. GOverViewMap gOVM = new GOverViewMap(). Cambiar tipo de mapa: haremos uso del control para cambiar el tipo de mapa simplemente llamando a addControl_MapType(). Listeners: usaremos casi cualquier tipo de Listeners mediante addListener(GListener).GOverViewMap El modo más sencillo de añadir un OverViewMap viene explicado en la sección de controles prefabricados. Sin embargo. GoogleMaps. Tipo de mapa: elegiremos el tipo de mapa con la propiedad mapType.gSize = new GSize(250. gOVM.

puntos.addControl(new GControl(GControl.5.Satellite.gOVM.Add(latlng + new GLatLng(0. 4.preBuilt. "FFF000".addControl_MapType().mapType = GMapType. List<GLatLng> puntos = new List<GLatLng/>().addListener(new GListener(gOVM.2)). +2. 8)). GPolyline linea = new GPolyline(puntos.0. GMap1.}")).Add(latlng). puntos.addPolyline(linea).addControl_Scale().Add(latlng + new GLatLng(-0.2.NET – Versión: 3.ID.Subgurim.Event. gOVM. gOVM. gOVM.Add(latlng + new GLatLng(4.6)). gOVM. GMap1.click. GListener. "function() {alert('Clicked!!').GTypes.MapTypeControl)). 22 GoogleMaps.1 – 04/12/2008 . puntos. puntos.Add(latlng + new GLatLng(3. 2). -4)).gOverViewMap = gOVM. puntos.79.5.

Add(latlng). clickable: indica si la línea es o no clicable. 21). weight: anchura de la línea en pixels opacity: double entre 0 y 1. Está compuesta por 4 elementos. debéis añadir el siguiente atributo a vuestro tag HTML: <html xmlns="http://www.2. color: por defecto es el azul.Add(latlng + new GLatLng(0. 23 NOTA: para un correcto funcionamiento en el Internet Explorer. utilizaremos el GPolyline.setCenter(latlng.cs GLatLng latlng = new GLatLng(46.1 – 04/12/2008 .org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> Code. geodesic: dibuja la línea como si fuera geodésica.2)).5.aspx.Add(latlng + new GLatLng(3. Es la parte más importante pues definirá el trazado de la línea. 4. 8)). puntos.5.NET – Versión: 3.Add(latlng + new GLatLng(-0. y debemos dar el valor como un string con el color en hexadecimal o como un color . puntos.Subgurim. puntos. List<GLatLng> puntos = new List<GLatLng>().aspx <cc1:GMap ID="GMap1" runat="server" /> Code. del que sólo el primero es obligatorio: • • • • • • points: listado genérico de puntos (del tipo GLatLng).0. Define la opacidad de la línea. no plana. puntos. GoogleMaps.Líneas Para añadir líneas a nuestro mapa. GMap1.NET. 4).w3. -4)).

GPolyline linea = new GPolyline(puntos.6)). List<GLatLng> puntos2 = new List<GLatLng>().1 – 04/12/2008 .puntos.addPolyline(linea). List<GLatLng> puntos3 = new List<GLatLng>(). puntos2.Add(latlng). puntos2. 4). GMap1. 2). GPolyline linea3 = new GPolyline(puntos3. "FF0000".NET – Versión: 3.Add(latlng + new GLatLng(-5.2.Add(latlng + new GLatLng(5. 20)). -20)).0. -6)).geodesic = true. linea3. -8)). puntos2.DarkViolet.Subgurim. GMap1. linea2.addPolyline(linea3). 0)). puntos3. Color.weight = 4. GMap1. puntos2.Add(latlng + new GLatLng(5.Add(latlng + new GLatLng(5.Add(latlng + new GLatLng(5. GPolyline linea2 = new GPolyline(puntos2). puntos2. +2.Add(latlng + new GLatLng(5.Add(latlng + new GLatLng(4. 24 GoogleMaps. -4)).addPolyline(linea2).79. puntos3.

1 – 04/12/2008 .0. strokeOpacity: double entre 0 y 1. strokeWeight: anchura de la línea en pixels. Define la opacidad de la línea.Subgurim.Polígonos Crear polígonos en nuestro mapa es muy sencillo con la clase "GPolygon". o inclination: inclinación del primer punto. int sides. y cuanto más al ecuador. 25 Además. cuanto más a los polos.2. de modo que el primer punto coincida con el último. NOTA: para un correcto funcionamiento en el Internet Explorer. más "perfecto" será el cuadro. strokeColor: por defecto es el azul. El efecto es muy similar a la de la clase "GPolyline". o sides: lados del polígono. Así pues. debéis añadir el siguiente atributo a vuestro tag HTML: <html xmlns="http://www. A partir de 20 se asemeja a una circunferencia.w3. Ésta tiene 6 propiedades. fillColor: color del relleno interior del polígono. Lo que hace esta función es crear un polígono en base a sus parámetros de entrada: o center: centro del polígono. Es la parte más importante pues definirá el trazado del polígono. clickable: indica si el polígono es o no clicable. Cabe destacar que se trata de polígonos basados en puntos geográficos. Debemos dar el valor como un string con el color en hexadecimal. o radius: grados geográficos de radio. sino un polígono de 4 lados cuya distancia kilométrica entre el centro y ellos sea la misma. más "deformado" estará el cuadrado. createPolygon(GLatLng center. hemos añadido dos interesantes métodos por considerar que su uso es muy típico: • • close(): independientemente de cómo estén configurados los puntos del polígono. double radius): Llamar a este método NO implica borrar los puntos insertados previa o posteriormente. este método se encarga de cerrarlo. si creamos un polígono de 4 grados NO se mostrará por pantalla un cuadrado perfecto. de la que sólo la primera es obligatoria: • • • • • • • points: listado genérico de puntos (del tipo GLatLng). con la diferencia de que el GPolygon rellena el interior con el color que marquemos.NET – Versión: 3. y debemos dar el valor como un string con el color en hexadecimal. Es un double expresado en radianes. Esto se deja a gusto del programador. Su valor por defecto es PI/4. Por ejemplo. fillOpacity: double entre 0 y 1. Define la opacidad del relleno del polígono.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> GoogleMaps.

"237464".addPolygon(poligono2). "000000". GPolygon poligono = new GPolygon(puntos.Add(latlng + new GLatLng(-0. 4.Add(latlng + new GLatLng(5. puntos2. Math.5. -8)).79. +2.5).Add(latlng + new GLatLng(5.Add(latlng + new GLatLng(4. GoogleMaps.26 Code. GPolygon poligono3 = new GPolygon(new List<GLatLng>(). 0.1 – 04/12/2008 .NET – Versión: 3. -4)). 0. List<GLatLng> puntos = new List<GLatLng>().aspx <cc1:GMap ID="GMap1" runat="server" /> Code. List<GLatLng> puntos2 = new List<GLatLng>().createPolygon(latlng + new GLatLng(-6. 0. poligono.Add(latlng + new GLatLng(0. "557799". puntos. GPolygon poligono2 = new GPolygon(puntos2. 0)). GMap1. puntos.0. "654321". puntos.Add(latlng + new GLatLng(-5.5). 0). 3. puntos2.close().setCenter(latlng. puntos.cs GLatLng latlng = new GLatLng(46. "ff0044". 1. GMap1. puntos2. -4)). -6)). puntos. poligono3. puntos2. 21).5. 4.Add(latlng + new GLatLng(3.aspx.PI /3). GMap1. GMap1. 3.5.Subgurim.Add(latlng + new GLatLng(5. 4). 1).2)). puntos2. -7.Add(latlng).Add(latlng).addPolygon(poligono3). 7.6)). 3.2.Add(poligono). "00ff00". 8)).

TileLayers Con las TileLayers podremos definir nuestras propias capas sobre el mapa.setCenter(new GLatLng(37.png 27 Code.4419. El elemento más importante es la correcta definición de la propiedad tileUrlTemplate del GTileLayerOptions. GoogleMaps. de modo que podremos superponer nuestras imágenes a las que nos devuelve el GoogleMaps. GTileLayerOptions.2. Y es la longitud y Z es el zoom. Tiene la siguiente estructura: http://host/tile?x={X}&y={Y}&z={Z}. GTileLayerOptions tileLayerOptions = new GTileLayerOptions(). Su uso es muy sencillo y vale seguir el ejemplo para entenderlo.1 – 04/12/2008 . -122.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. new GLatLng(90. GTileLayer y GTileLayerOverlay.NET – Versión: 3. GCopyrightCollection myCopyright = new GCopyrightCollection("© "). "©2008 Subgurim")). 180)).png Donde X es la latitud.aspx.cs GMap1. Un ejemplo sería: http://host/tile?x=3&y=27&z=5. GCopyrightCollection. myCopyright. 13).Add(new GCopyright("Demo". 0. -180).Subgurim.0.1419). new GLatLngBounds(new GLatLng(-90. Se trata de un template que define la URL de la imagen a la que GoogleMaps va a llamar y será la que debéis gestionar. Para definir estas capas utilizaremos las clases GCopyright.

tileLayerOptions.tileUrlTemplate = "http://code.google.com/apis/maps/documentation/exam ples/include/tile_crosshairs.png"; GTileLayer tilelayer = new GTileLayer(myCopyright, 10, 10, tileLayerOptions); GTileLayerOverlay myTileLayer = new GTileLayerOverlay(tilelayer); GMap1.Add(myTileLayer);

28

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GGroundOverlay
Con el GGroundOverlay se pueden insertar imágenes a los mapas de forma muy sencilla. Basta con definir la imageUrl y el GLatLngBounds y... ¡ya está!

29

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng sw = new GLatLng(64,20); GLatLng ne = new GLatLng(65,29); GMap1.setCenter((sw / 2) + (ne / 2)); GGroundOverlay groundOverlay = new GGroundOverlay("http://googlemaps.subgurim.net/images/logo.jpg", new GLatLngBounds(sw, ne)); GMap1.addGroundOverlay(groundOverlay);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GScreenOverlay
Es muy similar al GGroundOverlay, con la diferencia que usando el GScreenOverlay la imagen que se muestra es estática (no cambia de posición absoluta cuando se mueve el mapa.

30

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng sw = new GLatLng(64, 20); GLatLng ne = new GLatLng(65, 29); GMap1.setCenter((sw / 2) + (ne / 2)); GScreenOverlay screenOverlay = new GScreenOverlay("http://googlemaps.subgurim.net/imag es/logo.jpg", new GScreenPoint(0, 21, unitEnum.pixels, unitEnum.pixels), new GScreenPoint(0, 0), new GScreenSize(0, 0)); GMap1.Add(screenOverlay);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Se va a trabajar mucho en este campo para las futuras versiones.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.cs GMap1. tenemos los GCustomOverlays de modo que podremos añadir capas al mapa de google en una sola línea.Overlay.2. GoogleMaps.Rectangle)).1 – 04/12/2008 . 31 Code.aspx.Add(new GCustomOverlay(GCustomOverlay.Custom Overlays Del mismo modo que hay controles extra.NET – Versión: 3.0.Subgurim. Disponemos hasta el momento de: • Rectangle: define un rectángulo en la parte central del mapa.

cs GoogleMaps.GStreetViewOverlay Añadiendo el GStreetViewOverlay podremos ver las zonas en las que está activo el Street View.2. 32 Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 . Sabiendo en qué zonas geográficas está activo el Street View podremos usar el GStreetViewPanorama.Subgurim.aspx.0.NET – Versión: 3.

Physical). childType: el tipo de mapa "hijo". Al GHierarchicalMapTypeControl le iremos añadiendo GHierarchicalMapTypeControlRelation.Hierarchical Map Type Control El GHierarchicalMapTypeControl es un nuevo control para mostrar los tipos de mapa de los que dispone el usuario.hierarchicalMapTypeControlRelations.NET – Versión: 3.0. lo mejor es un ejemplo: Code.aspx.1 – 04/12/2008 . GHierarchicalMapTypeControl hierarchicalMapTypeControl = new GHierarchicalMapTypeContr ol().GTypes. hierarchicalMapTypeControl. El GHierarchicalMapTypeControlRelation se compone de las siguientes propiedades: • • • • 33 parentType: el tipo de mapa "padre". hierarchicalMapTypeControl. aunque tiene una interesante configuración por defecto. Como siempre. Su objetivo es mostrar la información de forma jerárquica en el modo en que nosotros lo configuremos. isDefault: indica si está activado por defecto. childText: el texto que saldrá en el menú al referirse al tipo de mapa hijo.Subgurim.Add( GoogleMaps.clearPreviousRelationShips = true.addMapType(GMapType.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.cs GMap1.2.

34 GoogleMaps. hierarchicalMapTypeControl.Subgurim. false)).hierarchicalMapTypeControlRelations.GTypes. Physical. false)).gHierarchicalMapTypeControl = hierarchicalMapTypeControl.Normal.2.Satellite. "Subgurim Hybrid". GMap1. GMapType.1 – 04/12/2008 . Hybrid.NET – Versión: 3. GMapType.GTypes.Add( new GHierarchicalMapTypeControlRelation(GMapType.GTypes.GTypes.new GHierarchicalMapTypeControlRelation(GMapType.0. "Subgurim Physical".

All_photos_from_panoramio_com). GLayer layerWikipedia = new GLayer(GLayerID.Geotagged_Wikipedia_articles_Spanish).addGLayer(layerPanoramio). 35 Code.GLayer Con el nuevo objeto GLayer podemos añadir a nuestros mapas fotos de Panoramio o artículos geolocalizados de la Wikipedia de forma muy sencilla.2. GMap1.NET – Versión: 3. La clase GLayerID contiene todos los tipos de Layers que podemos añadirle al mapa.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Add(layerWikipedia).0. GMap1.Subgurim. GoogleMaps.1 – 04/12/2008 .aspx.cs GLayer layerPanoramio = new GLayer(GLayerID.

GMap1. GoogleMaps.1 – 04/12/2008 .setCenter(latlon.2. GMap1. 4).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.0. 22).Subgurim. No hay más que instanciar a GInfoWindow y darle los valores: • • point: del tipo GLatLon.addInfoWindow(window). indica dónde se ubicará el InfoWindow html: texto (con html incluído) que irá dentro del InfoWindow.cs GLatLng latlon = new GLatLng(10. 36 Code.NET – Versión: 3.2. GInfoWindow window = new GInfoWindow(latlon. "Ejemplo de <b>infoWindow</b>").aspx.InfoWindow Añadir un InfoWindow es tremendamente fácil.

Por defecto está abierto. GMap1. false. GInfoWindow window = new GInfoWindow(icono. por ejemplo. No hay más que instanciar a GInfoWindow y darle los valores: • • • • gMarker: se estudia en el ejemplo Iconos.mouseover). GoogleMaps. 22).NET – Versión: 3. openedOnLoad: indica si el InfoWindow estará abierto al cargar el mapa. GListener. pero. GMarker icono = new GMarker(latlon).setCenter(latlon. GMap1.Event.2. Si no lo está. sourceEvent: asigna qué evento debe ocurrir para que el InfoWindow se abra.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Subgurim.2. cuando lo retiremos. 4). "Ejemplo de <b>infoWindow</b>".InfoWindow con Icono Añadir un InfoWindow sobre un icono es igualmente sencillo.cs GLatLng latlon = new GLatLng(10. 37 Code. etc.addInfoWindow(window). lo abriremos ejecutando el evento elegido sobre el icono. Por defecto se abrirá al hacer click. podemos pedir que se abra cuando pongamos el ratón sobre el icono.aspx. html: texto (con html incluído) que irá dentro del InfoWindow.0.1 – 04/12/2008 .

Subgurim.NET – Versión: 3.Generic. i<3.InfoWindow con Pestañas El funcionamiento del InfoWindow con pestañas (GInfoWindowTabs) es muy similar al de sin pestañas. iwTabs. i++) { tabs. del modo en que se indica en el ejemplo. System. i.List) de pestañas (GInfoWindowTab).1 – 04/12/2008 . 22).setCenter(latlon.Generic.cs GLatLng latlon = new GLatLng(10.Collections. En cuanto a la pestaña (GInfoWindowTab).Collections. for (int i=0.ToString())). manejaremos dos propiedades: 38 • • label: etiqueta de la pestaña.0.ToString(). GMap1.List<GInfoWindowTab> tabs = new System. /****** INFOWINDOWTAB 1 ******/ GInfoWindowTabs iwTabs = new GInfoWindowTabs().2.Add(new GInfoWindowTab("Tab " + i.point = latlon.Collections. Code. siendo que todo lo visto en los dos ejemplos anteriores es válido.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. La diferencia estriba en que en este caso hemos de añadir un listado (System.2.aspx. html: texto (con html incluído) que irá dentro de la pestaña.Generic. } GoogleMaps. 4).List<GInfoWindowTab>().

tabs = tabs.Subgurim.1 – 04/12/2008 .gMarker = icono. 19)).0.NET – Versión: 3.addInfoWindowTabs(iwTabs).2. GMap1. /****** INFOWINDOWTAB 2 ******/ GInfoWindowTabs iwTabs2 = new GInfoWindowTabs().iwTabs. iwTabs2.tabs = tabs. 39 GoogleMaps. GMarker icono = new GMarker(new GLatLng(5.addInfoWindowTabs(iwTabs2). iwTabs2. GMap1.

GoogleMaps. 0. options. Code. Las dos propiedades del GInfoWindowOptions que se aplican en exclusiva al ShowMapBlowUp son: • • 40 mapType: del enumerador GMapType.. GMap1. para una eficaz utilización. que se explica en un ejemplo posterior.ShowMapBlowUp El ShowMapBlowUp es un elemento que muestra en un pequeño mapa flotante una parcela del mapa en el que estamos trabajando.setCenter(latlon.P Su funcionamiento básico es el mismo que el InfoWindow.1 – 04/12/2008 . options.zoomLevel = 14.addShowMapBlowUp(mBlowUp).91). la única diferencia es que aquí.GTypes. GMap1.NET – Versión: 3.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.65. 4).GTypes. GInfoWindowOptions options = new GInfoWindowOptions().aspx.cs GLatLng latlon = new GLatLng(41.2.0. zoomLevel: nivel de zoom del mapa flotante. GShowMapBlowUp mBlowUp = new GShowMapBlowUp(new GMarker(latlon).Subgurim. aunque para explicarlo. indica el tipo de mapa que se va a utilizar. options). un ejemplo va mejor que mil palabras ..Hybrid.mapType = GMapType. hay que hacer uso de GInfoWindowOptions.

con una función anónima.0. Marca el tipo de mapa (definido en el enumerador GMapType.GTypes) del mapa flotante. Ejecuta un función javascript cuando se cierra la ventana. donde la primera pestaña tiene índice 0.} Para mayor claridad. Por defecto.NET – Versión: 3. MaxTitle: el título del infowindow cuando lo maximicemos. Marca máxima la anchura en pixeles que tendrá la ventana.2. el índice 0 será el activo. 41 GoogleMaps. Si no se definen ni MaxTitle.1 – 04/12/2008 .GInfoWindowOptions GInfoWindowOptions sirve para añadir ciertas opciones a InfoWindow. algunas de ellas sólo aplicables a alguno de los elementos correspondientes: • • • • • • • • maxWidth: aplicable a todos los elementos. mapType: aplicable sólo al ShowMapBlowUp. Está compuesta de 6 propiedades. Podemos ponerle el HTML que queramos. el infowindow no tendrá la opción de maximizarse.Subgurim. InfoWindow con pestañas y a ShowMapBlowUp. Por ejemplo function() {alert('Estoy abriendo la ventana'). .Creando y añadiendo tu propio javascript desde aquí. MaxContent: el contenido del infowindow cuando lo maximicemos. Funcionamiento análogo a onOpenFn selectedTab: aplicable sólo al InfoWindow con pestañas. onOpenFn: aplicable a todos los elementos. Marca el nivel del zoom del mapa flotante. Ejecuta un función javascript cuando se abre la ventana. zoomLevel: aplicable sólo al ShowMapBlowUp. La función javascript puede enlazarse de dos modos: . ni MaxContent. Marca qué pestaña será la activa. onCloseFn: aplicable a todos los elementos. mirad los ejemplos.Poniendo el nombre de la función javascript que ya tengas hecho en tu aspx.

NET – Versión: 3.1 – 04/12/2008 .2.42 GoogleMaps.0.Subgurim.

-6)."). window.aspx.0.Add(new GInfoWindowTab("Tab 1". GMapType. "I'm <b>3</b> and I'm active by default!!")).2. GMap1.Add(new GInfoWindowTab("Tab 2".1 – 04/12/2008 . 9).Hybrid). tabs.aspx <script type="text/javascript"> function abiertoSMBU() { alert('Has abierto el ShowMapBlowUp').options = options2.relativo). GInfoWindow window = new GInfoWindow(latlng. GMarker marker2 = new GMarker(latlng . List<GInfoWindowTab> tabs = new List<GInfoWindowTab>().addInfoWindow(window). tabs).options = options1.Subgurim. GMap1. GInfoWindowTabs wTabs = new GInfoWindowTabs(marker1. } </script> <cc1:GMap ID="GMap1" runat="server" /> Code.NET – Versión: 3. GoogleMaps. wTabs. GInfoWindowOptions options1 = new GInfoWindowOptions().setCenter(latlng.D')}".cs GLatLng latlng = new GLatLng(44.Add(new GInfoWindowTab("Tab 3". "I'm tab 1")). GInfoWindowOptions options2 = new GInfoWindowOptions(2).43 Code. "InfoWindow. 4. tabs. tabs. Close me please.onCloseFn = "function(){alert('Thanks! You have closed me . GLatLng relativo = new GLatLng(2. GMarker marker1 = new GMarker(latlng + relativo). "I'm tab 2")).GTypes. options1.

options3. options3).1 – 04/12/2008 .addInfoWindow(window2). options). GShowMapBlowUp mbUp = new GShowMapBlowUp(marker2.Normal). false.Subgurim.addInfoWindowTabs(wTabs). 44 GoogleMaps.onOpenFn = "abiertoSMBU()". GInfoWindowOptions options3 = new GInfoWindowOptions(12.NET – Versión: 3. GMap1. "infoWindow example". GMapType.GMap1. GInfoWindowOptions options = new GInfoWindowOptions("Max Title". GInfoWindow window2 = new GInfoWindow(marker3.addShowMapBlowUp(mbUp).0. "Max Content").2.GTypes. GMap1.

bouncy: indica si queremos que el icono pegue unos botes cuando lo soltamos. Tenemos dos propiedades que definen al GMarker: • • point: la coordenada (del tipo GLatLng) en que se ubicará el icono. Code.2. en caso contrario (por defecto) es el icono el que se desplaza mínimamente hacia arriba. imageMap: Array de entenros representando las coordenadas x/y que indicaran la zona en que es clicable un icono para navegadores diferentes a Internet Explorer. Por defecto vale 1.NET – Versión: 3. Las GMarkerOptions definen estas propiedades: • • • • • 45 • • • • icon: que explicamos detenidamente en el ejemplo siguiente clickable: indica si un icono es o no clickable (lo es por defecto). Cuando arrastramos un icono aparece un cruz bajo éste que indica donde queremos que se ubique.Iconos Ya hemos utilizado los iconos en varias ocasiones. podemos utilizarlos sin asociarlos a nada. Obviamente.0. options: del tipo GMarkerOptions. Son los GMarker.1 – 04/12/2008 . Dando un valor de true la cruz se desplaza un poco hacia abajo en el momento cogemos el icono. title: el html tooltip del icono. maxHeight: especifíca la distancia en pixels en la que un marker se eleverá cuando es arrastrado. draggable: define si el icono puede ser arrastrado en el mapa. dragCrossMove: Es una propiedad poco importante.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps.Subgurim.. Por defecto NO lo es. bounceGravity: marca la "altura" que darán los botes. sobretodo asociándolos con InfoWindow y similares.

0. GoogleMaps.12. 5. GMap1.Event.playsudoku.addGMarker(new GMarker(latlng + new GLatLng(2. GMapType.dragstart.ID + ". GInfoWindowOptions IWoptions = new GInfoWindowOptions(12. 1))).draggable = true.ID.Add(new GListener(markerDraggable.Add(new GListener(markerDraggable.}".GTypes.openInfoWindowHtml('<a href=\"http://www. GMap1.Event.5). string jsEnd = "function() {" + markerDraggable.NET – Versión: 3.cs GLatLng latlng = new GLatLng(42.Normal).aspx.1 – 04/12/2008 . GListener.biz\" target=\"_blank\">Play Sudoku</a>'). -1.dragend.addGMarker(marker2).clickable = false. GMarker marker = new GMarker(latlng). mOpts. GMap1. GMapType. -1)). IWoptions). 46 GMarkerOptions markerOptions = new GMarkerOptions(). false. GMap1. GMap1.Hybrid). GMap1.GTypes. 2.addShowMapBlowUp(mbUp). markerDraggable.2.setCenter(latlng. GListener. markerOptions.addGMarker(markerDraggable).options = mOpts. GMarkerOptions mOpts = new GMarkerOptions(). jsEnd)). string jsStart = "function() {" + GMap1. GMarker markerDraggable = new GMarker(latlng + new GLatLng(-2.GMap_Id + ". GMarker marker2 = new GMarker(latlng + new GLatLng(-1. GMap1. GShowMapBlowUp mbUp = new GShowMapBlowUp(marker.Code. jsStart)). markerOptions).145).}".closeInfoWindow().Subgurim.ID.

con un 1% de opacidad. los dos primeros: • • • • • • • • • • • image: la imagen del icono (obligatorio). Code. pero para Mozilla/Firefox. al menos. Para ello usaremos GIcon.2. que como comentábamos en el ejemplo anterior.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps. transparent: la imagen de un virtual versión trasparente de la imagen. printImage: la imagen para mapas impresos. infoWindowAnchor: la coordenada relativa en pixeles (Gpixel) de la esquina superior izquierda desde la cual el InfoWindow (o similar) asociado al icono es clickable. usada para capturar eventos clic en Internet Explorer. La imagen debe ser el PNG de 24-bits de la image. Debe tener el mismo tamaño que shadow.Iconos Avanzados Podemos crear un tipo de icono nuevo que sustituya al existente por defecto.Subgurim. iconSize: el tamaño (del tipo GSize) de la imagen del icono (obligatorio). y es obligatorio asignar.NET – Versión: 3. GIcon tiene 11 propiedades.0. Debe tener el mismo tamaño que image. asignaremos al GMarker desde su propiedad options (del tipo GMarkerOptions). Debe tener el mismo tamaño que image. shadowSize: el tamaño (del tipo GSize) de la sombra del icono. shadow: la sombra del icono.1 – 04/12/2008 . printShadow: la sombra para mapas impresos. 47 Recomendado: en la galería de iconos podréis encontrar cientos de iconos para vuestros mapas. iconAnchor: la coordenada relativa en pixeles (Gpixel) de la esquina superior izquierda desde la cual el icono es clickable (obligatorio). baseIcon: un icono base del que se copiarán todas las propiedades a este icono. mozPrintImage: análogo a printImage.

aspx.shadow = "http://labs. 20). GMap1. GIcon icon = new GIcon(). icon. 5).clickable = false.infoWindowAnchor = new GPoint(5. 20).2.icon = icon. mOpts.google.1 – 04/12/2008 .Code.0. 1). icon. icon. icon.cs GLatLng latlng = new GLatLng(41.google. mOpts).image = "http://labs.iconAnchor = new GPoint(6. -3.2). mOpts. GMarkerOptions mOpts = new GMarkerOptions().shadowSize = new GSize(22.png". GMarker marker = new GMarker(latlng.addGMarker(marker).iconSize = new GSize(12.Subgurim. icon. 48 GoogleMaps.com/ridefinder/images/mm_20_shadow.NET – Versión: 3.setCenter(latlng. icon. 20).com/ridefinder/images/mm_20_red.png". GMap1.

setCenter(new GLatLng(41. GMarker m1 = new GMarker(new GLatLng(41. GMap1. Además el MarkerManager sólo tiene una función muy sencilla de usar: • 49 Add(param1. [param3]): el primer parámetro puede ser tanto un simple GMarker. un GInfoWindow o un GInfoWindowTabs como un listado genérico de ellos.2.Marker Manager Para poder manejar cientos de iconos a la vez y además poder asignarles un rango de zoom. podríamos añadir un icono que sólo fuera visible a partir de un nivel de zoom = 2. Por ejemplo.aspx.1 – 04/12/2008 . 3).0. Recordemos que los niveles de zoom van del 0 al 17. no tenemos más que usar el MarkerManager.LargeMapControl)). En nuestro ejemplo. MarkerManager mManager = new MarkerManager().Add(new GControl(GControl. 3).Subgurim. param2.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GoogleMaps.NET – Versión: 3.cs GMap1. El segundo parámetro indica el nivel mínimo de zoom y el tercero (opcional) indica el máximo. A cada GMarker se le puede añadir un evento con GListener. y luego añadir diez marcadores que sólo fueran visibles entre el nivel de zoom 6 y el 8. se le ha asignado un evento "onclick" que alerta del orden en que ha sido creado. 3)). a cada uno de los diez marcadores creados aleatoriamente.preBuilt. Code.

Event.0 .point + new GLatLng(ir1. Random r = new Random(). GMap1.1.NET – Versión: 3. ir2 = (double)r.Add(mks.Next(40) / 20. mManager. } for (int i = 0. "function(){alert('" + i + "').Next(40) / 20. GInfoWindow window = new GInfoWindow(mkr. ir2)). GMarker mkr.Add(window).1 – 04/12/2008 . GListener. i++) { double ir1 = (double)r. List<GMarker> mks = new List<GMarker>().ID. i < 5. 8).0 .0.Subgurim. i. i < 10. 7.0 . mkr = new GMarker(m1. i++) { ir1 = (double)r. double ir2 = (double)r. 8).0.2.Next(40) / 10.mManager.Next(40) / 10. mks.1. List<GInfoWindow> iws = new List<GInfoWindow>(). iws.Add(iws.0.Add(new GListener(mkr. } mManager. GMap1.ToString()). 2). double ir1. 50 GoogleMaps.Add(mkr).Add(m1. ir2)).point + new GLatLng(ir1.2. mkr = new GMarker(m1. ir2.click.2.markerManager = mManager.}")).0 . for (int i = 0. 6.

"hybrid" y "terrain".1 – 04/12/2008 . son exactamente iguales a las del GMap.NET – Versión: 3. "satellite". El modo de trabajar con el Static Map es muy parecido al que tenemos con el GMap normal.aspx <cc1:StaticGMap ID="StaticGMap1" runat="server" Width="500" Height="500" Language="en" format="png32" /> GoogleMaps. Height. puede que nos interese usar el Static Map.2. "mobile". De hecho gran parte de propiedades con la GoogleKey. Code. Width. Sus propiedades diferentes más importantes son: • • • • 51 mapType: enum del tipo MapType enum que nos permetirá elegir el tipo de mapa entre "roadmap". El resultado será una imagen con el formato que decidamos (gif.Static Map En caso de querer un mapa muy sencillo con iconos estáticos y poco más. Al Static Map le podemos añadir un un StaticMarker (el equivalente al GMarker) y un StaticPath equivalente al GPolyline usando los métodos "addStaticGMarker" y "addStaticPath".Subgurim. la CommercialKey. Alt: define el Alt normal del element "img" de HTML. etc. jpg o png) span: permite definir la anchura que abarca el mapa en grados (GLatLng). format: enum del tipo FormatEnum que nos permitirá decidir el formato de la imagen (gif.0. Usado junto con Width y Height evita usar el zoom. jpg o png) y sobre la que no podrá realizarse ningún tipo de interacción.

StaticGMarker staticGMarker = new StaticGMarker(latlngAux.points. sizeEnumLength). path. iLng++.points.Add(new GLatLng(41. color.aspx. StaticPath path = new StaticPath().ColorEnum)randomColor. -4)). path.weight = 5. path.SizeEnum)randomSize. int randomSize = r.Code. Random r = new Random(). 80). path.4. } //StaticGMap1. 0. path.4.points. double lngStep = 0. string msg = "Subgurim Google Maps".alpha = 150. -5)). int iLng = 0. } GLatLng latlngAux = latLng + new GLatLng(latStep * iLat + r. StaticGMarker. int randomColor = r. int sizeEnumLength = 3. int colorEnumLength = 11.ColorEnum color = (StaticGMarker. path. StaticGMarker. lngStep * iLn g).Next(colorEnumLength). -7). path. -2)).SizeEnum size = (StaticGMarker.Next(2.GZoom = 5. StaticGMap1.points.Subgurim. StaticGMap1. 52 int iLat = 0. double latStep = -1.cs GLatLng latLng = new GLatLng(41. c).Add(new GLatLng(39. foreach (char c in msg) { if (c == ' ') { iLat++.addStaticPath(path).colorNet = Color.FromArgb(255.NextDouble() * 0.1 – 04/12/2008 .Add(new GLatLng(41.addStaticGMarker(staticGMarker).2.Add(new GLatLng(40. continue.NET – Versión: 3. GoogleMaps. size.0. -4)).

Comparte muchas de las características del Google Maps normal.0. pero las muestra al "modo Google Earth".aspx <cc1:GEarthMap ID="GEarthMap1" runat="server" Height="400" /> GoogleMaps.2. Para su visualización requiere un plugin fácilmente instalable.GoogleEarth Map Se define como el "Google Earth" para la Web.Subgurim.1 – 04/12/2008 .NET – Versión: 3. 53 Code.

exceptuando el mapType que es del tipo GMarsMapType. GoogleMaps.NET – Versión: 3. 54 Code.Subgurim.aspx <cc1:GMarsMap ID="GMarsMap1" runat="server" /> Code.aspx.MapTypeControl)).addControl(new GControl(GControl.1 – 04/12/2008 .0.preBuilt.2.Mars Map Muestra el planeta Marte y se usa exactamente igual que el GMap.cs GMarsMap1.

Subgurim.2.1 – 04/12/2008 .0.cs GMoonMap1.MapTypeControl)).NET – Versión: 3.preBuilt.addControl(new GControl(GControl. exceptuando el mapType que es del tipo GMoonMapType. GoogleMaps.aspx.Moon Map Muestra la Luna y se usa exactamente igual que el GMap. 55 Code.aspx <cc1:GMoonMap ID="GMoonMap1" runat="server" /> Code.

2.Subgurim.0. 56 Code.1 – 04/12/2008 .aspx <cc1:GSkyMap ID="GSkyMap1" runat="server" /> GoogleMaps.NET – Versión: 3.Sky Map Muestra el cielo y se usa exactamente igual que el GMap. exceptuando el mapType que es del tipo GSkyMapType.

Se trata de un template que define la URL de la imagen a la que GoogleMaps va a llamar y será la que debéis gestionar. new GLatLng(90. new GLatLngBounds(new GLatLng(-90. -122. "©2008 Subgurim")). Y es la longitud y Z es el zoom.0.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.png Donde X es la latitud. Su uso es muy sencillo y vale seguir el ejemplo para entenderlo. GCopyrightCollection.Add(new GCopyright("Demo".1 – 04/12/2008 . GTileLayerOptions tileLayerOptions = new GTileLayerOptions(). longitud y zoom en la que estemos.png 57 Code.1419).setCenter(new GLatLng(37.aspx. Utilizaremos las clases GCopyright.Custom Maps Con los CustomMaps podremos definir las imágenes que mostrará el control de Google en base a la latitud. myCopyright. 13).2. El elemento más importante es la correcta definición de la propiedad tileUrlTemplate del GTileLayerOptions. GTileLayer y GCustomMapType. 0. GCopyrightCollection myCopyright = new GCopyrightCollection("© ").Subgurim.cs GMap1. GTileLayerOptions. 180)).NET – Versión: 3. Un ejemplo sería: http://host/tile?x=3&y=27&z=5. -180). Tiene la siguiente estructura: http://host/tile?x={X}&y={Y}&z={Z}.4419. GoogleMaps.

new GMercatorProject ion(13).NET – Versión: 3. tileLayerOptions). 58 GoogleMaps.tileLayerOptions.com/apis/maps/documentation/exam ples/include/tile_crosshairs.1 – 04/12/2008 .0.google. 10.Add(customMapType).2. GCustomMapType customMapType = new GCustomMapType(tilelayer.Subgurim. "Subgurim"). GTileLayer tilelayer = new GTileLayer(myCopyright. 10. GMap1.png".tileUrlTemplate = "http://code.

Algunos elementos como la GoogleKey. yaw o pitch. el Width. así como las características de la cámara.Subgurim. Sin embargo su uso sigue la misma filosofía del GMaps. Con el GStreetViewPanorama conseguimos el modo StreetView.aspx <cc1:GStreetviewPanorama ID="GStreetviewPanorama1" runat="server" /> Code. GStreetviewListener zoomlistener = new GStreetviewListener( GStreetviewPanorama1. }").GMap_Id. 1)). GStreetviewListener.zoomchanged. como cambio de zoom. Lo elementos principales del GStreetViewPanorama son: • 59 GStreetviewPanoramaOptions: con el que podremos definir las coordenadas en que se abrirá la Street View.GStreetViewPanorama El GStreetViewPanorama es un control diferente al GMaps y por tanto con muchas características distintas.0.aspx. GStreetviewListener: con el que manejaremos los diferentes eventos. Code.StreetviewPanoramaOptions = new GStreetviewPanoramaOptions(ne w GPov(-180. pero muchos otros son totalmente diferentes. GoogleMaps. se comparten con el GMaps.elemento GPov.Event.cs GStreetviewPanorama1.1 – 04/12/2008 . que define el zoom.2. -15. etc. el yaw (ángulo respecto al norte) y el pitch (ángulo respecto a la horizontal).NET – Versión: 3. "function(zoom) { alert('Zoom changed to ' + zoom). el Height. la CommercialKey.

}").GMap_Id. GStreetviewListener.Event. GStreetviewPanorama1.yawchanged.Add(zoomlistener).Subgurim.pitchchanged. GStreetviewListener pitchlistener = new GStreetviewListener( GStreetviewPanorama1. GStreetviewPanorama1.Event. "function(pitch) { alert('Pitch changed to ' + pitch).1 – 04/12/2008 .NET – Versión: 3.GMap_Id.GStreetviewListener yawlistener = new GStreetviewListener( GStreetviewPanorama1.2.0. }").Add(yawlistener).Add(pitchlistener). "function(yaw) { alert('Yaw changed to ' + yaw). GoogleMaps. GStreetviewListener. 60 GStreetviewPanorama1.

Por ejemplo "click". podemos usar el enumerado Event handler: podemos crear una función al vuelo o usar una función javascript que hayamos hecho previamente (ver el ejemplo. my_sEvent: evento que vamos a capturar.aspx <script type="text/javascript">> function alertame() { alert('Quedas alertado').Eventos Hasta el momento hemos ido utilizando eventos en varios ejemplos de forma totalmente automática. Para no tener que saberse todos los eventos posibles de memoria. Puede ser el propio mapa.0.Subgurim. "moveend". etc. Code.Subgurim. Con GoogleMaps. cuando se arrastra el mapa salta el evento "moveend" que captura las coordenadas del centro de la pantalla y las muestra en el cuadro de texto.1 – 04/12/2008 .NET – Versión: 3. la versatilidad es absoluta pues mediante los Listeners podemos configurar eventos de cualquier tipo para que hagan saltar nuestras propias funciones javascript. } </script> GoogleMaps. entra por medio el evento "click". pues se usan las dos opciones). Del mismo modo. Por ejemplo.NET. Ésta dispone de tres propiedades: • • 61 • source: el elemento que va a producir el evento. un polyline o un polygon. cuando hacemos clic sobre un marker y se muestra una ventana. "drag".2. Para asignar eventos se trabaja con la clase GListener. cuando utilizamos el TextualCoordinatesControl. un icono.

GListener. 3)). GPolygon polygon = new GPolygon(). point) {").aspx.addListener(new GListener(GMap1. GMap1.Satellite).Event.0. 62 GoogleMaps. sb.Append(listener.ID.Append("alert(overlay.}"). 5.ToString()). GListener. polygon. polygon.Subgurim.click.setCenter(latlng.draggable = true.close(). sb.<cc1:GMap ID="GMap1" runat="server" /> Code. GListener.2).PolygonID.addListener(listener). GMarker marker = new GMarker(latlng.ID. listener = new GListener(mkr.Text. "alertame").GMap_Id)). "function(point) {alert(point). "function() {alert('I Love Elvis :9P'). -3.id). "alertame").javascript_GLatLng = "point".Append("if (overlay){").addListener(listener2).addListener(listener3). sb.Add(latlng + new GLatLng(4.Event.GTypes.moveend. mOpts). GMap1.Add(latlng + new GLatLng(1. GListener. GMapType.}")). GListener listener3 = new GListener(polygon. sb.StringBuilder sb = new System. sb. 1)).StringBuilder().click.Append("else{").Event.Append(mkr. GMap1.Event. GListener listener = new GListener(marker.Add(polygon). mkr. 4)).ToString()).Text.options = mOpts. GMap1. polygon. GMarker mkr = new GMarker().Event.2. polygon.cs GLatLng latlng = new GLatLng(41.GMap_Id. mkr. GListener listener2 = new GListener(GMap1.GMap_Id. GMap1.ToString(GMap1.1 – 04/12/2008 . sb. GMap1. mOpts. sb.Append("function(overlay.addGMarker(marker). GMarkerOptions mOpts = new GMarkerOptions(). System.Add(latlng + new GLatLng(2.Append("}").dragend.NET – Versión: 3. GMap1. sb.Append("}").Append("}"). sb. GListener.dragend."). sb.

podrás viajar desde el mapa al servidor mediante AJAX. o bounds: devuelve el GLatLngBounds (coordenadas noreste y sudoeste) del mapa en el momento se ha producido el evento. Algunos eventos disponen de unos argumentos especiales.Subgurim. el teclado. MarkerClick: se lanza cuando hacemos click sobre un marker/icono. DragStart: se lanza cuando estamos empezando a arrastrar el mapa con el ratón.Eventos de Servidor Con los eventos de servidor. ServerEvent: hemos de configurarlo manualmente y es capaz de recoger cualquier tipo de evento que le pidamos. Vemos también que hay dos parámetros en la función: • • 63 s: es la fuente (source) que ha producido el evento. Le dedicamos un apartado especial. Nos indica quién ha lanzado el eventos. de modo que podemos usarlo para ejecutar javascript. las funciones que responden al evento devuelven código en javascript.2. El común denominador de todos los argumentos es: o who: coincide con la fuente anteriormente descrita. MoveStart: se lanza cuando se comienza un movimiento del mapa. o mapType: devuelve el tipo de mapa en que se encuentra.0. o zoom. La utilización de los eventos de servidor es la misma que la de cualquier control Web ASP. Recordamos que un movimiento puede producirlo el ratón al coger y arrastrar.1 – 04/12/2008 . o el control "preBuilt" de movimiento. etc). nos dará el centro del mapa o el punto en que hayamos lanzado el evento (por ejemplo un click) o center: nos dará SIEMPRE el centro del mapa en el momento se ha lanzado el evento. o map: nos da SIEMPRE el identificador javascript del mapa. y se lanzará cuando hagamos click sobre el mapa. e: son los argumentos de los que disponemos. Por defecto están desactivados. que a continuación indicaremos.NET – Versión: 3. o point: según el evento lanzado. MoveEnd: se lanza cuando se termine un movimiento del mapa. Habitualmente es el identificador del mapa. GoogleMaps. A continuación se listan los eventos de servidor con los que podrás trabajar: • • • • • • • • Click: es el evento por defecto. Hay que activarlos explícitamente haciendo enableServerEvents = true Como se puede comprobar en el ejemplo. MapTypeChanged: se lanza cuando se cambia la vista del mapa.NET. Su argumento incluye el nuevo tipo de mapa. DragEnd: se lanza cuando acabamos de arrastrar el mapa con el ratón. añadir un infoWindows. Será el que usemos si queremos aplicar algún cambio al mapa (añadir un icono.

1 – 04/12/2008 .• ZoomEnd: se lanza cuando acabamos de hacer un zoom.cs protected void Page_Load(object sender.MapTypeControl)). 64 Code.Subgurim.addControl(new GControl(GControl. GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.2. Haciendo uso de la propiedad "ajaxUpdateProgressMessage" puede definirse el mensaje que queremos que aparezca mientras si realiza el viaje cliente-servidor-cliente.NET – Versión: 3.LargeMapControl)).aspx.0. EventArgs e) { if (!Page. GoogleMaps.preBuilt.point). Su argumento incluye el viejo zoom del que venimos y el nuevo zoom al que hemos ido. } } protected string GMap1_Click(object s.addControl(new GControl(GControl. GMap1.preBuilt.IsPostBack) { GMap1.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnMarkerClick="GMap1_MarkerClick" OnZoomEnd="GMap1_ZoomEnd" OnMapTypeChanged="GMap1_MapTypeChanged" OnClick="GMap1_Click" OnDragEnd="GMap1_DragEnd" OnDragStart="GMap1_DragStart" OnMoveEnd="GMap1_MoveEnd" OnMoveStart="GMap1_MoveStart" /> <div id="messages1"></div> <div id="messages2"></div> Code.

GAjaxServerEventArgs e) { return string.getSouthWest(). GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.oldLevel." + DateTime.ToString(). return window.Format(@" <b>GLatLngBounds</b><br /> SW = {0}<br/> NE = {1} ".point).ToString()) .NET – Versión: 3.getElementById('messages1').Now). } protected string GMap1_MarkerClick(object s.point.Now. e." + DateTime.getNorthEast().Format("alert('MarkerClick: {0} .innerHTML= 'MoveEnd at " + e.ToString().{2}')". } protected string GMap1_DragStart(object s. e. } protected string GMap1_DragEnd(object s.map).ToString(e.ToString().Now. } protected string GMap1_MoveEnd(object s. false).getElementById('messages2'). false).bounds. GAjaxServerEventArgs e) { GMarker marker = new GMarker(e. GoogleMaps.point). "DragEnd . GAjaxServerEventArgs e) { return "document.ToString() + " .Format("alert('oldLevel/newLevel: {0}/{1} . e. string.0.map). return window. GAjaxServerEventZoomArgs e) { return string.ToString() + " . GInfoWindow window = new GInfoWindow(marker.ToString() + "'. "DragStart .map). GInfoWindow window = new GInfoWindow(marker. DateTime. GAjaxServerEventArgs e) { return "document.innerHTML= 'MoveStart at " + e.Subgurim.newLevel.ToString(e. return window.2.point.Now).Now.".bounds.GInfoWindow window = new GInfoWindow(marker. } protected string GMap1_MoveStart(object s.point.ToString(e.ToString() + "'. } protected string GMap1_ZoomEnd(object s.".Now.1 – 04/12/2008 65 ." + DateTime. true). e." + DateTime.ToString(). e.{1}')". DateTime.

NET – Versión: 3. } 66 GoogleMaps.Subgurim. e.} protected string GMap1_MapTypeChanged(object s.ToString()).Format("alert('{0}')".1 – 04/12/2008 .2. GAjaxServerEventMapArgs e) { return string.0.mapType.

NET – Versión: 3. Como vemos en el ejemplo. Finalmente hay que llamar a la función 'send()' y la información se envía a servidor. 2. debemos manejar el evento ServerEvent. GoogleMaps. En el ejemplo vemos como definimos dos eventos: "Click" y "InfoWindowClose".Eventos de Servidor 2 Si bien es cierto que los eventos de servidor predefinidos son los más comunes. puede darse el caso que queramos hacer algo diferente. un modo sencillo de crear el javascript es usando addListener. o lo que sea. tal y como se hace con el resto de eventos. maneja un evento de los no-predefinidos. ya hemos visto que este evento era uno de los predefinidos. Por ejemplo manejar un evento no-predefinido. distinguir entre varios eventos diferentes eventArgs: es un array de string que contiene todos los argumentos que hemos añadido en javascript. o redefinir un evento predefinido del que queremos unos datos diferentes. Ahí dispondremos de GAjaxServerEventOtherArgs en la que podemos encontrar 2 propiedades (además de las comunes "who" y "point"): • 67 • eventName: string que contiene el nombre del evento que nosotros mismo hemos definido. como en el ejemplo.2..0.Subgurim. En cuanto a "InfoWindowClose"..Servidor En el servidor. pero aquí hemos añadido un argumento que no teníamos antes: el tamaño del mapa. deberemos seguir los siguientes pasos: 1. Vemos pues que podemos manejar cualquier evento que produzca el mapa. Es muy útil para.1 – 04/12/2008 . Para hacerlo funcionar. Para este caso tenemos el evento ServerEvent. En los ejemplos vemos que usar la clase 'serverEvent' es muy sencillo. los markers. pues no hay más que inicializarla con el nombre que queramos darle al evento (eventName) y el identificador del mapa (GMap_Id) en el caso de que haya más de un mapa en una misma página e ir añadiéndole tantos argumentos como queramos. El primero maneja el evento click del mapa.Javascript Debemos añadir un javascript y usar la clase javascript 'serverEvent' para mandar la información a servidor.

GMap_Id.68 Code.addListener(new GListener(GMap1.0. point) {{ if (!point) return. string.Format(@" function(overlay.click.cs protected void Page_Load(object sender.Subgurim. EventArgs e) { if (!Page.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnServerEvent="GMap1_ServerEvent" /> Code.NET – Versión: 3. GoogleMaps. var ev = new serverEvent('Click'.aspx.1 – 04/12/2008 .Event. GListener.2. {0}).IsPostBack) { GMap1.

CultureInfo("en-US".Globalization. Close Me.NET – Versión: 3.eventName) { case "Click": GLatLng latlng = new GLatLng( Convert.GMap_Id))). e. string. break. } 69 GoogleMaps.getSize().{3}')".GMap_Id.who). false)).lng()).send().ToString(e.{2} . GMap1. } } protected string GMap1_ServerEvent(object s.". false))). e. ev.ev. e.eventArgs[2]. GMap1.addArg(point.2. GMap1. }} ". }} ".addArg('My Argument'). GAjaxServerEventOtherArgs e) { string js = string. } return js.addArg(point. {0}).CultureInfo("en-US". e. ev.Event. e. case "InfoWindowClose": js = string. ev. new System.eventArgs[1])). switch (e. break. ev.eventArgs[0].height). Convert.Format ("alert('{0}: {1} .eventArgs[0].Subgurim.GMap_Id))). new System.ToDouble(e.Globalization. DateTime.addArg({0}.Format(@" function() {{ var ev = new serverEvent('InfoWindowClose'.eventArgs[3].{1}).send().Now).infowindowclose.0. js = window. GInfoWindow window = new GInfoWindow(latlng. ev.addArg({0}.ToDouble(e. GListener.Empty.lat()). ev.getSize().point.Format("Window Size (px): ({0}.eventName. string.addListener(new GListener(GMap1.1 – 04/12/2008 .width).

Sin embargo. enableServerEvents debe estar activado).IsPostBack) { this.setupMap().cs protected void Page_Load(object sender.0. los serverEvent nativos son muchísimo más rápidos y eficientes. GoogleMaps. Además.aspx.NET – Versión: 3. funciona muy bien usándolo dentro de un UpdatePanel. Para ello no hay más que indicarlo con serverEventsType="AspNetPostBack" (Como siempre. Una de las diferencias más importantes es que con los serverEvent nativos sólo puede interactuar con el mapa devolviendo un string con Javascript.2. etc. con lo que se recomienda el uso de estos siempre que sea posible.aspx <cc1:GMap ID="GMap1" runat="server" serverEventsType="AspNetPostBack" enableServerEvents="true" OnClick="GMap1_Click" OnMarkerClick="GMap2_MarkerClick" /> Code. EventArgs e) { if (!Page. También podemos acceder a variables de sesión. Viewstate.1 – 04/12/2008 .ASP.NET Postback Alternativamente a los serverEvents nativos del control GMaps.Subgurim. Usando el PostBack podemos devolver ese Javascript.NET tradicional. podemos forzar a que estos ejecuten un PostBack ASP. 70 Code. pero además podemos interactuar directamente con el mapa (ver ejemplo).

GMap2. return string.GZoom = 1. 10).NET – Versión: 3. GMap2. GMap2.GCenter = latLng. "Clicked").Subgurim.GCenter = latLng.1 – 04/12/2008 . GInfoWindow window = new GInfoWindow(e. GAjaxServerEventArgs e) { GLatLng latLng = new GLatLng(40. GMap2. } 71 GoogleMaps.point.0.Empty.Add(window). GMarker marker = new GMarker(latLng). return string.GZoom = 6. GMap2.10). GAjaxServerEventArgs e) { GMap2.} if (GMap2.IsAjaxPostBack) { // GMaps Ajax PostBack } } private void setupMap() { GLatLng latLng = new GLatLng(40.2.Add(marker). GMap2.resetInfoWindows(). } protected string GMap2_MarkerClick(object s. } protected string GMap2_Click(object s.Empty.

borrar el último icono añadido o borrar todos los iconos que haya. Es decir.0.Text. como por ejemplo el del GMarker.cs System. Lo veremos mejor en el ejemplo. El CustomJavascript sirve para manejar eventos y modificar el mapa tras los eventos. con el CustomJavascript añadiremos el javascript que se ejecutará como respuesta (por ejemplo) al click de un botón. Esto es.StringBuilder(). Code.aspx.setCenter(center). 5).Custom Javascript Utilizaremos el "CustomJavascript" para añadir nuestro propio javascript.Text.Subgurim.NET – Versión: 3. el javascript añadido nunca se ejecutará al cargarse el mapa: para eso tenemos el CustomInsideJavascript 72 Para ello deberemos conocer el javascript que propone la API de Google o utilizar el método "ToString()" de elementos de nuestro control. GLatLng center = new GLatLng(44. GoogleMaps.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Añadir icono" onclick="subgurim_Add()" /> <input type="button" id="Button2" value="Borrar último icono" onclick="subgurim_Delete()" /> <input type="button" id="Button3" value="Borrar todos los iconos" onclick="subgurim_Remove()" /> Code.2.StringBuilder sb = new System. En éste podemos añadir iconos al centro del mapa. GMap1.

NET – Versión: 3. sb.AppendFormat("{0}. sb. sb. sb.ToString(GMap1. sb. sb.").Append("var active.GMap_Id)).Append("}").Append("function subgurim_Remove()").Append("function subgurim_Add()").ID).Append(marker. 73 GoogleMaps. sb.Append("}"). sb.GMap_Id).".". sb.GMap_Id + ".ToString()).AppendFormat("{0}. sb.sb.").Append("{"). marker.removeOverlay(active). sb. GMap1. GMarker marker = new GMarker(GMap1."). GMap1.Add(sb.Append("function subgurim_Delete()").Append("}").Append("{"). sb.0.getCenter()").GMap_Id).clearOverlays().Append("active = false.Append("active = false.". GMap1.Append("{"). sb.1 – 04/12/2008 .Subgurim.2.AppendFormat("active = {0}. sb. sb.

Subgurim.NET – Versión: 3.0. el CustomInsideJavascript añadido no podrá ser accedido por eventos como. el click de un botón. Mediante el CustomJavascript creamos una función que añadirá iconos en ubicaciones aleatorios. utilizamos el CustomInsideJavascript para llamar por primera (y única) vez al código. Como os podéis imaginar.1 – 04/12/2008 .Custom Inside Javascript Utilizaremos el "CustomInsideJavascript" para añadir nuestro propio javascript. Code.aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Añadir icono" onclick="subgurim_Add()" /> <input type="button" id="Button2" value="Borrar último icono" onclick="subgurim_Delete()" /> <input type="button" id="Button3" value="Borrar todos los iconos" onclick="subgurim_Remove()" /> GoogleMaps. El CustomInsideJavascript sirve para añadir javascript que se ejecutará en la carga del mapa.2. pero como éste no puede iniciar el evento. Nuestro ejemplo es muy sencillo. Para eso tenemos el CustomJavascript 74 Para ello deberemos conocer el javascript que propone la API de Google o utilizar el método "ToString()" de elementos de nuestro control. la metodología seguida en el ejemplo supone el uso típico del CustomInsideJavascript: llamar a una función CustomJavascript en el momento se carga el mapa. Es decir. como por ejemplo el del GMarker. por ejemplo. y nos permitimos combinar el CustomInsideJavascript con el CustomJavascript.

GMap1.Text.lng() + Math. GLatLng center = new GLatLng(44. 5).cs System.GMap_Id)).Append("var max = 10.NET – Versión: 3. GMarker marker = new GMarker( string. //GMap1. sb. GMap1. 75 GoogleMaps.getCenter(). sb.5.Subgurim. 8). GMap1. true). {0}.Add("addRandom(). sb.1 – 04/12/2008 ."). sb. 1000)").0.StringBuilder().Append("function addRandom()").addCustomInsideJavascript("addRandom().".0.aspx.setCenter(center. sb.5)".ToString(GMap1.Format("new GLatLng({0}.Code.Append("setTimeout('addRandom()'.Add(sb.Append(marker.getCenter(). GMap1.GMap_Id)).Append("}"). sb.Text.").0.Append("{").random() .random() .StringBuilder sb = new System.lat() + Math.ToString()).Append("if (max-. sb.> 0)").2.

my_GMap1subgurim_Id.22)). minimizando a su vez la necesidad de javascript.2.openInfoWindowHtml('Ejemplo de <b>infoWindow</b>'). Usando el método ToString GInfoWindow window = new GInfoWindow( new GMarker(new GLatLng(10.Subgurim. GInfoWindow. en el propio código fuente del control.addOverlay(marker_subgurim_Id). si quisiéramos recrear el infoWindow con icono del ejemplo "InfoWindow con icono". Por último.Subgurim. 22)).Subgurim.0.). en ocasiones se usa el método ToString de varios componentes del GoogleMaps.NET disponen del método ToString.Subgurim. es extremadamente importante reseñar que a los métodos ToString hay que pasarles como parámetro el identificador de la fuente a la que se asignan. etc.mouseover). Como habitualmente se trata del propio mapa de Google.GMap_Id. De hecho. "mouseover". nos ahorramos aprender el javascript correspondiente. lo que conseguimos con el método ToString de cada elemento es escribir el equivalente javascript marcado por la API oficial de Google. 76 Como a la hora de utilizar funcionalidades del GoogleMaps.NET como los "eventos de cliente".addListener(marker_subgurim_Id. Absolutamente todos los elementos que se puedan encontrar en el GoogleMaps.. y esto es muy importante. GLatLng. y su funcionalidad es siempre la misma: traducir a javascript lo que significan.NET – Versión: 3. En líneas generales. evita tener que averigurar el identificador javascript de cada elemento.ToString(GMap1.1 – 04/12/2008 .}). suele ser GMap1. "eventos de servidor" o "custom javascript" suele ser necesario el uso del javascript correcto. hacemos uso de IntelliSense (por lo que escribir código es muy rápido) y evitamos tener que ir averiguando los identificadores javascript de los objetos. GEvent. se usa continuamente. tenemos dos opciones: Usando javascript var marker_subgurim_Id = new GMarker(new GLatLng(10.NET (GMarker. Por ejemplo. el método ToString de cada elemento evitará tener que aprender el javascript de la API de Google.ToString Como habéis visto en varios ejemplos. my_GMap1subgurim_Id. GListener. true. GoogleMaps. "Ejemplo de <b>infoWindow</b>".2. Además. Como vemos. string resultado = window.GMap_Id)..Event.2. function() {marker_subgurim_Id.openInfoWindowHtml('Ejemplo de <b>infoWindow</b>').

El ejemplo es totalmente clarificador (clickar sobre el mapa): 77 Code. Subgurim.map).point != e.point).2. // GMarker and GInfoWindow GMarker marker = new GMarker(e.center) { GoogleMaps. markers. // Polylines if (e. Basta con inicializar la clase GMap con el GMap_Id. facilitamos cosas como el javascript que vamos a devolver en un server event.addMovement(1000.aspx.0. gmap.ToString Con el método ToString de la clase GMap se puede recoger el javascript que va a producir nuestro mapa.GMap. etc. //gmap.addMovement(1000. "Cool!!".aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="True" OnClick="GMap1_Click" /> Code.Add(window).point). GInfoWindow window = new GInfoWindow(marker.Subgurim. // Movement //gmap. e.1 – 04/12/2008 . 38)). y luego podemos añadirle todo lo que queramos: controles.Controles. e.GAjaxServerEventArgs e) { GMap gmap = new GMap(e. true).point + new GLatLng(25. Gracias a esto.NET – Versión: 3.cs protected string GMap1_Click(object s. infowindows.

List points = new List(); points.Add(e.center); points.Add(e.point); gmap.addPolyline(new GPolyline(points, Color.Yellow)); } // Controls gmap.addControl(new GControl(GControl.extraBuilt.MarkCenter)); gmap.addControl(new GControl(GControl.preBuilt.LargeMapControl)); gmap.addControl(new GControl(GControl.preBuilt.MapTypeControl)); // Maybe... anything? ;) gmap.enableScrollWheelZoom = false; gmap.mapType = GMapType.GTypes.Satellite; return gmap.ToString(); }

78

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

getGMapElementById
getGMapElementById... mmm, suena bien, ¿no? Además, funciona tal y como suena: recoge el identificador javascript de las elementos que se han añadido al mapa (normalmente markers), de modo que el límite de su uso lo pone vuestra imaginación ;) Puede accederse tanto mediante un método estático de la clase GMap, como mediante un método de vuestra instancia del control. Como siempre, este sencillo ejemplo es esclarecedor (clickar sobre el mapa y sobre el icono):

79

Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="True" OnClick="GMap1_Click" OnMarkerClick="GMap1_MarkerClick" /> Code.aspx.cs protected string GMap1_Click(object s, GAjaxServerEventArgs e) { return new GMarker(e.point).ToString(e.map); } protected string GMap1_MarkerClick(object s, GAjaxServerEventArgs e) { string markerID = GMap1.getGMapElementById(e.who); string js = string.Format(@" if ({0}.isHidden()) {0}.show() else GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

{0}.hide(); ", markerID); js += string.Format("alert('point: ' + {0}.getPoint() + ' - icon: ' + {0}.getIcon().image);", markerID); return js; }

80

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Subgurim. que podemos utilizar siempre que queramos en lado de servidor (aunque en el serverEvent sea aconsejable usar e.NET .2. En el ejemplo vemos cómo se utiliza el store en javascript (un evento de cliente). Store es una funcionalidad muy potente que nos permitirá compartir información entre cliente. string>. servidor y los serverEvents. en un serverEvent y en ASP.NET: • 81 • • Javascript: Creamos el objeto Store de un modo similar a éste: var store = new Store('{0}_Store'). A la varible store le podemos hacer un "Set(key. GoogleMaps.NET – Versión: 3. string> normal de ASP.Store Para trabajar con la clase Store es imprescindible activar la propiedad "enableStore". con una "key" y un "value". ASP. Funciona como un Dictionary<string. podemos utilizar el GAjaxServerEventArgs llamando a e. value)" y un "Get(Key)". e.1 – 04/12/2008 .store. serverEvents: cuando estamos en un serverEvent.NET: cada instancia de GMaps tiene una propiedad Store.store es un Dictionary<string.0. Suele usarse en los eventos de cliente.store).

EventArgs e) { if (!Page. GMap2. string.zoomend.Subgurim. } } protected void Page_Load(object sender.NET – Versión: 3. }} ". newZoom) {{ var store = new Store('{0}_Store').Format(@" function(oldZoom.GMap_Id))). GMap2. oldZoom + '-' + newZoom). public static int i { get { return _i++. GListener.random(). } GoogleMaps.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" enableStore="true" OnClick="GMap1_Click" serverEventsType="AspNetPostBack" /> <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" enableStore="true" OnClick="GMap1_Click" /> Code.addListener(new GListener(GMap2.aspx.Set(Math.preBuilt.0.cs private static int _i = 0.SmallZoomControl)).Event.82 Code.addControl(new GControl(GControl.GMap_Id.1 – 04/12/2008 .2.IsPostBack) { GMap2. store.

} protected string GMap1_Click(object s.2.NET – Versión: 3.ToString()] = DateTime.Store.ToString()).Now. GAjaxServerEventArgs e) { e.store.ToString(). e.Format("alert('{0} Store items: {1}')". e. } 83 GoogleMaps.store[i.Now.GMap1.ToString().1 – 04/12/2008 .Count).map. Store c = GMap1.Subgurim. DateTime. return string.0.Add(i.Store.

buttonText: el texto del botón.1 – 04/12/2008 . Se puede incluir HTML.2..Subgurim. Madrid". o mapBlowUp: muestra un mapBlowUp.google.NET nos devolverá el evento que hayamos seleccionado en la ubicación que nos dé como resultado. Por defecto es "GeoCode". Se compone de tres elementos: o infowindow: muestra un infoWindow con la dirección completa como texto. Por defecto es true.. "Gibraltar" o "Universidad Politécnica de Valencia") y GoogleMaps. showErrorCode: en caso de ocurrir un error. baseCountryCode: indicando el código del país obtendremos el resultado en base a su cercanía con éste. Es la elegida por defecto. usaremos la clase con ese mismo nombre: GeoCoding. openedOnLoad: es aplicable si elegimos mostrar un infoWindow o un mapBlowUp.Subgurim. estarán abiertos por defecto o deberemos presionar un icono para el caso..0. La clase GeoCoding tiene 5 propiedades con los que podemos personalizar el resultado: 84 • • • • • • • • Show: un enumerador con el que elegir el evento que se producirá cuando se encuentre la ubicación que buscamos. errorText: es el mensaje que aparecerá en una ventana de alerta si no se encuentra lo que se busca.com/apis/maps/documentation/reference. Por defecto "OK". viewport: usando GLatLngBounds marca la zona de referencia sobre la que se quiere obtener el resultado. que como sabéis es una ventana emergente mostrando el lugar buscado con zoom. muestra su código. infoText: el texto previo al cuadro de texto. un ejemplo vale más que mil palabras! Para hacer uso del GeoCoding.GeoCoding ¿Qué es el GeoCoding? Con el GeoCoding buscaremos un sitio (por ejemplo "Las Ventas. o icon: simplemente muestra un icono en la ubicación buscada.html#GGeoStatusCode GoogleMaps. Encontraremos el significado de los códigos de error en http://code. Por defecto vale ":(".NET – Versión: 3. Indica si cuando se muestra el sitio. como siempre.

2.NET – Versión: 3. geoCoding.Subgurim.openedOnLoad = true. geoCoding. */ GMap1. GMap1. geoCoding. GoogleMaps. geoCoding. GMap1.addControl(new GControl(GControl.show = GeoCoding.buttonText = "Buscar".addGeoCode(geoCoding).errorText = "No tá".aspx.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.85 Code. geoCoding.preBuilt. GeoCoding geoCoding = new GeoCoding().LargeMapControl)).infoText = "Buscar GeoCode".ShowEnum.1 – 04/12/2008 .0.addGeoCode(new GeoCoding()).GZoom = 9.infowindow.cs /* Con esto bastaría para que funcionara!!! GMap1.

onIdleCallback: Define una función que se ejecutará cuando la búsqueda no devuelve resultados. G_GOOGLE_BAR_RESULT_LIST_INLINE (por defecto) las muestra en una tabla y G_GOOGLE_BAR_RESULT_LIST_SUPPRESS muestra sólo una con los botones de "anterior . Tan solo hay que añadir la GGoogleBarOptions al mapa y usar las propiedades que se requieran: 86 • • • • • • • • • showOnLoad: Indica si se despliega el cuadro de text de búsqueda. no hay más que hacer clic sobre la lupa situada al lado del icono de Google que aparece en el mapa. resultList: Indica cómo se muestran los resultados de la búsqueda. Por defecto el target es "_Blank". suppressInitialResultSelection: Si está activado (y lo está por defecto) no muestra el primer resultado en el mapa. linkTarget: Indica el "Target" de los enlaces mostrados al hacer la búsqueda. el string HTML generado. onSearchCompleteCallback: Define una función que se ejecutará cuando la búsqueda devuelve resultados. marker: GMarker}.GeoCoding 2 Un modo extremadamente sencillo de ofrecer geocoding es simplemente usando la "GoogleBar" que GoogleMaps ofrece. Se ejecuta antes de mostrar los resultados en pantalla.2.1 – 04/12/2008 . La función tendrás los atributos de la siguiente forma: {result: GlocalSearch.NET – Versión: 3. y debe devolver un string HTML que se mostrará en el info window. suppressZoomToBounds: desactiva el comportamiento por defecto de acercarse a los resultados. Por defecto está desactivado. onGenerateMarkerHtmlCallback: Función que se ejecuta cuando se va a abrir el infowindow con los resultados. y un GlocalSearchResult.0. Una vez activado. GoogleMaps.Subgurim. Los atributos que debe tener la función (por orden) son: un GMarker. onMarkersSetCallback: función que será llamada cuando se termine la creación de los markers en el mapa.siguiente".

87 Code. googleBarOptions.supress. googleBarOptions.Subgurim.showOnLoad = true.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 .". GoogleMaps._blank.aspx. googleBarOptions.onSearchCompleteCallback = "alert('onSearchCompleteCallback').linkTarget = GGoogleBarLinkTargetEnum.".NET – Versión: 3.resultList = GGoogleBarResultListEnum.cs GGoogleBarOptions googleBarOptions = new GGoogleBarOptions().0.onMarkersSetCallback = "alert('onMarkersSetCallback'). googleBarOptions. googleBarOptions.Add(googleBarOptions).2. GMap1.

.code accederemos al mensaje de estado de la búsqueda. necesitaremos el Geocoding avanzado..html#GGeoStatusCode La clase Geocode la hemos estructurado de manera idéntica al XML que nos provee Google. Usarlo es muy sencillo.Subgurim.1 – 04/12/2008 . Estos son los parámetros que podemos pasarle a las funciones: • • • • • Query: lo que estamos buscando. por ejemplo para saber qué error ha ocurrido.).0. Si no lo definimos nos devolverá el tipo Geocode. Lo único que hay que tener en cuenta es que deberemos pasarle como parámetro nuestro Key de la API de Google. kml. json y csv).) [geoCodeRequestes obsoleto desde la versión 3].getGeoCodeRequest(. Podemos compararla con el ejemplo de código que proveemos y veremos que las clases y sus propiedades son análogas al XML: <kml> <Response> <name>1600 amphitheatre mtn view ca</name> <Status> <code>200</code> <request>geocode</request> </Status> GoogleMaps. json y csv). Básicamente consiste en pasarle un lugar como parámetro y recoger toda la información que la API de Google nos provee.outputEnum output: donde indicaremos el tipo de datos que queremos que nos devuelva (xml.. El método estático devuelve dos tipos de datos.google. La definición de los mensajes de estado las encontramos aquí: http://code. Veamos un ejemplo de un XML de Google si buscáramos "1600 amphitheatre mtn view ca". baseCountryCode: indicando el código del país obtendremos el resultado en base a su cercanía con éste. kml. La llamaríamos así: GMap. GeoCode. no hay más que llamar a GMap1.. Hay dos modos de ejecutar esta acción: 88 • • Si tenemos un GMap instanciado en nuestra página.geoCodeRequest(. que no requiere que el GMap esté en la página. Pero también podemos acceder a un método estático.com/apis/maps/documentation/reference. viewport: usando GLatLngBounds marca la zona de referencia sobre la que se quiere obtener el resultado. GoogleKey: sólo necesario en caso de usar los métodos estáticos.2. Por una parte está el Geocode (clase estructurada de manera idéntica al XML que Google nos provee) y por otra un string del que podemos elegir su modo (xml.NET – Versión: 3. Accediendo al campo status.GeoCoding Avanzado Para recoger información detallada del sitio que estamos buscando.

Placemark.AddressDetails.37. CA 94043.AdministrativeArea.Placemark.Country.Subgurim.CountryNameCode: ES geocode.0.AddressDetails.Placemark.accuracy: 4 geocode.AddressDetails.Country.<Placemark> <address> 1600 Amphitheatre Pkwy.Locality.Placemark.SubAdministrativeAreaName: Murcia geocode.PostalCodeNumber: GoogleMaps.Locality.code: 200 geocode.name: San Pedro del Pinatar geocode.0</coordinates> </Point> </Placemark> </Response> </kml> 89 • • • • • • • • • • geocode.Status.Country.PostalCode.SubAdministrativeArea .AddressDetails.AddressDetails.Placemark.SubAdministrativeArea . USA </address> <AddressDetails Accuracy="8"> <Country> <CountryNameCode>US</CountryNameCode> <AdministrativeArea> <AdministrativeAreaName>CA</AdministrativeAreaName> <SubAdministrativeArea> <SubAdministrativeAreaName>Santa Clara</SubAdministrativeAreaName> <Locality> <LocalityName>Mountain View</LocalityName> <Thoroughfare> <ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName> </Thoroughfare> <PostalCode> <PostalCodeNumber>94043</PostalCodeNumber> </PostalCode> </Locality> </SubAdministrativeArea> </AdministrativeArea> </Country> </AddressDetails> <Point> <coordinates>-122.NET – Versión: 3.Status.Country. Mountain View.423021.AdministrativeAreaNa me: Murcia geocode.LocalityName: San Pedro del Pinatar geocode.AdministrativeArea.Placemark.request: geocode geocode. Spain geocode.AdministrativeArea.AddressDetails.Placemark.083739.AdministrativeArea.SubAdministrativeArea .2.address: San Pedro del Pinatar.Country.1 – 04/12/2008 .

Append("</i>: ").• • geocode.-0. GoogleMaps. sb.Status.request).Country.Text. Key).net").AdministrativeArea.Append(geocode. sb. sb.Append("geocode.Text.Placemark. sb.code).Append(geocode.IsNullOrEmpty(tb_Buscar. sb.1 – 04/12/2008 .Append("geocode. System.NET – Versión: 3.ConfigurationManager. if ((null != geocode) && geocode.Append("</i>: ").Append("<li>").2.8350404. sb.Append("geocode.AddressDetails.Configuration.valid) { sb.Status.name).Placemark. sb.Append("</li>"). sb.StringBuilder().Append("</i>: ").code").Append("<ul>"). sb.Append(geocode.coordinates: 37.Thoroughfare.7915859 Code.Append("<i>").Locality. sb.Append("<li>").ThoroughfareName: geocode.aspx.request"). EventArgs e) { if (!string.Append("<i>").Text. GeoCode geocode = GMap.name").StringBuilder sb = new System.Get("googlemaps.aspx <asp:Literal ID="Literal1" runat="server">Buscar una dirección</asp:Literal> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Buscar" OnClick="bt_Buscar_Click" /> 90 <div> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </div> Code.0. sb. sb. sb.cs protected void bt_Buscar_Click(object sender. sb.Append("<li>"). sb. sb.Status.geoCodeRequest(tb_Buscar.Append("<i>").Append("</li>").Text)) { string Key = System.subgurim.SubAdministrativeArea . sb.AppSettings.Subgurim.Status.

Country.Append("<i>").AddressDetails.Placemark.AddressDetails. sb.Locality. sb.Country.Append("geocode.Placemark.Append("<i>").Placemark.Append(geocode.Subgurim. sb.AdministrativeArea.Country. sb.AddressDetails.Append("<li>").Placemark.Append("</i>: ").sb.Append("<li>"). sb.Append("<i>").Placemark.AdministrativeArea.Append("<li>").AdministrativeArea Name). sb.Locality. sb. sb. sb.Placemark.Placemark.Country.Placemark.accuracy).Placemark.CountryNameCode"). sb. sb. sb.Append("<li>").Append("</li>"). GoogleMaps.Append("<i>").Append(geocode. sb. sb.Append("</li>").Append("</i>: "). sb.AddressDetails.SubAdministrative Area.Country.LocalityName").AdministrativeAre aName").Append("geocode.0. sb.SubAdministrative Area.Placemark. sb.Append("<li>").Append("<i>"). sb.Append("</i>: "). sb.NET – Versión: 3.Append("</li>").AddressDetails. sb.Append("</i>: ").Country.Append(geocode.Append(geocode. sb.AdministrativeArea.Append(geocode.Country. sb. sb.AdministrativeArea.Append("geocode.AddressDetails.Append("geocode.AddressDetails.Append("</i>: ").address").SubAdministrative Area.AdministrativeArea.Append(geocode. sb. sb.2.AddressDetails.Country. sb.AddressDetails.Append("</i>: "). sb. sb.Append("</li>").SubAdministrativeAreaName").address).Append("</li>"). sb.Placemark.AdministrativeArea.AddressDetails.SubAdministrativeAreaName).accuracy"). sb.1 – 04/12/2008 91 .Placemark.Append("<i>").Append("geocode.Append("</li>"). sb. sb.LocalityName).Append("geocode.Append("<li>"). sb. sb.SubAdministrative Area.CountryNameCode). sb.

0.AdministrativeArea.Placemark.ToString()).Placemark.Placemark.ThoroughfareName"). lb_Buscar.SubAdministrative Area. sb.Country.SubAdministrative Area.1 – 04/12/2008 . sb.Append("</li>").Append(geocode. 92 sb. sb. sb.Append("<i>").Locality.Append("</li>").SubAdministrative Area.Append("<li>"). sb.ToString(). sb.Thoroughfare.Placemark.Append(geocode.Append("<li>").Subgurim.Append("</i>: "). sb.Locality.PostalCodeNumber").Append("</ul>").Locality. sb.coordinates. sb.Append("Ubicación no encontrada").NET – Versión: 3.PostalCode.Append("</li>"). sb.Append("<li>").Append("<i>").Append("geocode.AddressDetails.Append("</i>: ").Append("</li>").Locality. sb.Append("<i>").AdministrativeArea.sb. sb.AddressDetails.Placemark.AddressDetails. sb.Append("geocode.Append(geocode. } } GoogleMaps.Append("</i>: ").Placemark. sb. sb. sb.Text = sb.PostalCode.Country.2. sb.Country. } else sb.SubAdministrative Area.AdministrativeArea.coordinates").AddressDetails.ThoroughfareName).AdministrativeArea. sb.PostalCodeNumber).Thoroughfare.Country.Append("geocode.

bajo licencia Creative Commons. El ejemplo mostrado a continuación es un ejemplo típico del uso del geoCoding inverso. nearestPlaceElevation: altura sobre el nivel del mar (en metros) del lugar habitado más cercano al punto que hemos indicado. Al hacer click sobre un punto del mapa. nearestPlacePoint: coordenadas del lugar habitado más cercano al punto que hemos indicado. countryName: nombre del país del punto indicado. countryCode: código ISO del país del punto indicado. se ejecuta un evento de servidor.Geocoding Inverso NOTA: En el geocoding inverso se utilizan las servicios Web de geonames.org. GoogleMaps. Manejando éste. language: idioma en que queremos la respuesta. pero. que consta de 4 parámetros: • • • • 93 point: el punto sobre el que queremos información. initialPointElevation: altura sobre el nivel del mar (en metros) del punto indicado. que nos devolverá un listado genérico de instancias de la clase inverseGeocoding. La clase inverseGeocoding consta de las siguientes propiedades de interés: • • • • • • • • name: nombre del lugar más cercano al punto indicado. radius: radio en kilómetros sobre el que buscar lugares cercanos. Hasta ahora hemos visto cómo obtener información de un lugar a partir su nombre. N: cantidad máximo de lugares cercanos que queremos como respuesta. distance: distancia en Kilómetros entre el punto indicado y el lugar habitado más cercano.1 – 04/12/2008 . recogemos la información que nos da el geoCoding inverso y la mostramos en un infoWindow. ordenadas de más a menos cercano al punto que hemos señalado. haciendo parecer que estamos esperando la respuesta.2.Subgurim.0... No hay más que instanciar la clase inverseGeocodingManager. pues dispone de varios servicios Web relacionados con la geolocalización.NET – Versión: 3. ¿y si queremos obtener información de un lugar sólo a partir de sus coordenadas geográficas? Para ello tenemos el GeoCoding inverso. y usarlo es muy sencillo. Adicionalmente. habilitamos la función "goTo" añadiendo un CustomJavascript que nos hará viajar al lugar más cercano. Y tras hacerlo llamaremos a inverseGeoCodeRequest. initialPoint: el punto que hemos indicado. y además hacemos el "truco" de lanzar una infowindow mientras se viaja y se vuelve del servidor. Recomendamos altamente esta página.

addControl(new GControl(GControl..Append("function(marker. GMap1.94 Code.AppendFormat("{0}. GoogleMaps.LargeMapControl)). EventArgs e) { if (!Page. sb2. sb2. GMove move = new GMove(1.GMap_Id.1 – 04/12/2008 . GMap1.\"><blink>Loading. GLatLng point = new GLatLng("point").Subgurim.ToString(GMap1.aspx.ToString())). sb.GMap_Id).preBuilt.Append("}").aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnClick="GMap1_Click" /> Code.Event.</blink></div>").NET – Versión: 3. point) {"). sb. sb. StringBuilder sb = new StringBuilder().Append("function goTo(point){").GMap_Id)). "<div style=\"height:140px. StringBuilder sb2 = new StringBuilder().enableHookMouseWheelToZoom = true.click. GInfoWindow window = new GInfoWindow(latlng.0.". GMap1.2. } } private void arreglarMapa() { GMap1.addListener(new GListener(GMap1. GLatLng latlng = new GLatLng("point").IsPostBack) { this.. sb.cs protected void Page_Load(object sender.setZoom(11).arreglarMapa(). point). GListener.Append(window.

inverseGeoCodeRequest().0.ToString(GMap1.Append(""<b>Click point"</b>").Subgurim. geo. geo. geo. geo. sb. geo. sb.Count > 0) { geo = iGeos. GAjaxServerEventArgs e) { inverseGeocodingManager igeoManager = new inverseGeocodingManager(e.GMap_Id)). } else return string. sb.AppendFormat("Point: "<i>{0}"</i>". geo. sb.Append("</div>").Append("<br />").ToString() : "No info").Append("<div align=\"left\">"). sb2.AppendFormat("Point: "<i>{0}"</i>".initialPointElevation > -9000 ? geo.AppendFormat("Elevation: "<i>{0}"</i>". GMarker marker = new GMarker(point).countryName. GInfoWindow window = new GInfoWindow(e. inverseGeocoding iGeos = igeoManager.initialPointElevation.2.addCustomJavascript(sb2. if (iGeos.nearestPlaceElevation. sb.Append("<br />").ToString(e.AppendFormat("Country Name (Code): "<i>{0} ({1})"</i>".nearestPlacePoint. sb. sb. sb.Append(""<b>Nearest Place "</b>").Append("<br />").ToString()). sb.Append("}").Append("</div>").Empty. sb.Append("<br />"). sb. return window. 3)). sb. GMap1. sb2. sb.Append("<div align=\"left\">"). sb.map). Math.AppendFormat("Place name: "<i>{0}"</i> ". "es"). geoName geo.Append(move. sb.geonames[0].NET – Versión: 3.1 – 04/12/2008 95 .distance. StringBuilder sb = new StringBuilder().Append("<br />"). sb. sb.nearestPlaceElevation > -9000 ? geo. } protected string GMap1_Click(object s. } GoogleMaps. sb.Append("<br />").geonames. geo.ToString(GMap1.point.countryCode).ToString().AppendFormat("Click point . true).ToString()).Append("<br />"). sb.initialPoint.ToString() : "No info").point.AppendFormat("Elevation: "<i>{0}"</i>". sb. sb.Append("<br />"). sb.GMap_Id)).Append(marker.sb2. sb.Round(geo.Append("<br />").ToString()).name).Nearest Place distance (Km): "<i>{0}"</i>".

Subgurim.NET.496675.Subgurim. 96 Code. GoogleMaps.aspx. 3).addGGeoXML(new GGeoXml("http://nigel.kml")).com/services/feeds/groups_pool.googlepages.cs GMap1.addGGeoXML(new GGeoXml("http://api.flickr.1 – 04/12/2008 . GMap1.65625).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.0. -102.GGeoXml Leer archivos KLM o GeoRSS es ahora muy sencillo con el GoogleMaps.setCenter(new GLatLng(49.gne?id=322338@N20&format=rss _200&georss=1")). Esa propiedad "url" será la dirección en que se encuentra el fichero KLM o GeoRSS.NET – Versión: 3.tao.com/blackbirds. No hay más que usar la clase GGeoXml que contiene una única propiedad (url) y añadir una instancia de ésta al GMap. GMap1.2.

GMap1.Subgurim. 97 Code.enableGTrafficOverlay = true. GoogleMaps.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.setCenter(new GLatLng(42.1 – 04/12/2008 .0.2. pero sólo con activar enableGTrafficOverlay se puede acceder a la información de tráfico.NET – Versión: 3.GTrafficOverlay De momento sólo sirve en Estados Unidos. 3).cs GMap1.-95).

fromText: texto que describe el punto de inicio. GMap1.GDirections Basic Observa lo sencillo que es añadir soporte de GDirection en el mapa: ¡sólo se necesita una simple línea de código! Pero obviamente se puede mejorar haciendo uso de otras propiedades del GDirection.addGDirection(gdirection). gdirection. toText: texto que describe el punto de llegada.Subgurim. Por defecto es "true". insertando textos. En este ejemplo estudiaremos las propiedades más sencillas y en el siguiente las más avanzadas: 98 • • • • • • autoGenerate: añade automáticamente la funcionalidad de GDirections.2. errorMessage: Mensaje mostrado cuando ocurre un error.NET – Versión: 3. cuadros de texto y el botón.1 – 04/12/2008 . buttonText: texto que describe botón para ejecutar el evento. GoogleMaps.errorMessage = "Ups". clearMap: Booleano que indica si se borra el mapa entre una llamada y otra.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Code. Por defecto vale "From: ". Por defecto vale "To: ".0.aspx.cs GDirection gdirection = new GDirection(true). Por defecto vale "Go".

Además. GoogleMaps. Pero GMaps sigue haciendo casi todo nuestro trabajo. el botón y un "div" donde irá la descripción de nuestro viaje. cuando al buscar una dirección el mapa se centra en el resultado. travelMode: el modo de viaje. como conducción (por defecto) o a pie. toElementId: el ID del cuadro de texto que corresponde al punto de salida. No tenemos más que añadir al mapa los cuadros de texto de salida y de llegada. tratará de evitar las autopistas siempre que sea posible. Con todo y con esto. "en-GB". Debe ser un "<input type=button />" NO un "<asp:Button />". "fr-CA".0. divElementId: el ID del div donde irá la descripción del viaje. se puede definir la propiedad "locale" para indicar la Lengua-Cultura en que estamos trabajando. Si activamos esta opción.1 – 04/12/2008 .GDirections Avanzado Si no queremos autogenerar el soporte para GDirection. no tenemos más que poner a false la propiedad "autoGenerate". de modo que queramos diseñar una interfaz más personal. basta con definir las siguientes propiedades para el correcto funcionamiento: • • • • • • • • 99 buttonElementId: el ID del botón. etc. avoidHighways: si le damos true. locale: string que define la cultura. fromElementId: el ID del cuadro de texto que corresponde al punto de salida.NET – Versión: 3. preserveViewport: Por defecto.Subgurim.2. Por ejemplo "es-ES". el mapa no se mueve de donde estemos (a no ser que nunca hayamos definido una localización inicial).

direction.0.clearMap = true.buttonElementId = "bt_Go".fromElementId = tb_fromPoint. direction. direction. } } GoogleMaps.Subgurim.ClientID.2.IsPostBack) { GDirection direction = new GDirection().aspx.NET – Versión: 3.100 Code. GMap1. EventArgs e) { if (!Page. direction. // Optional // direction. direction.ClientID.aspx Start Location: <asp:TextBox ID="tb_fromPoint" runat="server"></asp:TextBox> End Location: <asp:TextBox ID="tb_endPoint" runat="server"></asp:TextBox> <input type="button" id="bt_Go" value="Come on!" /> <cc1:GMap ID="GMap1" runat="server" /> <div id="div1"></div> Code.toElementId = tb_endPoint. direction.cs protected void Page_Load(object sender.Add(direction).1 – 04/12/2008 .locale = "es-ES".divElementId = "div_directions".autoGenerate = false.

longitude).getLocation(Request.GeoIP Gracias a MaxMind disponemos de la Geolocalización por IP: a partir de una IP conseguiremos datos sobre su localización. LookupService service = new LookupService(databaseFile).aspx. GMap1.latitude.2.setCenter(latlng.NET – Versión: 3.UserHostAddress). 101 Code. string infoWindowHTML = string. Location location = service. Para ello sólo hay que usar el código del ejemplo y descargarse la base de datos de MaxMind (descargar directa). if (location != null) { GLatLng latlng = new GLatLng(location. entre otros la latitud y la longitud.dat"). location.Subgurim.1 – 04/12/2008 .Format(@" <div style=""text-align:left""> <b>GEOIP PROPERTIES</b> <br /> <b>Area Code</b>: {0} <br /> <b>City</b>: {1} <br /> GoogleMaps.cs string databaseFile = Server.0. 10).MapPath("~/App_Data/GeoIP/GeoLiteCity.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.

location. GMap1.NET – Versión: 3. location.dma_code.0.city.area_code.region). location.countryName.2.countryCode. location.Add(new GInfoWindow(new GMarker(latlng).postalCode.102 <b>Country Code</b>: {2} <br /> <b>Country Name</b>: {3} <br /> <b>DMA Code</b>: {4} <br /> <b>Postal Code</b>: {5} <br /> <b>Region</b>: {6} </div> ". location. location. location. infoWindowHTML)).1 – 04/12/2008 .Subgurim. } GoogleMaps.

0. 103 GoogleMaps. Usando el DragZoomControl podremos recuadrar una zona específica del mapa sobre la que se hará un zoom.NET – Versión: 3.DragZoomControl El DragZoomControl forma parte del GMaps Utility Library.1 – 04/12/2008 .Subgurim.2.

5.104 Code. DragZoomBoxStyleOptions dragZoomBoxStyleOptions = new DragZoomBoxStyleOptions(). GControl dragzoom = new GControl(dragZoomControl.buttonclick = "function(){alert('Button Click')}".opacity = 0.cs DragZoomControl dragZoomControl = new DragZoomControl().Top_Left)). dragZoomBoxStyleOptions. dragZoomControl.aspx.dragZoomCallbacks = dragZoomCallbacks. GMap1.backButtonEnabled = true. dragZoomOtherOptions.Add(dragzoom). DragZoomCallbacks dragZoomCallbacks = new DragZoomCallbacks(). dragZoomCallbacks.2.0. dragZoomOtherOptions. new GControlPosition(GControlPosition .Red.fillColor = Color.backButtonHTML = "Go back". dragZoomControl.1 – 04/12/2008 .position. GoogleMaps. DragZoomOtherOptions dragZoomOtherOptions = new DragZoomOtherOptions().aspx <cc1:GMap ID="GMap1" runat="server" /> Code.NET – Versión: 3. dragZoomOtherOptions. dragZoomBoxStyleOptions.dragZoomOtherOptions = dragZoomOtherOptions.dragZoomBoxStyleOptions = dragZoomBoxStyleOptions.Subgurim. dragZoomControl.buttonHTML = "Zoom".

cs GLatLng latLng = new GLatLng(50. 105 Code. 7). labeledMarker.iconSize = new GSize(32.NET – Versión: 3. -7).iconAnchor = new GPoint(16.options.options. GoogleMaps. labeledMarker. GMap1. StaticGMap1. icon.Subgurim.infoWindowAnchor = new GPoint(25.com/svn/trunk/markers/circular/greencirclemarker.0. 5). 32).2.aspx. "You can use the Labeled Marker a s any other marker"). 10).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.icon = icon. LabeledMarker labeledMarker = new LabeledMarker(latLng).labelOffset = new GSize(-4.googlecode.Add(window).setCenter(latLng). El LabeledMarker nos permite añadir letras a los iconos de Google Maps. GIcon icon = new GIcon(). labeledMarker.span = new GLatLng(7. icon.1 – 04/12/2008 .LabeledMarker El LabeledMarker forma parte del GMaps Utility Library. 16). icon.options.png".labelText = "S". GMap1. GInfoWindow window = new GInfoWindow(labeledMarker.image = "http://gmapssamples. icon.

addControl(extMapType).Top_Right)). -122)).0.ExtMapTypeControl El ExtMapTypeControl forma parte del GMaps Utility Library.2.aspx. GMap1.NET – Versión: 3.Subgurim.cs GControl extMapType = new GControl(new ExtMapTypeControl(true. 106 Code. GMap1. new GControlPosition(GControlPosition. El ExtMapTypeControl es una alternativa opensource a los controles que nos permiten elegir el tipo de mapa. true).1 – 04/12/2008 .position. GoogleMaps.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.setCenter(new GLatLng(47.

Para ello podemos utilizar tres propiedades diferentes: .Add(window). 50.cs GLatLng latLng = new GLatLng(50.Subgurim.setCenter(latLng. GInfoWindow window = new GInfoWindow(marker. 4). GMarker marker = new GMarker(latLng.labelMarkerIconOptions .aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Consiste en crear iconos configurables. 10).markerIconOptions = new MarkerIconOptions(50. Code. GMap1. GIcon icon = new GIcon().NET – Versión: 3. "You can use the Map Icon Maker as any o ther marker").aspx.markerIconOptions . GoogleMaps.Blue).1 – 04/12/2008 . se sobreescribirá cualquier cosa que le hayamos hecho previamente al GIcon.MapIconMaker El MapIconMaker forma parte del GMaps Utility Library. GIcon icon2 = new GIcon(). icon.flatIconOptions 107 Una vez establecida cualquiera de estas propiedades.0. Color. GMap1. icon).2.

flatIconOptions = new FlatIconOptions(25.Add(window2). Color. "B". icon3.White. 3). 25. "You can use the Map Icon Maker as an y other marker"). -3).roundedrect). GMarker marker3 = new GMarker(latLng + new GLatLng(-3.Add(window3).flatIconShapeEnum.NET – Versión: 3. icon3).Black. icon2).White. GInfoWindow window3 = new GInfoWindow(marker3.Subgurim. Color. GMap1.2. GInfoWindow window2 = new GInfoWindow(marker2.Gold. FlatIconOptions. Color. 1 5.icon2.0.labeledMarkerIconOptions = new LabeledMarkerIconOptions(Color. Color. GIcon icon3 = new GIcon(). Color. GMap1.1 – 04/12/2008 . 108 GoogleMaps. " A". "You can use the Map Icon Maker as an y other marker").Red. GMarker marker2 = new GMarker(latLng + new GLatLng(3.Green).

Subgurim. 8).Add(marker). Lo aplicamos a un GMarker normal.2. GMap1.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. 0).1 – 04/12/2008 . GoogleMaps. 109 Code. Su uso es muy sencillo.cs GLatLng latLng = new GLatLng(40.. GMarker marker = new GMarker(latLng).)" del marker en cuestión.GCenter = latLng + new GLatLng(8.AddMarkerTracker(). de modo que cuando este GMarker quede fuera de la vista del mapa una flecha (totalmente configurable con las MarkerTrackerOptions) apuntará a su ubicación.aspx.MarkerTracker El MarkerTracker forma parte del GMaps Utility Library. GMap1..0. pues no hay más que llamar al método "AddMarkerTracker(.NET – Versión: 3. marker.

2. hasta el momento teníamos una función específica que se encargaba de ello..extraBuilt.Top_Right))).0. cursor.1 – 04/12/2008 . sin más que llamar a Add(.4.. Aún manteniendo la compatibilidad con versiones previas a la v1. para añadir llamábamos a addMovement(. GMap1.help)). GoogleMaps. 1).Add(new GControl(GControl. GMap1.Add(new GInfoWindow(ll1. ahora tenemos otro modo de añadir cualquier tipo de elemento.NET – Versión: 3.Add(new GControl(GControl.Add Genérico Para añadir cualquier elemento al GMap.Subgurim. GLatLng ll2 = new GLatLng(39.crosshair. Por ejemplo.TextualOnClickCoordinatesControl. 110 Code. ll2)).aspx.SmallMapControl)). para añadir un control llamábamos a addControl(.Add(new GCustomCursor(cursor. Simplemente veamos el ejemplo. new GControlPosition(GControlPosition. "Hello!!")).aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GMap1. 0)..position.).. y así con prácticamente la totalidad de elementos posibles.preBuilt.).).Add(new GMove(1500. GMap1.cs GLatLng ll1 = new GLatLng(41... siendo el parámetro que le demos a la función lo único importante. GMap1.

ll1)).Subgurim. 111 GoogleMaps.Add(new GeoCoding()).0.2.GMap1. GMap1.1 – 04/12/2008 .Add(new GMove(2000.NET – Versión: 3.

1 – 04/12/2008 .Movimiento y Animación Para trabajar con movimiento y animaciones. deltaY: Incremento en Y que sufrirá el mapa. goTO: propiedad del tipo GLatLon. el mapa se deslizará. Una vez definido el movimiento.NET – Versión: 3.2. Define a qué latitud y longitud saltará el mapa. 1.0.aspx. en lugar de dar el salto de golpe. donde una unidad es media pantalla. GMap1. deltaX: Incremento en X que sufrirá el mapa. se ignorarán los valores dados a deltaX y deltaY. tal y como se muestra en el ejemplo. NOTA: Cuando el inicio y el final de un movimiento están lo suficientemente cercanos. donde una unidad es media pantalla. Code. GoogleMaps.cs GMove move = new GMove(500. utilizaremos la clase GMove. -1).Subgurim. Si se define goTO.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Un mapa puede tener tantos movimientos como queramos y se llevarán a cabo según el orden en el que los hayamos añadido al mapa. De GMove se definen 4 propiedades: • • 112 • • deltaMiliseconds: cantidad de milisegundos que se dejarán entre la anterior animación (si existiera) y la que estamos definiendo. se añadirá al mapa mediante el método addMovement.addMovement(move).

move2.addMovement(move2). 3)).1 – 04/12/2008 . new GLatLng(51. 2. 20))).addMovement(new GMove(2500.2. GMap1.addMovement(new GMove(1500. GMap1.NET – Versión: 3.GMove move2 = new GMove().Subgurim.0.goTo = new GLatLng(51. move2. 113 GoogleMaps. GMap1. 44).deltaMiliseconds = 2500.

extend(GLatLng): amplia el rectángulo de modo que el GLatLng quede contenido dentro de él. containsBounds(GLatLngBounds): nos dice si el rectángulo pasado como parámetro contiene al rectángulo.0. isFullLng: nos dice si el rectángulo se extiende a lo largo de toda la longutid terrestre. getNorthEast: devuelve el GLatLng corresponiente a la coordenada noreste. contains(GLatLng): nos dice si el GLatLng pasado como parámetro está dentro del actual rectángulo.2. GoogleMaps. getCenter: devuelve la coordenada central del rectángulo. Además con el método estático GMap1. marcado por los extremos suroeste (sw) y noreste (ne). GLatLngBounds dispone de varios métodos que pueden llegar a ser extremadamente útiles para realizar algunas operaciones con nuestros mapas: 114 • • • • • • • • • • • • equals(GLatLngBounds): nos dice si el GLatLngBounds pasado como parámetro es igual al del rectángulo. isFullLat: nos dice si el rectángulo se extiende desde el polo sur hasta el polo norte.Subgurim. intersects(GLatLngBounds): nos dice si el rectángulo pasado como parámetro intersecta al rectángulo.NET – Versión: 3.1 – 04/12/2008 . isEmpty: nos dice si el rectángulo está vacío. getSouthWest: devuelve el GLatLng corresponiente a la coordenada suroeste.getBoundsZoomLevel(latlngbounds) se obtiene el mayor zoom para el cual se visualiza toda el área definida por el latlngbounds.GLatLngBounds El GLatLngBounds representa un rectángulo dentro del mapa. toSpan: devuelve el GLatLng que representa las coordenadas del rectángulo.

addGMarker(new GMarker(latlngbounds. 10).contains(outside). GLatLngBounds latlngboundsBig = new GLatLngBounds(swBig. GLatLng ne2 = sw2 + new GLatLng(5. GoogleMaps.getBoundsZoomLevel(latlngbounds).getSouthWest())).NET – Versión: 3. -10. 5). ne2).aspx.Subgurim.1 – 04/12/2008 . bool intersect = latlngbounds. GMap1.GZoom = GMap1. GLatLng ne = sw + new GLatLng(5. bool isInside = latlngbounds. GLatLngBounds latlngbounds = new GLatLngBounds(sw. 0). neBig). GLatLngBounds latlngbounds2 = new GLatLngBounds(sw2.cs GLatLng sw = new GLatLng(40. 15). GLatLng neBig = swBig + new GLatLng(15. 15).containsBounds(latlngbounds).getNorthEast())). bool isOutSide = !latlngbounds.2. GLatLng inside = latlngbounds.getCenter(). ne).contains(inside). GLatLng outside = neBig + new GLatLng(10. GLatLng sw2 = new GLatLng(42.insersects(latlngbounds2). GLatLng swBig = new GLatLng(35. GMap1. GMap1. bool contains = latlngboundsBig.addGMarker(new GMarker(latlngbounds. 7). GMap1.setCenter(latlngbounds.getCenter()).2).0.115 Code.

vale con darle un valor string. Por ejemplo: 22. un ChekList. en el que las propiedades tienen el mismo nombre que los valores por defecto de los campos o "Fields". Por tanto. De modo que. un GridView. Le podemos asignar los siguientes campos ("Fields"): 116 • • • • • • • • • DataLatField: indica el nombre del campo que contiene el "double" con la latitud del punto. Por ejemplo: 6.1 Con la propiedad DataSourceType podemos elegir qué mostrarán los puntos que definamos. no se abrirá ningún GInfoWindow.20 DataGInfoWindowAnchorField: Si queremos un infowindow.DataSource GoogleMaps. se ha creado la clase "DataSourceField". DataLngField: indica el nombre del campo que contiene el "double" con la longitud del punto.NET tiene soporte para DataSource.1 – 04/12/2008 . Si no se pone ningún nombre.Subgurim. Es un campo obligatorio. Es un campo obligatorio. Por ejemplo: 5.subgurim. DataGIconAnchorField: Si queremos un icono debemos indicar el nombre del campo que contiene el anchor de la imagen. DataGIconImageField: Si queremos un icono debemos indicar el nombre del campo que contiene el path de la imagen. debemos indicar el nombre del campo que contiene el anchor de la imagen. etc. valdrá "lat". GoogleMaps. tenemos las propiedades DataSourceGPolygonBase y DataSourceGPolylineBase a las que le daremos un GPolygon/GPolyline que actuará como template. "DataGInfoWindowTextField" indica el nombre del campo que contiene el string con el html del GInfoWindow.20 DataGIconShadowSizeField: Si queremos un icono debemos indicar el nombre del campo que contiene el size de la sombra. Tenemos varias opciones: Markers (por defecto). podemos asignar un listado genérico o un dataset como "DataSource" o SqlDataSource u ObjectDataSource como "DataSourceID". que corresponderá con el valor en formato html del GInfoWindow. Polylines.20 DataGIconSizeField: Si queremos un icono debemos indicar el nombre del campo que contiene el size de la imagen.NET – Versión: 3. DataGInfoWindowTextField: si deseamos que en del icono definido en los dos campos anteriores salga un GInfoWindow. Si no se pone ningún nombre.0. valdrá "lng". Éste funciona igual que el de cualquier otro elemento que soporte DataSource como un ListBox. DataGIconShadowField: Si queremos un icono debemos indicar el nombre del campo que contiene el path de la sombra. por ejemplo. Si dicho campo no existe o está vacío. Polygons. PolygonsAndMarkers y PolylinesAndMarkers Como tanto el GPolygon y el GPolyline son muy configurables.2. Por ejemplo 12. Para facilitar la tarea.

InfoWindowText.Subgurim. InfoWindowAnchor FROM [MapTestTable]"></asp:SqlDataSource> GoogleMaps.0. IconShadowSize. IconAnchor.NET – Versión: 3. 117 Code.aspx <cc1:GMap ID="GMap1" runat="server" DataSourceID="SqlDataSource1" DataSourceType="PolylinesAndMarkers" DataLatField="Lat" DataLngField="Lng" DataGInfoWindowTextField="InfoWindowText" DataGIconImageField="IconImage" DataGIconShadowField="IconShadow" DataGIconAnchorField="IconAnchor" DataGIconSizeField="IconSize" DataGIconShadowSizeField="IconShadowSize" DataGInfoWindowAnchorField="InfoWindowAnchor" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MapTest %>" SelectCommand="SELECT Lat. Lng. IconShadow.Como siempre. el ejemplo nos aclarará más ideas que la explicación.2.1 – 04/12/2008 . IconSize. IconImage.

Soporte PostBack El googlemaps.LargeMapControl)).setCenter(latlng.NET – Versión: 3.addControl(new GControl(GControl.Hybrid).net soporta el PostBack a tres niveles: • • • Centro del mapa: el centro del mapa se mantiene según su última posición antes de hacer el PostBack. GMap1. 1))). GMapType. -1. GMap1.subgurim.0.addControl(new GControl(GControl.aspx. 118 Code.GTypes.preBuilt.2. GMap1. GLatLng latlng = new GLatLng(42.12.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Click Me" /> Code.addGMarker(new GMarker(latlng + new GLatLng(2. 5. GoogleMaps.preBuilt.145).Subgurim. Tipo de mapa: del mismo modo.cs GMap1. Zoom: igualmente se mantiene el nivel de zoom.MapTypeControl)). se mantiene el tipo de mapa.

aspx <cc1:GMap ID="GMap1" runat="server" /> Code. con el único objetivo de apoyar a este proyecto. 30). que se compone de tres propiedades: • • • publisherId: el Identificador de tu cuenta Adsense helpSubgurim: del tipo HelpSubgurimEnum nos permite definir qué porcentaje.aspx. GMap1. options: del tipo GAdsManagerOptions y sobre el que podemos definir parámetros como "minZoomLevel" (nivel mínimo a partir del cual saldrán anuncios).1 – 04/12/2008 .2. Para ello usaremos el GAdsManager.HelpSubgurimEnum.Subgurim.addAdsManager(new GAdsManager("YourPublisherID".GAdsManager La API de GoogleMaps nos ofrece la posibilidad de mostrar publicidad Adsense en nuestros mapas. "maxAdsOnMap" (número máximo de anuncios en el mapa) y el "channel" (código de seguimiento Adsense) 119 Code.cs GAdsManagerOptions options = new GAdsManagerOptions(1. GoogleMaps. options)). de publicidad impresa en el mapa corresponderá a Subgurim.FullHelp.NET – Versión: 3.0. Es totalmente opcional. desde 0% a 100%. GAdsManager.

net.Nota y Agradecimiento Este documento ha sido extraído de la web oficial de Googlemaps. sely12@gmail. por Sely.1 – 04/12/2008 .Subgurim. todo el trabajo realizado para facilitarnos al resto la programación.subgurim.NET – Versión: 3. Para agradecer a Subgurim & cia.com GoogleMaps.2. 120 Saludos.0. Sely.

Sign up to vote on this title
UsefulNot useful