The best Google Map Overlays Tutorial In 2024, In this tutorial you can learn
Google Maps - Overlays,Google Maps - Add tag,Examples,Google Maps - draggable marker,Examples,Google Maps - icon,Examples,Google Maps - polyline,Examples,Google Maps - Polygon,Examples,Google Maps - Round,Examples,Google Maps - Information window,Examples,Google Maps - overlay Reference Manual,
Google Map Overlays
Adding a marker in Google Maps
Google Maps - Overlays
Overlays are objects bound to the latitude / longitude coordinates on the map, drag or zoom the map will move with you.
Google Maps API are the following overlays:
- Point using markers on the map to show the often display a custom icon. Markers are objects GMarker type, and can be used to customize the types of objects GIcon icon.
- Lines on the map using polylines (representing a collection of points) to be displayed. GPolyline line of type object.
- Areas on the map is displayed as polygons (if the area is an arbitrary shape) or bottom overlay (if it is a rectangular area). Polygon similar to a closed polyline, it can be any shape. Ground overlays are commonly used to map the area with tiles directly or indirectly associated.
- The map itself is displayed using a tile overlay. If you own a series of tiles, you can use GTileLayerOverlay class to change the existing tiles on the map, you can even use GMapType to create your own map types.
- Information window is also a special kind of overlay. Note, however, the information window will be automatically added to the map, and the map can only add one type GInfoWindow object.
Google Maps - Add tag
Map identifies points on the record. By default, they use G_DEFAULT_ICON (You can also specify a custom icon). GMarker constructor GLatLng and GMarkerOptions (optional) object as a parameter.
Tags designed to be interactive. For example, by default, they receive "click" events, often used to open the info window in the event listeners.
By setMap () method to add markers on the map:
Examples
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
Google Maps - draggable marker
The following example describes how to use the animation property to drag the marker:
Examples
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - icon
Tag can be defined from the new icon is displayed in place of the default icon:
Examples
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - polyline
GPolyline object can create a linear overlay on the map. GPolyline include a series of points and creates a series of orderly lines connecting these points.
Polyline supports the following attributes:
- path - specify more than one line of latitude / longitude coordinates
- strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
- strokeOpacity - Transparency designated line (the value 0.0 to 1.0)
- strokeWeight - Defines the width of the line, in pixels.
- editable - whether the user can edit the definition of a straight line (true / false)
Examples
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Polygon
GPolygon objects are similar GPolyline objects because they include a series of ordered points. However, the polygons are two endpoints, but the design of the closed loop area is defined formation.
And the line, you can customize the color and transparency of the polygon edges (lines) color, thickness and transparency, as well as the closure of the filled area. Colors should be in hexadecimal numeric HTML style.
Polygon supports the following attributes:
- path - specify multiple linear latitude coordinates (first and last coordinates are equal)
- strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
- strokeOpacity - Transparency designated line (the value 0.0 to 1.0)
- strokeWeight - Defines the width of the line, in pixels.
- fillColor - closed area designated hexadecimal color values (format: "#FFFFFF")
- fillOpacity - Transparency specify the fill color (which is 0.0 to 1.0)
- editable - whether the user can edit the definition of a straight line (true / false)
Examples
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Round
Round supports the following attributes:
- center - the center point of the circle specified parameters google.maps.LatLng
- radius - specifies the radius of the circle, in meters
- strokeColor - Specifies the arc hexadecimal color values (format: "#FFFFFF")
- strokeOpacity - Transparency designated arc (the value 0.0 to 1.0)
- strokeWeight - Defines the width of the line, in pixels.
- fillColor - specifies the hexadecimal color value of the circle fill value (format: "#FFFFFF")
- fillOpacity - Transparency specify the fill color (which is 0.0 to 1.0)
- Defines whether the user can edit a straight line (true / false)
Examples
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Information window
On a tag to display a text message window:
Examples
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
Google Maps - overlay Reference Manual
Google Maps API Reference Manual .