Map API Map() constructor
Example
Create a Google Map:
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){var mapOpt = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP };var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Definition and usage
The Map() constructor creates a new map and inserts it into the specified HTML element (<div> element).
grammar
new google.maps.Map(HTMLElement,MapOptions)
Parameter value
| parameter | describe |
|---|---|
| HTMLElement | It is stipulated that the map should be placed in that HTML element. |
| MapOptions | MapOptions object with map initialization variables/options. |
Map() method
| method | Return value | describe |
|---|---|---|
| fitBounds(LatLngBounds) | None | Sets the viewport to contain the given boundary. |
| getBounds() | LatLng, LatLng | Returns the southwest latitude/longitude and northeast latitude/longitude of the current viewport. |
| getCenter() | LatLng | Returns the latitude/longitude of the center of the map. |
| getDiv() | Node | Returns the DOM object containing the map. |
| getHeading() | number | Returns the compass heading of the aerial image (supports SATELLITE and HYBRID map types). |
| getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | Returns the current map type. |
| getProjection() | Projection | Returns the current Projection. |
| getStreetView() | StreetViewPanorama | Returns the default StreetViewPanorama bound to the map. |
| getTilt() | number | Returns the number of incident angles of the aerial image (supports SATELLITE and HYBRID map types). |
| getZoom() | number | Returns the current zoom level of the map. |
| panBy(xnumber,ynumber) | None | Change the center of the map by a given distance in pixels. |
| panTo(LatLng) | None | Change the center of the map to the given LatLng. |
| panToBounds(LatLngBounds) | None | Translate the minimum distance required to the map to include the given LatLngBounds. |
| setCenter(LatLng) | None | |
| setHeading(number) | None | Set the compass direction of the aerial image (measured in degrees), and the basic direction is north. |
| setMapTypeId(MapTypeId) | None | Change the type of map to be displayed. |
| setOptions(MapOptions) | None | |
| setStreetView(StreetViewPanorama) | None | Bind a StreetViewPanorama to the map. |
| setTilt(number) | None | Sets the number of incident angles for the aerial image (supports SATELLITE and HYBRID map types). |
| setZoom(number) | None |
Properties of Map()
| property | type | describe |
|---|---|---|
| Controls | Array.<MVCArray.<Node>> | Additional controls to attach to the map. |
| mapTypes | MapTypeRegistry | The registry for the MapType instance divided by string ID. |
| overlayMapTypes | MVCArray.<MapType> | The extra map type to overlay. |
Map() event
| event | parameter | describe |
|---|---|---|
| bounds_changed | None | This event is triggered when the visual area range changes. |
| center_changed | None | This event is triggered when the map center property changes. |
| Click | MouseEvent | This event is triggered when the user clicks on a map (but not clicks on a tag or an info window). |
| dblclick | MouseEvent | This event is triggered when the user double-clicks on the map. Please note that the click event will also be triggered before this event is triggered. |
| drag | None | This event is repeatedly triggered when the user drags the map. |
| dragend | None | This event is triggered when the user stops dragging the map. |
| dragstart | None | This event is triggered when the user starts dragging the map. |
| heading_changed | None | This event is triggered when the map heading property changes. |
| idle | None | This event is triggered when the map becomes idle after panning or zooming. |
| maptypeid_changed | None | This event is triggered when the mapTypeId property changes. |
| mousemove | MouseEvent | This event will be triggered as long as the user's mouse moves over the map container. |
| mouseout | MouseEvent | This event is triggered when the user's mouse exits from the map container. |
| mouseover | MouseEvent | This event is triggered when the user's mouse enters the map container. |
| projection_changed | None | This event is triggered when the projection changes. |
| resize | None | This event is triggered when the map (div) changes the size. |
| rightclick | MouseEvent | This event is triggered when the user right-clicks on the map. |
| tilesloaded | None | This event will be triggered when the visible tile loading is completed. |
| tilt_changed | None | This event is triggered when the map tilt property changes. |
| zoom_changed | None | This event is triggered when the map zoom property changes. |
The above is a compilation of the information on the Google Map() constructor. We will continue to add relevant information in the future. Thank you for your support for this site!