6 Google Maps Events
Each Maps API object can export a large number of named events. If the program wants to implement certain events, the Javascript event listeners are registered for these events and the AddListener () event handlers are registered in the Google.maps.event namespace to execute the corresponding code after receiving these events.
The Google.maps.Marker object can listen for some user events, such as:
' Click '
' DblClick '
' MouseUp '
' MouseDown '
' MouseOver '
' Mouseout '
How to use:
Var listener = Google.maps.event.addListener (marker, ' click ', Function ())
Google.maps.event.removeListener (Listener)
Listening DOM Events
The Google Maps JavaScript API Event Model creates and manages custom events on its own. However, the DOM (Document Object model) inside the browser also creates and dispatches events themselves based on the specific browser event model that is used. If you want to capture and respond to these events, you can use the Adddomlistener () static method provided by the Maps API to listen and bind to these DOM events.
Google.maps.event.addDomListener (window, ' Load ', initialize);
Replace:
<body onload= "Initialize ()" >
<div id= "Map_canvas" ></div>
</body>
7 Control
The maps API comes with a subset of the built-in controls that you can use in your map:
? The zoom control , which displays the slider (for the geodetic map) or the "+/-" small button (for small maps), controls the zoom level of the map. On a non-touch device, the control appears by default in the upper-left corner of the map, and on the touch device in the lower-left corner.
? The pan control Displays the button that is used to pan the map. On a non-touch device, the control is displayed by default in the upper-left corner of the map. You can also use the pan control to rotate the image 45°
? A scale control that is used to display map scale elements. By default, the system does not enable this control.
? The maptype control allows users to switch between different map types, such as roadmap and satellite. The control is displayed by default in the upper-right corner of the map.
? The Street View Control includes a Street View villain icon, which you can drag onto the map to enable street views. The control is displayed by default in the upper-left corner of the map.
? The rotate control contains a small circular icon that lets you rotate a map that contains beveled images. The control is displayed by default in the upper-left corner of the map.
? The overview Map control Displays a brief overview map that reflects the current map viewport in a wider area. The control is displayed in the lower-right corner of the map by default in collapsed state.
8 Overlay Layer
Overlays are objects on the map that are bound to latitude/longitude coordinates and move as you drag or zoom the map. An overlay represents an object that "adds" to a map to indicate a collection of points, lines, regions, or objects
The Maps API contains the following overlay layers:
? A single location on the map is displayed with a marker . Tags can sometimes display a custom icon picture, in which case the tag is often referred to as an "icon." tags and icons are objects of type Marker.
? The lines on the map are displayed using polylines , which represent a series of positions in order. A line is an object of type Polyline.
? The irregular shape area on the map is displayed using polygons (similar to polylines). As with polylines, polygons are made up of a series of positions arranged sequentially, but polygons define closed areas.
? Map layers can be displayed using overlay map Types . You can create your own set of tiles by creating a custom map type, which replaces the base map tile set, or appears as an overlay above the existing base map tile set.
? The Information window is also a special type of overlay that displays content (usually text or pictures) within a pop-up bubble box above the specified map location.
? You can also implement your own custom overlay . These custom overlays can implement the Overlayview interface.
Drawing Library
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Headrunat= "Server"> <Scriptsrc= "Scripts/jquery-1.4.1.min.js"type= "Text/javascript"></Script> <Scripttype= "Text/javascript"src= ' http://maps.googleapis.com/maps/api/js?v=3&sensor=true&language=hk&libraries=drawing '></Script> <Scripttype= "Text/javascript"> functionInitialize () {varmyoptions={zoom:4, center:NewGoogle.maps.LatLng (33.174342, 116.147461), MapTypeId:google.maps.MapTypeId.ROADMAP, Scalecontrol:true, scalecontroloptions: {Position:google.maps.ControlPosition.LEFT_BOTTOM }} Map= NewGoogle.maps.Map (document.getElementById ("Map_canvas"), myoptions); varDrawingmanager= NewGoogle.maps.drawing.DrawingManager ({drawingcontrol:true, drawingcontroloptions: {Position:google.maps.ControlPosition.TOP_CENTER, drawingmodes : [Google.maps.drawing.OverlayType.MARKER, Google.maps.drawing.OverlayType.CIRCLE, Google.maps.drawi Ng. Overlaytype.polygon, Google.maps.drawing.OverlayType.POLYLINE, Google.maps.drawing.OverlayType.RECTANGLE ]}, Markeroptions: {icon:'Http://maps.google.com/mapfiles/marker_green.png'}, Circleoptions: {fillcolor:'#ffff00', fillopacity:1, Strokeweight:5, clickable:false, Editable:true, ZIndex:1 } }); Drawingmanager.setmap (map); //var spointarray = '; //Google.maps.event.addListener (Drawingmanager, ' Polylinecomplete ', function (polyline) { //var Latlngarray = (Polyline.getpath (). GetArray ()); //For (var i = 0; i < latlngarray.length; i++) { //var point = Latlngarray[i]; //if (Spointarray = = ") { //Spointarray = parsefloat (number (Point.lat ())). ToFixed (4) + "," + parsefloat (number (POINT.LNG ())). ToFixed (4); //}//Four decimal places enough //else { //Spointarray = Spointarray + ";" + parsefloat (number (Point.lat ())). ToFixed (4) + "," + parsefloat (number (POINT.LNG ())) . toFixed (4); //} // } //alert (spointarray); //});} google.maps.event.addDomListener (window,'Load', initialize); </Script> <title></title></Head><Body><Divclass= "Container"> <formID= "Form1"Action=""class= "Form-horizontal"role= "form"runat= "Server"> <DivID= "Map_canvas"style= "width:800px; height:480px; margin-top:15px;"></Div> </form></Body></Div></HTML>
Google Map API V3 Development (3)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
