HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Create a Google Map
Create a Google Map:
var map = new google.maps.Map(mapCanvas, mapOptions);
The Map() constructor creates a new map inside a specified HTML element (typically a <div> element).
new google.maps.Map(HTMLElement,MapOptions)
Parameter | Description |
---|---|
HTMLElement | Specifies in what HTML element to put the map |
MapOptions | A MapOptions object that holds the map initialization variables/options |
Method | Return Value | Description |
---|---|---|
fitBounds(LatLngBounds) | None | Sets the viewport to contain the given bounds |
getBounds() | LatLng,LatLng | Returns the south-west latitude/longitude and the north-east latitude/longitude of the current viewport |
getCenter() | LatLng | Returns the lat/lng of the center of the map |
getDiv() | Node | Returns a DOM object that contains the map |
getHeading() | number | Returns the compass heading of aerial imagery (for 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 angle of incidence for aerial imagery in degrees (for 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 by the minimum amount necessary to contain the given LatLngBounds |
setCenter(LatLng) | None | Sets the lat/lng of the center of the map |
setHeading(number) | None | Sets the compass heading for aerial imagery measured in degrees from cardinal direction North |
setMapTypeId(MapTypeId) | None | Sets the map type to display |
setOptions(MapOptions) | None | |
setStreetView(StreetViewPanorama) | None | Binds a StreetViewPanorama to the map |
setTilt(number) | None | Sets the angle of incidence for aerial imagery in degrees (for SATELLITE and HYBRID map types) |
setZoom(number) | None | Sets the zoom level of the map |
Property | Type | Description |
---|---|---|
controls | Array.<MVCArray.<Node>> | Additional controls to attach to the map |
mapTypes | MapTypeRegistry | A registry of MapType instances by string ID |
overlayMapTypes | MVCArray.<MapType> | Additional map types to overlay |
Event | Arguments | Description |
---|---|---|
bounds_changed | None | Fired when the viewport bounds have changed |
center_changed | None | Fired when the map center property changes |
click | MouseEvent | Fired when the user clicks on the map |
dblclick | MouseEvent | Fired when the user double-clicks on the map |
drag | None | Fired repeatedly while the user drags the map |
dragend | None | Fired when the user stops dragging the map |
dragstart | None | Fired when the user starts dragging the map |
heading_changed | None | Fired when the map heading property changes |
idle | None | Fired when the map becomes idle after panning or zooming |
maptypeid_changed | None | Fired when the mapTypeId property changes |
mousemove | MouseEvent | Fired whenever the user's mouse moves over the map container |
mouseout | MouseEvent | Fired when the user's mouse exits the map container |
mouseover | MouseEvent | Fired when the user's mouse enters the map container |
projection_changed | None | Fired when the projection has changed |
resize | None | Fired when the map (div) changes size |
rightclick | MouseEvent | Fired when the user right-clicks on the map |
tilesloaded | None | Fired when the visible tiles have finished loading |
tilt_changed | None | Fired when the map tilt property changes |
zoom_changed | None | Fired when the map zoom property changes |
Constructor/Object | Description |
---|---|
Marker | Creates a marker. (Note that the position must be set for the marker to display) |
MarkerOptions | Options for rendering the marker |
MarkerImage | A structure representing a Marker icon or shadow image |
MarkerShape | Defines the marker shape to use in determination of a marker's clickable region (type and coord) |
Animation | Specifies animations that can be played on a marker (bounce or drop) |
InfoWindow | Creates an info window |
InfoWindowOptions | Options for rendering the info window |
Polyline | Creates a polyline (contains path and stroke styles) |
PolylineOptions | Options for rendering the polyline |
Polygon | Creates a polygon (contains path and stroke+fill styles) |
PolygonOptions | Options for rendering the polygon |
Rectangle | Creates a rectangle (contains bounds and stroke+fill styles) |
RectangleOptions | Options for rendering the rectangle |
Circle | Creates a circle (contains center+radius and stroke+fill styles) |
CircleOptions | Options for rendering the circle |
GroundOverlay | |
GroundOverlayOptions | |
OverlayView | |
MapPanes | |
MapCanvasProjection |
Constructor/Object | Description |
---|---|
MapsEventListener | It has no methods and no constructor. Its instances are returned from addListener(), addDomListener() and are eventually passed back to removeListener() |
event | Adds/Removes/Trigger event listeners |
MouseEvent | Returned from various mouse events on the map and overlays |
Constructor/Object | Description |
---|---|
MapTypeControlOptions | Holds options for modifying a control (position and style) |
MapTypeControlStyle | Specifies what kind of map control to display (Drop-down menu or buttons) |
OverviewMapControlOptions | Options for rendering of the overview map control (opened or collapsed) |
PanControlOptions | Options for rendering of the pan control (position) |
RotateControlOptions | Options for rendering of the rotate control (position) |
ScaleControlOptions | Options for rendering of the scale control (position and style) |
ScaleControlStyle | Specifies what kind of scale control to display |
StreetViewControlOptions | Options for rendering of the street view pegman control (position) |
ZoomControlOptions | Options for rendering of the zoom control (position and style) |
ZoomControlStyle | Specifies what kind of zoom control to display (large or small) |
ControlPosition | Specifies the placement of controls on the map |