Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.
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();. TheOverlayView constructor is guaranteed to be an empty function.
You must implement three methods:onAdd(),draw(), andonRemove().
- 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.
setMap() with a validMap object to trigger the call to theonAdd() method andsetMap(null) in order to trigger theonRemove() method. ThesetMap() method can be called at the time of construction or at any point afterward when the overlay should be re-shown after removing. Thedraw() 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 extendsMVCObject.
Access by callingconst {OverlayView} = await google.maps.importLibrary("maps") orconst {OverlayView} = await google.maps.importLibrary("streetView").
SeeLibraries in the Maps JavaScript API.
Constructor | |
|---|---|
OverlayView | OverlayView()Parameters: None Creates an OverlayView. |
Static Methods | |
|---|---|
preventMapHitsAndGesturesFrom | preventMapHitsAndGesturesFrom(element)Parameters:
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:
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|nullReturns 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: MapCanvasProjectionReturns the MapCanvasProjection object associated with thisOverlayView. The projection is not initialized untilonAdd 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:
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: ElementThis pane contains the info window. It is above all map overlays. (Pane 4). |
mapPane | Type: ElementThis pane is the lowest pane and is above the tiles. It does not receive DOM events. (Pane 0). |
markerLayer | Type: ElementThis pane contains markers. It does not receive DOM events. (Pane 2). |
overlayLayer | Type: ElementThis pane contains polylines, polygons, ground overlays and tile layer overlays. It does not receive DOM events. (Pane 1). |
overlayMouseTarget | Type: ElementThis pane contains elements that receive DOM events. (Pane 3). |
MapCanvasProjectioninterface
google.maps.MapCanvasProjectioninterface
This object is made available to theOverlayView from within the draw method. It is not guaranteed to be initialized until draw is called.
Methods | |
|---|---|
fromContainerPixelToLatLng | fromContainerPixelToLatLng(pixel[, noClampNoWrap])Parameters:
Return Value: LatLng|nullComputes the geographical coordinates from pixel coordinates in the map's container. |
fromDivPixelToLatLng | fromDivPixelToLatLng(pixel[, noClampNoWrap])Parameters:
Return Value: LatLng|nullComputes the geographical coordinates from pixel coordinates in the div that holds the draggable map. |
fromLatLngToContainerPixel | fromLatLngToContainerPixel(latLng)Parameters:
Return Value: Point|nullComputes the pixel coordinates of the given geographical location in the map's container element. |
fromLatLngToDivPixel | fromLatLngToDivPixel(latLng)Parameters:
Return Value: Point|nullComputes the pixel coordinates of the given geographical location in the DOM element that holds the draggable map. |
getVisibleRegion | getVisibleRegion()Parameters: None Return Value: VisibleRegion|nullThe visible region of the map. Returns null if the map has no size. Returnsnull if the OverlayView is on a StreetViewPanorama. |
getWorldWidth | getWorldWidth()Parameters: None Return Value: numberThe 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 theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-11-21 UTC.