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.

Shapes and lines

Select platform:AndroidiOS

You can add various shapes to your map. A shape is an object on the map, tied toaLatLng coordinate system. The 3D Maps in Maps JavaScript API supports the addition oflines and polygons to the map.

Polylines

To draw a line on your map, use a polyline. ThePolyline3DElementclass defines a linear overlay of connected line segments on the map. APolyline3DElement object consists of an array ofLatLng locations, andcreates a series of line segments that connect those locations in an orderedsequence.

Add a polyline

ThePolyline3DElement constructor takes a set ofPolyline3DElementOptionsspecifying theLatLng coordinates of the line and a set of styles to adjustthe polyline's visual behavior.

Polyline objects are drawn as a series of straight segments on the map. You canspecify custom colors, widths, opacities, heights, and geometric styling optionsfor the stroke of the line within thePolyline3DElementOptions whenconstructing your line, or you can change those properties after construction. Apolyline supports the following stroke styles:

  • outerColor: A hexadecimal HTML color of the format"#FFFFFF".
  • outerWidth: A numerical value between0.0 and1.0, which isinterpreted as a percentage of thestrokeWidth.
  • strokeColor: A hexadecimal HTML color of the format"#FFFFFF".
  • strokeWidth: The width of the line in pixels.
  • geodesic: whether the edges of the polyon follows the curvature of theearth, or be drawn as straight lines.
  • altitudeMode: How altitude components in the coordinates are interpreted
  • drawsOccludedSegments: A boolean indicating whether parts of the polygonobscured by objects (such as buildings) should be drawn.
  • extruded: A boolean indicating if the polyline should be connected to theground.
asyncfunctioninit(){const{Map3DElement,MapMode}=awaitgoogle.maps.importLibrary("maps3d");constmap=newMap3DElement({center:{lat:37.772675996068915,lng:-122.3978382542777,altitude:2500},tilt:45,heading:5.9743656,mode:MapMode.HYBRID,});const{Polyline3DElement,AltitudeMode}=awaitgoogle.maps.importLibrary("maps3d");constpolylineOptions={strokeColor:"#EA433580",strokeWidth:10,altitudeMode:"ABSOLUTE",extruded:true,drawsOccludedSegments:true,}constpolyline=newgoogle.maps.maps3d.Polyline3DElement(polylineOptions)polyline.path=[{lat:37.80515638571346,lng:-122.4032569467164},{lat:37.80337073509504,lng:-122.4012878349353},{lat:37.79925208843463,lng:-122.3976697250461},{lat:37.7989102378512,lng:-122.3983408725656},{lat:37.79887832784348,lng:-122.3987094864192},{lat:37.79786443410338,lng:-122.4066878788802},{lat:37.79549248916587,lng:-122.4032992702785},{lat:37.78861484290265,lng:-122.4019489189814},{lat:37.78618687561075,lng:-122.398969592545},{lat:37.7892310309145,lng:-122.3951458683092},{lat:37.7916358762409,lng:-122.3981969390652}];map.append(polyline)document.body.append(map);}init();

Interactive polylines

The following example changes the polyline's stroke color after registering aclick event.

asyncfunctioninit(){constcolors=["red","blue","green","yellow"];const{Map3DElement,MapMode,Polyline3DInteractiveElement}=awaitgoogle.maps.importLibrary("maps3d");constmap=newMap3DElement({center:{lat:0,lng:-180,altitude:15000000},mode:MapMode.HYBRID,});document.body.append(map);constpolyline=newPolyline3DInteractiveElement({path:[{lat:37.772,lng:-122.214},{lat:21.291,lng:-157.821},{lat:-18.142,lng:178.431},{lat:-27.467,lng:153.027}],strokeColor:'red',strokeWidth:10,});polyline.addEventListener('gmp-click',(event)=>{polyline.strokeColor=colors[~~(Math.random()*colors.length)];});map.append(polyline);}init();

Polygons

A polygon represents an area enclosed by a closed path (or loop), which isdefined by a series of coordinates.Polygon3DElementobjects are similar toPolyline3DElement objects in that they consist of aseries of coordinates in an ordered sequence. Polygons are drawn with a strokeand a fill. You can define custom colors and widths for the edge of the polygon(the stroke) and custom colors and opacities for the enclosed area (the fill).Colors should be indicated in hexadecimal HTML format. Color names are notsupported.

Polygon3DElement objects can describe complex shapes, including:

  • Multiple non-contiguous areas defined by a single polygon.
  • Areas with holes in them.
  • Intersections of one or more areas.

To define a complex shape, you use a polygon with multiple paths.

Add a polygon

Because a polygonal area may include several separate paths, thePolygon3DElement object's paths property specifies an array of arrays. Eacharray defines a separate sequence of orderedLatLng coordinates.

For basic polygons consisting of only one path, you can construct aPolygon3DElement using a single array ofLatLng coordinates. The3D Maps in Maps JavaScript API will convert the array into an array of arrays uponconstruction when storing it within thepath property.

asyncfunctioninit(){const{Map3DElement,MapMode}=awaitgoogle.maps.importLibrary("maps3d");constmap3DElement=newMap3DElement({center:{lat:43.6425,lng:-79.3871,altitude:400},range:1000,tilt:60,mode:MapMode.SATELLITE,});const{Polygon3DElement,AltitudeMode}=awaitgoogle.maps.importLibrary("maps3d");constpolygonOptions={strokeColor:"#EA433580",strokeWidth:4,fillColor:"#0000FF80",altitudeMode:"ABSOLUTE",extruded:true,drawsOccludedSegments:true,}consttowerPolygon=newgoogle.maps.maps3d.Polygon3DElement(polygonOptions);towerPolygon.path=[{lat:43.6427196,lng:-79.3876802,altitude:600},{lat:43.6421742,lng:-79.3869184,altitude:600},{lat:43.643001,lng:-79.3866475,altitude:600}];map3DElement.append(towerPolygon);document.body.append(map3DElement);}init();

Interactive polygons

The following example changes the polygon's stroke color after registering aclick event.

asyncfunctioninit(){constcolors=["red","blue","green","yellow"];const{Map3DElement,MapMode}=awaitgoogle.maps.importLibrary("maps3d");constmap3DElement=newMap3DElement({center:{lat:43.6425,lng:-79.3871,altitude:400},range:1000,tilt:60,mode:MapMode.SATELLITE,});const{Polygon3DInteractiveElement,AltitudeMode}=awaitgoogle.maps.importLibrary("maps3d");constpolygonOptions={strokeColor:"#EA433580",strokeWidth:4,fillColor:"#0000FF80",altitudeMode:"ABSOLUTE",extruded:true,drawsOccludedSegments:true,}consttowerPolygon=newgoogle.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);towerPolygon.path=[{lat:43.6427196,lng:-79.3876802,altitude:600},{lat:43.6421742,lng:-79.3869184,altitude:600},{lat:43.643001,lng:-79.3866475,altitude:600}];towerPolygon.addEventListener('gmp-click',(event)=>{towerPolygon.strokeColor=colors[~~(Math.random()*colors.length)];});map3DElement.append(towerPolygon);document.body.append(map3DElement);}init();

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.