Table of contents
Google Maps - draggable markers
Google Maps - Overlay
Overlays are objects on the map that are bound to longitude/latitude coordinates and move as you drag or zoom the map.
The Google Maps API has the following overlays:
- Points on the map are displayed using markers, often displaying custom icons. Markers are objects of type GMarker, and icons can be customized using objects of type GIcon.
- Lines on the map are displayed using polylines, which represent collections of points. Lines are objects of type GPolyline.
- Areas on the map appear as polygons (in the case of free-shaped areas) or as base overlays (in the case of rectangular areas). A polygon is similar to a closed polyline, so it can be any shape. Ground overlays are typically used for areas of the map that are directly or indirectly associated with tiles.
- The map itself is displayed using tile overlays. If you have your own series of tiles, you can use the GTileLayerOverlay class to alter existing tiles on the map, or even use GMapType to create your own map type.
- Info windows are also a special overlay. However, please note that the information window is automatically added to the map, and the map can only add an object of type GInfoWindow.
Google Maps - Add a marker
Mark the 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 parameters.
Markers are designed to be interactive. For example, by default they receive "click" events, which are often used to open information windows in event listeners.
Add markers on the map through the setMap() method:
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);Google Maps - draggable markers
The following example shows how to use the animation property to drag markers:
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);Google Maps - Icon
Markers can be displayed with a custom new icon instead of the default icon:
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);Google Maps - Polyline
The GPolyline object creates a linear overlay on the map. GPolyline takes a series of points and creates an ordered series of line segments connecting those points.
Polylines support the following properties:
- path - specifies the latitude/longitude coordinates of multiple lines
- strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
- strokeOpacity - specifies the opacity of the line (value is 0.0 to 1.0)
- strokeWeight - defines the width of the line, in pixels.
- editable - defines whether the user can edit the line (true/false)
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 to GPolyline objects in that they consist of an ordered series of points. However, instead of having two endpoints like a polyline, a polygon is designed to define an area that forms a closed loop.
Like polylines, you can customize the color, thickness, and transparency of polygon edges (lines), as well as the color and transparency of enclosed filled areas. Color should be hexadecimal number HTML style.
Polygons support the following properties:
- path - specifies the coordinates of multiple straight latitudes (the first and last coordinates are equal)
- strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
- strokeOpacity - Specifies the transparency of the line (value is 0.0 to 1.0)
- strokeWeight - defines the width of the line, in pixels.
- fillColor - specifies the hexadecimal color value of the enclosed area (format: "#FFFFFF")
- fillOpacity - Specifies the transparency of the fill color (value is 0.0 to 1.0)
- editable - defines whether the user can edit the line (true/false)
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 - Circle
Circles support the following properties:
- center - specifies the center point parameter of the circle google.maps.LatLng
- radius - specifies the radius of the circle, in meters
- strokeColor - specifies the hexadecimal color value of the arc (format: "#FFFFFF")
- strokeOpacity - Specifies the opacity of the arc (value is 0.0 to 1.0)
- strokeWeight - defines the width of the line, in pixels.
- fillColor - specifies the hexadecimal color value of the circle to fill (format: "#FFFFFF")
- fillOpacity - Specifies the transparency of the fill color (value is 0.0 to 1.0)
- Define whether the user can edit the line (true/false)
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});Google Maps - Info Window
Display a text message window on a marker:
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);