Java Util
El API Javascript de Google Maps permite mas que solo mostrar un mapa exprorable de cualquier parte del mundo. También ofrece un conjunto de utilidades que permiten dibujar figuras, realizar calculos, determinar lugares, etc.
En el siguiente ejemplo se demuestra el funcionamiento de los dibujos en los mapas. Lo principal es agregar la librería cuando se llama al script de google:
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <title>...</title> | |
| <style type="text/css"> | |
| html { height: 100% } | |
| body { height: 100%; margin: 0px; padding: 0px } | |
| #map_canvas { height: 100%; background-color: #666970; } | |
| </style> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing "> | |
| </script> | |
| <script type="text/javascript"> | |
| function initialize() { | |
| var latlng = new google.maps.LatLng(14.6148278009765,-90.53281700000002); | |
| var myOptions = { | |
| zoom: 11, | |
| center: latlng, | |
| draggable:true, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| mapTypeControl: true, | |
| navigationControl: true, | |
| streetViewControl: false, | |
| disableDoubleClickZoom: true, | |
| backgroundColor: "#666970" | |
| }; | |
| document.geocoder = new google.maps.Geocoder(); | |
| document.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); | |
| var drawingManager = new google.maps.drawing.DrawingManager({ | |
| drawingMode: google.maps.drawing.OverlayType.MARKER, | |
| drawingControl: true, | |
| drawingControlOptions: { | |
| position: google.maps.ControlPosition.BOTTON_CENTER, | |
| drawingModes: [ | |
| google.maps.drawing.OverlayType.MARKER, | |
| google.maps.drawing.OverlayType.CIRCLE, | |
| google.maps.drawing.OverlayType.POLYGON, | |
| google.maps.drawing.OverlayType.POLYLINE, | |
| //google.maps.drawing.OverlayType.RECTANGLE | |
| ] | |
| }, | |
| polygonOptions: { | |
| strokeWeight: 6 | |
| }, | |
| markerOptions: { | |
| icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/grn-pushpin.png') | |
| } , | |
| circleOptions: { | |
| fillColor: '#ffff00', | |
| fillOpacity: 1, | |
| strokeWeight: 5, | |
| clickable: false, | |
| zIndex: 1, | |
| editable: true | |
| } | |
| }); | |
| drawingManager.setMap(document.map); | |
| } | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </head> | |
| <body onload="initialize()"> | |
| <div id="map_canvas" style="width:80%; height:80%"></div> | |
| </body> | |
| </html> |
El código anterior define como las opciones del mapa, descritas en el siguiente post: Agregar GoogleMap. Lo importante viene luego al definir las acciones que deseamos que el DrawingManager de Google Maps realice. Definimos la posición del panel, las posibles opciones (rectangulo esta comentado, si se descomenta permitirá usar esa opción) y lo agregamos al mapa. También se definen las propiedades que tendran las figuras disponibles.
Al final tendremos lo siguiente:
No hay comentarios :
Publicar un comentario