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

.

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

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

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

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

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

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

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

En el ejemplo del TabContainer. 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.Básico 3 GoogleMaps no se lleva bien con los elementos que lo ocultan con un Hidden. Tenemos este problema. directamente. el cual devuelve un javascript que debemos ejecutar en el momento en que se vaya a mostrar el mapa. pues acaba descuadrándose o.2. no mostrándose. Code.Subgurim. por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".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.0.1 – 04/12/2008 .NET – Versión: 3.

getChangeHiddenStateFunction().OnClientClick = GMap2.addControl(new GControl(GControl. 1)).extraBuilt.extraBuilt.setCenter(new GLatLng(40.0. TabPanel3.2.cs GMap1.MarkCenter)).addControl(new GControl(GControl.extraBuilt. GMap2.addControl(new GControl(GControl.Subgurim. GMap1. TabPanel1.TextualCoordinatesControl)).TextualCoordinatesControl)).MarkCenter)).1 – 04/12/2008 .aspx.OnClientClick = GMap1. 9 GoogleMaps.setCenter(new GLatLng(39. 2)). GMap1.NET – Versión: 3.getChangeHiddenStateFunction().addControl(new GControl(GControl. GMap2.extraBuilt.</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. GMap2.

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

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).0.NET – Versión: 3.1 – 04/12/2008 . 11 Code. también contamos con enableHookMouseWheelToZoom. con el que. permitiremos que el usuario haga zoom con la rueda del ratón. Además.enableContinuousZoom = false. GMap1.cs // Ambas propiedades están activadas por defecto. para desactivarlas: // GMap1. GoogleMaps. ese zoom ocurrirá de forma gradiente y continua.enableHookMouseWheelToZoom = true. Pero además.aspx.2.Subgurim.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. si lo activamos. // GMap1.enableDoubleClickZoom = false. Las propiedades encargadas de tal menester son enableDoubleClickZoom y enableContinuousZoom.

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

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

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

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

sino que aporta funcionalidades que la API de Google Maps no posee. enableServerEvents: sólo debemos activar esta opción si vamos a usar server events (desactivado por defecto). es recomendable desactivar esta opción (está activada por defecto). en ocasiones no nos es necesario utilizar toda la potencia.NET a javascript. es recomendable desactivar esta opción (está activada por defecto).aspx.0.enableGetGMapElementById = false.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.2.NET – Versión: 3. enableStore: si no vamos a usar la propiedad Store no debemos activar esta opción (desactivada por defecto).1 – 04/12/2008 . deberíamos estudiar la posibilidad de utilizar Static Maps. GoogleMaps.cs GMap1. Pero el Static Map suele quedarse corto en muchas ocasiones (el usuario no tiene opción de moverse en el mapa).enablePostBackPersistence = false. enableGetGMapElementById: Si no vamos a usar nunca la opción de getGMapElementById. que devuelve una simple imagen.NET es muy potente. 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. Sin embargo. pues no solo es un parseador de ASP. Code.Minimizar Código El control de Google Maps para ASP. GMap1. 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.Subgurim. de modo que podemos aplicar algunas opciones para minimizar el código al máximo.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.NET – Versión: 3.2.cs GLayer layerPanoramio = new GLayer(GLayerID. GMap1. GMap1. GoogleMaps.Geotagged_Wikipedia_articles_Spanish).Subgurim. 35 Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 .All_photos_from_panoramio_com).aspx. GLayer layerWikipedia = new GLayer(GLayerID. La clase GLayerID contiene todos los tipos de Layers que podemos añadirle al mapa.Add(layerWikipedia).0.addGLayer(layerPanoramio).

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

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

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

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

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

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

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

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

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

NET – Versión: 3.1 – 04/12/2008 .0. Por defecto vale 1. bouncy: indica si queremos que el icono pegue unos botes cuando lo soltamos. 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. Tenemos dos propiedades que definen al GMarker: • • point: la coordenada (del tipo GLatLng) en que se ubicará el icono. options: del tipo GMarkerOptions.. dragCrossMove: Es una propiedad poco importante. Cuando arrastramos un icono aparece un cruz bajo éste que indica donde queremos que se ubique. bounceGravity: marca la "altura" que darán los botes. sobretodo asociándolos con InfoWindow y similares. Por defecto NO lo es. podemos utilizarlos sin asociarlos a nada. Son los GMarker.Iconos Ya hemos utilizado los iconos en varias ocasiones.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps.2. maxHeight: especifíca la distancia en pixels en la que un marker se eleverá cuando es arrastrado. Code. draggable: define si el icono puede ser arrastrado en el mapa. 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.Subgurim. Obviamente. en caso contrario (por defecto) es el icono el que se desplaza mínimamente hacia arriba. 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).

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

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

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

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

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

