DOM elements | Maps JavaScript API | Google for Developers (original) (raw)

DOM elements

OverlayViewclass

google.maps.OverlayViewclass

You can implement this class if you want to display custom types of overlay objects on the map.

Inherit from this class by setting your overlay's prototype: MyOverlay.prototype = new google.maps.OverlayView();. The OverlayView constructor is guaranteed to be an empty function.

You must implement three methods: onAdd(), draw(), and onRemove().

In the onAdd() method, you should create DOM objects and append them as children of the panes.
In the draw() method, you should position these elements.
In the onRemove() method, you should remove the objects from the DOM.

You must call setMap() with a valid Map object to trigger the call to the onAdd() method and setMap(null) in order to trigger the onRemove() method. The setMap() method can be called at the time of construction or at any point afterward when the overlay should be re-shown after removing. The draw() method will then be called whenever a map property changes that could change the position of the element, such as zoom, center, or map type.

This class extends[MVCObject](/maps/documentation/javascript/reference/event#MVCObject).

Access by calling const {OverlayView} = await google.maps.importLibrary("maps") or const {OverlayView} = await google.maps.importLibrary("streetView").
See Libraries in the Maps JavaScript API.

Constructor
OverlayView	OverlayView() Parameters: None Creates an OverlayView.

Static Methods
preventMapHitsAndGesturesFrom	preventMapHitsAndGesturesFrom(element) Parameters: element: Element Return Value: None Stops click, tap, drag, and wheel events on the element from bubbling up to the map. Use this to prevent map dragging and zooming, as well as map "click" events.
preventMapHitsFrom	preventMapHitsFrom(element) Parameters: element: Element Return Value: None Stops click or tap on the element from bubbling up to the map. Use this to prevent the map from triggering "click" events.

Methods
draw	draw() Parameters: None Return Value: None Implement this method to draw or update the overlay. Use the position from projection.fromLatLngToDivPixel() to correctly position the overlay relative to the MapPanes. This method is called after onAdd(), and is called on change of zoom or center. It is not recommended to do computationally expensive work in this method.
getMap	getMap() Parameters: None Return Value: Map\|StreetViewPanorama
getPanes	getPanes() Parameters: None Return Value: MapPanes\|null Returns the panes in which this OverlayView can be rendered. The panes are not initialized until onAdd is called by the API.
getProjection	getProjection() Parameters: None Return Value: MapCanvasProjection Returns the MapCanvasProjection object associated with this OverlayView. The projection is not initialized until onAdd is called by the API.
onAdd	onAdd() Parameters: None Return Value: None Implement this method to initialize the overlay DOM elements. This method is called once after setMap() is called with a valid map. At this point, panes and projection will have been initialized.
onRemove	onRemove() Parameters: None Return Value: None Implement this method to remove your elements from the DOM. This method is called once following a call to setMap(null).
setMap	setMap(map) Parameters: map: Map\|StreetViewPanorama optional The map or panorama. If null, the layer will be removed. Return Value: None Adds the overlay to the map or panorama.
Inherited: addListener,bindTo,get,notify,set,setValues,unbind,unbindAll

MapPanesinterface

google.maps.MapPanesinterface

Properties
floatPane	Type: Element This pane contains the info window. It is above all map overlays. (Pane 4).
mapPane	Type: Element This pane is the lowest pane and is above the tiles. It does not receive DOM events. (Pane 0).
markerLayer	Type: Element This pane contains markers. It does not receive DOM events. (Pane 2).
overlayLayer	Type: Element This pane contains polylines, polygons, ground overlays and tile layer overlays. It does not receive DOM events. (Pane 1).
overlayMouseTarget	Type: Element This pane contains elements that receive DOM events. (Pane 3).

MapCanvasProjectioninterface

google.maps.MapCanvasProjectioninterface

This object is made available to the OverlayView from within the draw method. It is not guaranteed to be initialized until draw is called.

Methods
fromContainerPixelToLatLng	fromContainerPixelToLatLng(pixel[, noClampNoWrap]) Parameters: pixel: Point optional noClampNoWrap: boolean optional Return Value: LatLng\|null Computes the geographical coordinates from pixel coordinates in the map's container.
fromDivPixelToLatLng	fromDivPixelToLatLng(pixel[, noClampNoWrap]) Parameters: pixel: Point optional noClampNoWrap: boolean optional Return Value: LatLng\|null Computes the geographical coordinates from pixel coordinates in the div that holds the draggable map.
fromLatLngToContainerPixel	fromLatLngToContainerPixel(latLng) Parameters: latLng: LatLng\|LatLngLiteral Return Value: Point
fromLatLngToDivPixel	fromLatLngToDivPixel(latLng) Parameters: latLng: LatLng\|LatLngLiteral optional Return Value: Point
getVisibleRegion	getVisibleRegion() Parameters: None Return Value: VisibleRegion\|null The visible region of the map. Returns null if the map has no size. Returns null if the OverlayView is on a StreetViewPanorama.
getWorldWidth	getWorldWidth() Parameters: None Return Value: number The width of the world in pixels in the current zoom level. For projections with a heading angle of either 90 or 270 degrees, this corresponds to the pixel span in the Y-axis.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-06-16 UTC.