Google Maps API V3 's Drawing Library Information window

Drawing Library

The concepts in this document apply only to google.maps.drawing the map items provided in the library. By default, the library is not loaded when the Maps JavaScript API is loaded, and you must libraries explicitly specify it using bootstrapper parameters.

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing

DrawingManagerclass provides a graphical interface for users to draw polygons, rectangles, polylines, circles, and markers on the map. DrawingManagerThe object is created in the following way:

var drawingmanager = new Google.maps.drawing.DrawingManager ();d rawingmanager.setmap (map);

Drawingmanager Options

DrawingManagerThe constructor takes a set of options to define the set of controls to display, the position of the control, and the initial drawing state.

• DrawingManagerdrawingModeproperties are used to define the initial drawing state of the Drawingmanager. The property accepts google.maps.drawing.OverlayType constants, and by default null (when Drawingmanager is started in this case, the cursor is in a non-drawing mode).
• DrawingManagerdrawingControlproperties are used to define the visibility of the drawing tool selection interface on the map. The property accepts a Boolean value.
• You can also use DrawingManager drawingControlOptions properties that define the position of the control and the type of overlay that should be represented in the control.
  • positionDefines the position of the drawing Control on the map and accepts google.maps.ControlPosition constants.
  • drawingModesis a set google.maps.drawing.OverlayType of constants and is used to define the overlay types contained in the shape selector of a drawing control. The hand icon is always displayed so that users can interact with the map without drawing.
• You can specify a set of default properties for each overlay type to define the appearance that is used when the corresponding overlay is first created. These properties can be defined in the overlay's {overlay}Options properties, which {overlay} represent the type of overlay. For example, a circular fill property, stroke properties, ZIndex, and clickable properties can be circleOptions defined using attributes. If you have passed any size, location, or map value, these default properties are ignored.

var drawingmanager = new Google.maps.drawing.DrawingManager ({    DrawingMode: Google.maps.drawing.OverlayType.MARKER,    drawingcontrol:true,    drawingcontroloptions: {      Position: Google.maps.ControlPosition.TOP_CENTER,      drawingmodes: [Google.maps.drawing.OverlayType.MARKER, Google.maps.drawing.OverlayType.CIRCLE]    },    markeroptions: {      icon:new google.maps.MarkerImage (' http:/ /www.example.com/icon.png ')    },    circleoptions: {      fillcolor: ' #ffff00 ',      fillopacity:1,      Strokeweight:5,      Clickable:false,      zindex:1,      editable:true    }  });  Drawingmanager.setmap (map);  

Update Drawing Tool Controls

DrawingManagerAfter you create the object, you can call setOptions() and pass the new value to update it.

Drawingmanager.setoptions ({    drawingcontroloptions: {      Position:google.maps.ControlPosition.BOTTOM_LEFT,      drawingmodes: [Google.maps.drawing.OverlayType.MARKER]    }  });  

You can hide or show a drawing tool control by using the following methods:

To hide:  drawingmanager.setoptions ({    drawingcontrol:false  });    To show:  drawingmanager.setoptions ({    drawingcontrol:true  });  

To map remove a drawing tool control from an object, use the following method:

Drawingmanager.setmap (NULL);

Hiding a drawing control does not show the control, but the functionality of the Drawingmanager class is still available. If you want, you can implement your own controls in this way. Removing the Drawingmanager class from the Map object removes all drawing features. If all the drawing features are to be reset, then the Drawingmanager class is re-associated with the map by Drawingmanager.setmap (map) or by constructing a new Drawingmanager object.

Drawing events

When a graphical overlay is created, two events are fired:

• One is the {Overlay}complete event ({Overlay} represents the type of Overlay, such as the Circlecomplete,polycomplete event, etc.). The handle of the overlay is passed in as a parameter.
• One is the Overlaycomplete event. An array of objects that contains Overlaytype and overlay handles.

Google.maps.event.addListener (Drawingmanager, ' Circlecomplete ', function (circle) {  var radius = Circle.getradius ();}); Google.maps.event.addListener (Drawingmanager, ' Overlaycomplete ', function (event) {  if (Event.type = = Google.maps.drawing.OverlayType.CIRCLE) {    var radius = Event.overlay.getRadius ();  }});

Information window (Infowindow)

Infowindow displays content in a floating window above the map. The information window is a bit like a text balloon on a comic book, it has a content area and a tapered lead, and the leader's head is located at the specified location on the map. You can see the Active information window by clicking on the merchant tag on Google Maps.

The Infowindow constructor takes the Infowindow options object, which specifies a set of initial parameters for displaying the information window. During the creation of the information window, the system does not add information windows to the map. To display the Information window, you need to call the open () method on Infowindow, pass it to the MAP in which you want to open the information window, and optionally pass it the Marker for the Anchor Information window. (If no markup is provided, the Information window is opened on its position property).

The Infowindow options object is an object constant that contains the following fields:

• The content contains the text string or DOM node that the system will display when the information window is opened.
• The pixeloffset contains the offset from the top of the information window to the anchor position of the information window. In fact, you should not need to modify this field as well.
• The position contains the latlng of the anchor position of this information window. Note that when you perform an open Information window operation on a tag, the value is updated automatically with a new location.
• MAXWIDTH Specifies the maximum width, in pixels, of the information window. By default, the Information window expands based on what it contains, and if the information window expands with the size of the map, the text wraps automatically. If you apply maxWidth, the Information window wraps automatically to force the width of the pixel to fit. If the actual usable area of the screen allows, the information window can still be expanded vertically after reaching the maximum width.

The contents of the Infowindow can be text strings, HTML snippets, or DOM elements themselves. To set this content, either pass the content in the Infowindow options constructor, or explicitly call SetContent () to Infowindow. If you want to explicitly resize the content, you can use <div> to do this, and you can also enable scrolling if you prefer. Note that if you do not have scrolling enabled, and the content is larger than the available space in the Information window, the content may "overflow" from the information window.

Infowindow can be attached to Marker objects (in this case, their position depends on the location of the tag) or attached to the LATLNG location specified by the map itself. If you want to display only one information window at a time (just like the corresponding behavior on Google maps), you can simply create an information window and reassign the information window to a different location or tag during a map event, such as user clicks. However, unlike the corresponding behavior in Google Maps API version 2nd, if you choose to do this, the map may display multiple Infowindow objects immediately.

To change the location of the information window, you can call SetPosition () on the Information window to change its position explicitly, or use the Infowindow.open () method to attach the information window to the new tag. Note that if you call open () without passing the token, Infowindow will use the location specified by the Infowindow options object during the build process.

The following code shows the markup for the central location in Australia. Click the tag to display the information window.

var mylatlng = new Google.maps.LatLng ( -25.363882,131.044922), var mapoptions = {zoom:4, center:mylatlng, maptypeid:g Oogle.maps.maptypeid.roadmap}var map = new Google.maps.Map (document.getElementById ("Map_canvas"), mapoptions); var contentstring = ' <div id= ' content ' > ' + ' <div id= ' sitenotice ' > ' + ' </div> ' + ' 
View Example (infowindow-simple.html)
The following shows an example of setting the Information window maxWidth to 200 pixels:
View Example (infowindow-simple-max.html)
Google Maps API V3 's Drawing Library Information window