1 – 04/12/2008 . Usado junto con Width y Height evita usar el zoom.0.2. Height.aspx <cc1:StaticGMap ID="StaticGMap1" runat="server" Width="500" Height="500" Language="en" format="png32" /> GoogleMaps. jpg o png) y sobre la que no podrá realizarse ningún tipo de interacción. 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. format: enum del tipo FormatEnum que nos permitirá decidir el formato de la imagen (gif. El modo de trabajar con el Static Map es muy parecido al que tenemos con el GMap normal.NET – Versión: 3. Code. De hecho gran parte de propiedades con la GoogleKey. Width. son exactamente iguales a las del GMap. "mobile". jpg o png) span: permite definir la anchura que abarca el mapa en grados (GLatLng). puede que nos interese usar el Static Map.Subgurim. 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". la CommercialKey. etc. Alt: define el Alt normal del element "img" de HTML. Sus propiedades diferentes más importantes son: • • • • 51 mapType: enum del tipo MapType enum que nos permetirá elegir el tipo de mapa entre "roadmap". "hybrid" y "terrain". "satellite".

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

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

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

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

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

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

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

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

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

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

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

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

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. EventArgs e) { if (!Page.point).preBuilt.1 – 04/12/2008 . GMap1. GoogleMaps.NET – Versión: 3.0. } } protected string GMap1_Click(object s.LargeMapControl)).IsPostBack) { GMap1. GAjaxServerEventArgs e) { GMarker marker = new GMarker(e. Haciendo uso de la propiedad "ajaxUpdateProgressMessage" puede definirse el mensaje que queremos que aparezca mientras si realiza el viaje cliente-servidor-cliente.MapTypeControl)).cs protected void Page_Load(object sender.addControl(new GControl(GControl.Subgurim.aspx.preBuilt.• ZoomEnd: se lanza cuando acabamos de hacer un zoom.addControl(new GControl(GControl.2. Su argumento incluye el viejo zoom del que venimos y el nuevo zoom al que hemos ido. 64 Code.

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

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

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. Finalmente hay que llamar a la función 'send()' y la información se envía a servidor. Es muy útil para.Servidor En el servidor. maneja un evento de los no-predefinidos. En cuanto a "InfoWindowClose". Como vemos en el ejemplo. debemos manejar el evento ServerEvent. los markers. Para este caso tenemos el evento ServerEvent. ya hemos visto que este evento era uno de los predefinidos. Para hacerlo funcionar.. GoogleMaps. Por ejemplo manejar un evento no-predefinido.2. deberemos seguir los siguientes pasos: 1. 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..0. En el ejemplo vemos como definimos dos eventos: "Click" y "InfoWindowClose". un modo sencillo de crear el javascript es usando addListener. 2. puede darse el caso que queramos hacer algo diferente. o redefinir un evento predefinido del que queremos unos datos diferentes. Vemos pues que podemos manejar cualquier evento que produzca el mapa. tal y como se hace con el resto de eventos. o lo que sea.NET – Versión: 3.Eventos de Servidor 2 Si bien es cierto que los eventos de servidor predefinidos son los más comunes. En los ejemplos vemos que usar la clase 'serverEvent' es muy sencillo. El primero maneja el evento click del mapa. pero aquí hemos añadido un argumento que no teníamos antes: el tamaño del mapa. como en el ejemplo.1 – 04/12/2008 .Subgurim.Javascript Debemos añadir un javascript y usar la clase javascript 'serverEvent' para mandar la información a servidor. distinguir entre varios eventos diferentes eventArgs: es un array de string que contiene todos los argumentos que hemos añadido en javascript.

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

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

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

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

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. como por ejemplo el del GMarker. Lo veremos mejor en el ejemplo. El CustomJavascript sirve para manejar eventos y modificar el mapa tras los eventos. Esto es. Code. GMap1. 5). 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.2. En éste podemos añadir iconos al centro del mapa.Text. GoogleMaps.Text.StringBuilder sb = new System.cs System.1 – 04/12/2008 .0.StringBuilder(). GLatLng center = new GLatLng(44. con el CustomJavascript añadiremos el javascript que se ejecutará como respuesta (por ejemplo) al click de un botón.Custom Javascript Utilizaremos el "CustomJavascript" para añadir nuestro propio javascript.Subgurim.setCenter(center).NET – Versión: 3. borrar el último icono añadido o borrar todos los iconos que haya. Es decir.aspx.

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

0. Code. pero como éste no puede iniciar el evento. Nuestro ejemplo es muy sencillo. Mediante el CustomJavascript creamos una función que añadirá iconos en ubicaciones aleatorios. Es decir. 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. como por ejemplo el del GMarker. el CustomInsideJavascript añadido no podrá ser accedido por eventos como.2.Custom Inside Javascript Utilizaremos el "CustomInsideJavascript" para añadir nuestro propio javascript. y nos permitimos combinar el CustomInsideJavascript con el CustomJavascript. El CustomInsideJavascript sirve para añadir javascript que se ejecutará en la carga del mapa. por ejemplo. 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. utilizamos el CustomInsideJavascript para llamar por primera (y única) vez al código.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.1 – 04/12/2008 . el click de un botón.NET – Versión: 3. Como os podéis imaginar.Subgurim.

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

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

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

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

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

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

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

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

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

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

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

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

2.AdministrativeArea.Country.AddressDetails. 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. Spain geocode.0.CountryNameCode: ES geocode.AddressDetails.LocalityName: San Pedro del Pinatar geocode.address: San Pedro del Pinatar.AdministrativeArea.Country.Status.<Placemark> <address> 1600 Amphitheatre Pkwy.Status.AddressDetails.SubAdministrativeArea .SubAdministrativeAreaName: Murcia geocode.Country.AdministrativeArea.Placemark.0</coordinates> </Point> </Placemark> </Response> </kml> 89 • • • • • • • • • • geocode.AdministrativeAreaNa me: Murcia geocode.AddressDetails.Placemark.AddressDetails.Locality.Placemark.Placemark.423021.Country.SubAdministrativeArea .1 – 04/12/2008 .PostalCode.Placemark. CA 94043.code: 200 geocode.083739.SubAdministrativeArea . Mountain View.request: geocode geocode.name: San Pedro del Pinatar geocode.Country.Locality.AdministrativeArea.Subgurim.PostalCodeNumber: GoogleMaps.AddressDetails.Placemark.NET – Versión: 3.Placemark.accuracy: 4 geocode.37.

0. sb.1 – 04/12/2008 .Append("<li>").Text)) { string Key = System.Append(geocode.Append("<li>").aspx.Append("</i>: ").8350404. sb.Append("<i>"). GoogleMaps.AddressDetails.request").Country.ThoroughfareName: geocode. if ((null != geocode) && geocode.code).Text.Status. sb.Text.Append("</li>").Append("<ul>").StringBuilder().-0.Append(geocode. sb.valid) { sb. System.IsNullOrEmpty(tb_Buscar.Append(geocode.Status. sb. sb.name).Append("geocode.7915859 Code. sb.Thoroughfare. GeoCode geocode = GMap.Locality.Placemark. sb. sb.2.AppSettings.name"). EventArgs e) { if (!string. sb.Text.Placemark.Append("<i>").net").Append("</i>: "). sb.NET – Versión: 3. Key).Status.Append("geocode.• • geocode.cs protected void bt_Buscar_Click(object sender.Status.Append("<i>"). sb.Append("</i>: ").Append("<li>"). sb. sb.Append("</li>").Get("googlemaps.Subgurim.geoCodeRequest(tb_Buscar. sb.Append("geocode.StringBuilder sb = new System. sb.coordinates: 37.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.code").Configuration.AdministrativeArea.request). sb.ConfigurationManager.subgurim.SubAdministrativeArea .

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

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

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

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

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

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

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

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. Code. toText: texto que describe el punto de llegada. gdirection. 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. Por defecto es "true". Por defecto vale "Go".aspx. insertando textos.Subgurim.1 – 04/12/2008 .addGDirection(gdirection). errorMessage: Mensaje mostrado cuando ocurre un error. Por defecto vale "From: ". buttonText: texto que describe botón para ejecutar el evento. clearMap: Booleano que indica si se borra el mapa entre una llamada y otra.NET – Versión: 3. GoogleMaps. fromText: texto que describe el punto de inicio. Por defecto vale "To: ".aspx <cc1:GMap ID="GMap1" runat="server" /> Code.2.cs GDirection gdirection = new GDirection(true). GMap1. cuadros de texto y el botón.0.errorMessage = "Ups".

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

Add(direction).buttonElementId = "bt_Go". // Optional // direction.aspx. GMap1. EventArgs e) { if (!Page.Subgurim.toElementId = tb_endPoint. direction. } } GoogleMaps.1 – 04/12/2008 .IsPostBack) { GDirection direction = new GDirection().divElementId = "div_directions". direction.ClientID.clearMap = true.100 Code. direction.0.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.NET – Versión: 3. direction.fromElementId = tb_fromPoint.ClientID.locale = "es-ES". direction.cs protected void Page_Load(object sender. direction.2.autoGenerate = false.

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

region).area_code. } GoogleMaps.NET – Versión: 3.2. GMap1.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.countryCode. location. location.city.postalCode.dma_code. location. infoWindowHTML)).Subgurim.Add(new GInfoWindow(new GMarker(latlng).0. location.1 – 04/12/2008 . location.countryName.

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

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

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

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

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

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

cs GLatLng latLng = new GLatLng(40. pues no hay más que llamar al método "AddMarkerTracker(.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.NET – Versión: 3. Su uso es muy sencillo. GMap1.MarkerTracker El MarkerTracker forma parte del GMaps Utility Library. 0).1 – 04/12/2008 . 109 Code.0.2. GMarker marker = new GMarker(latLng). GoogleMaps.Subgurim.)" del marker en cuestión.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. 8)..Add(marker).aspx.GCenter = latLng + new GLatLng(8. Lo aplicamos a un GMarker normal. GMap1. marker..

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

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

aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 .addMovement(move). 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. deltaX: Incremento en X que sufrirá el mapa. se añadirá al mapa mediante el método addMovement. el mapa se deslizará. deltaY: Incremento en Y que sufrirá el mapa.2. GoogleMaps. GMap1.Movimiento y Animación Para trabajar con movimiento y animaciones. Una vez definido el movimiento. utilizaremos la clase GMove. en lugar de dar el salto de golpe. donde una unidad es media pantalla. Define a qué latitud y longitud saltará el mapa. se ignorarán los valores dados a deltaX y deltaY. -1). Code. NOTA: Cuando el inicio y el final de un movimiento están lo suficientemente cercanos. goTO: propiedad del tipo GLatLon.0. donde una unidad es media pantalla.cs GMove move = new GMove(500. tal y como se muestra en el ejemplo. Si se define goTO.aspx. 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.Subgurim. 1.NET – Versión: 3.

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

2. intersects(GLatLngBounds): nos dice si el rectángulo pasado como parámetro intersecta al rectángulo. isFullLat: nos dice si el rectángulo se extiende desde el polo sur hasta el polo norte.1 – 04/12/2008 . GoogleMaps.getBoundsZoomLevel(latlngbounds) se obtiene el mayor zoom para el cual se visualiza toda el área definida por el latlngbounds. isFullLng: nos dice si el rectángulo se extiende a lo largo de toda la longutid terrestre. 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.GLatLngBounds El GLatLngBounds representa un rectángulo dentro del mapa. extend(GLatLng): amplia el rectángulo de modo que el GLatLng quede contenido dentro de él.Subgurim. contains(GLatLng): nos dice si el GLatLng pasado como parámetro está dentro del actual rectángulo. toSpan: devuelve el GLatLng que representa las coordenadas del rectángulo. getNorthEast: devuelve el GLatLng corresponiente a la coordenada noreste.NET – Versión: 3. Además con el método estático GMap1. isEmpty: nos dice si el rectángulo está vacío. marcado por los extremos suroeste (sw) y noreste (ne). getSouthWest: devuelve el GLatLng corresponiente a la coordenada suroeste. getCenter: devuelve la coordenada central del rectángulo.0. containsBounds(GLatLngBounds): nos dice si el rectángulo pasado como parámetro contiene al rectángulo.

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

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

Lng. IconSize.Como siempre.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. el ejemplo nos aclarará más ideas que la explicación. IconShadowSize. InfoWindowText. IconAnchor. IconShadow.1 – 04/12/2008 .2.NET – Versión: 3.0. InfoWindowAnchor FROM [MapTestTable]"></asp:SqlDataSource> GoogleMaps. IconImage. 117 Code.Subgurim.

GMap1. GMap1.aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Click Me" /> Code.1 – 04/12/2008 .NET – Versión: 3. 118 Code.addControl(new GControl(GControl.preBuilt.Subgurim.Hybrid). Zoom: igualmente se mantiene el nivel de zoom.2.cs GMap1.subgurim. 1))). GLatLng latlng = new GLatLng(42.setCenter(latlng. GoogleMaps.preBuilt.GTypes.12.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. se mantiene el tipo de mapa.LargeMapControl)).aspx. GMapType. Tipo de mapa: del mismo modo. GMap1.addControl(new GControl(GControl. -1.addGMarker(new GMarker(latlng + new GLatLng(2.145).Soporte PostBack El googlemaps.0. 5.MapTypeControl)).

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

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

Sign up to vote on this title
UsefulNot useful