Map API Map() constructor
Instance
Create a Google Map:
<html>
<head>
<script
src="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" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
Click the "Run Example" button to view the online example
Definition and usage
The Map() constructor creates a new map and inserts it into the specified HTML element middle(<div> elements).
Syntax
new google.maps.Map(HTMLElement,MapOptions)
Parameter value
| Parameter | Description |
|---|---|
| HTMLElement | Specifies which HTML element the map should be placed in. |
| MapOptions | A MapOptions object with map initialization variables/options. |
Map() method
| Method | Return value | Description |
|---|---|---|
| fitBounds(LatLngBounds) | None | Sets the viewport to contain the given bounds. |
| 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 incident angle number of the aerial image (supports SATELLITE and HYBRID map types). |
| getZoom() | #number | Returns the current zoom level of the map. |
| panBy(xnumber,ynumber) | None | Changes the center of the map by the given distance in pixels. |
| panTo(LatLng) | None | Changes the center of the map to the given LatLng. |
| panToBounds(LatLngBounds) | None | Pans the map the minimum distance required to contain the given LatLngBounds. |
| setCenter(LatLng) | None | |
| number) | NoneSet the compass direction (measured in degrees) of the aerial image, with the cardinal direction being north. | |
| MapTypeId) | NoneChange the map type to be displayed. | |
| MapOptions) | None||
| )None | Bind a StreetViewPanorama to the map. | |
| )None | Set the incident angle number of aerial images (supports SATELLITE and HYBRID map types) . | |
| )None |
| Type | Description | |
|---|---|---|
| Array.<MVCArray.<Node>> | Additional controls to attach to the map. | |
| MapTypeRegistry | A registry of MapType instances by string ID. | |
| MVCArray.<MapType> | Additional map types to overlay. |
| Parameters | Description | |
|---|---|---|
| None | This event is triggered when the visual area range changes. | |
| None | This event is triggered when the map center property changes. | |
| MouseEvent | This event is fired when the user clicks on the map (but not on the marker or info window) . | |
| MouseEvent | This event is triggered when the user double-clicks the map. Note that the click event is also fired before this event is fired. | |
| None | This event will be triggered repeatedly when the user drags the map. | |
| None | This event is triggered when the user stops dragging the map. | |
| None | This event is fired when the user starts dragging the map. | |
| None | This event is triggered when the map heading property changes. | |
| None | This event is fired when the map becomes idle after panning or zooming. | |
| None | This event is triggered when the mapTypeId property changes. | |
| MouseEvent | This event is triggered whenever the user's mouse moves over the map container. | |
| MouseEvent | This event is triggered when the user's mouse exits from the map container. | |
| MouseEvent | This event is triggered when the user's mouse enters the map container. | |
| None | This event is fired when the projection changes. | |
| None | This event is triggered when the map (div) changes size. | |
| MouseEvent | This event is triggered when the user right-clicks on the map. | |
| None | This event will be triggered when the visible tiles are loaded. | |
| None | This event is triggered when the map tilt property changes. | |
| None | This event is triggered when the map zoom property changes. |
