\\n\\n

Google Map Overlays |

\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n\\n

Map data ©2026 GeoBasis-DE/BKG (©2009), Google, Inst. Geogr. Nacional, Mapa GISrael

\\n

Map data ©2026 GeoBasis-DE/BKG (©2009), Google, Inst. Geogr. Nacional, Mapa GISrael

\\n\\n

Google Map - Overlays

\\n

Overlays are objects on the map that are tied to latitude/longitude coordinates and move when you drag or zoom the map.

\\n

\\n
• Points on the map are displayed using markers, typically showing custom icons. Markers are objects of type GMarker and can use objects of type GIcon to customize icons.
\\n
• Lines on the map are displayed using polylines (representing a collection of points). Lines are objects of type GPolyline.
\\n
• Areas on the map are displayed as polygons (for arbitrarily shaped areas) or ground overlays (for rectangular areas). Polygons are similar to closed polylines and can therefore be any shape. Ground overlays are typically used for areas on the map that are directly or indirectly associated with tiles.
\\n
• The map itself is displayed using tile overlays. If you have your own series of tiles, you can use the GTileLayerOverlay class to modify existing tiles on the map, or even use GMapType to create your own map types.
\\n
• Info windows are also a special type of overlay. However, please note that info windows are automatically added to the map, and only one object of type GInfoWindow can be added to the map.
\\n

\\n\\n

Google Map - Add Markers

\\n

Mark points on the map. By default, they use G_DEFAULT_ICON (you can also specify a custom icon). The GMarker constructor takes GLatLng and GMarkerOptions (optional) objects as arguments.

\\n

Markers are designed to be interactive. For example, by default they receive "click" events, commonly used to open info windows in event listeners.

\\n

Add markers to the map using the setMap() method:

\\n

var marker=new google.maps.Marker({position:myCenter, });\\nmarker.setMap(map);\\n

Try it Yourself »\\n\\n

Google Maps - Draggable Markers

\\n

The following example will show how to use the animation property to drag markers:

marker=new google.maps.Marker({position:myCenter, animation:google.maps.Animation.BOUNCE});\\nmarker.setMap(map);\\n

Try it Yourself »\\n\\n

Google Maps - Icons

\\n

Markers can be displayed with custom new icons to replace the default icon:

var marker=new google.maps.Marker({position:myCenter, icon:'pinkball.png'});\\nmarker.setMap(map);\\n

Try it Yourself »\\n\\n

Google Maps - Polylines

\\n

The GPolyline object creates linear overlays on the map. GPolyline consists of a series of points and creates line segments that connect these points in an ordered sequence.

\\n

Polylines support the following properties:

\\n

\\n
• path - specifies the latitude/longitude coordinates of multiple lines
\\n
• strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
\\n
• strokeOpacity - specifies the opacity of the line (value between 0.0 and 1.0)
\\n
• strokeWeight - defines the width of the line in pixels
\\n
• editable - defines whether the user can edit the line (true/false)
\\n

var myTrip = [stavanger,amsterdam,london];\\nvar flightPath = new google.maps.Polyline({path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2});\\n

\\n Try it Yourself »