Google Maps - Overlay
An overlay is an object bound to a longitude/latitude coordinate on the map and will move as you drag or zoom the map.
The Google Maps API has the following overlays:
1. The points on the map are displayed using markers, and custom icons are usually displayed. A tag is an object of type GMarker, and the icon can be customized using an object of type GIcon.
2. The lines on the map are displayed using polylines (representing a collection of points). A line is an object of type GPolyline.
3. The area on the map is displayed as a polygon (if it is an arbitrary shape) or a bottom surface overlay (if it is a rectangular area). A polygon is similar to a closed polyline, so it can be any shape. Ground overlays are usually used on the map that have direct or indirect associations with tiles.
4. The map itself is displayed using tile overlays. If you have your own series of tiles, you can use the GTileLayerOverlay class to change the tiles you already have on the map, or even use GMapType to create your own map type.
5. The information window is also a special overlay layer. However, please note that the information window is automatically added to the map, and the map can only add one object of type GInfoWindow.
Google Maps - Add Tags
Mark the points on the map. By default, they use G_DEFAULT_ICON (you can also specify custom icons). The GMarker constructor takes GLatLng and GMarkerOptions (optional) objects as parameters.
The 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 a tag on the map via the setMap() method:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP };var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker=new google.maps.Marker({ position:myCenter, });marker.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Example rendering:
Google Maps - Dragable Tags
The following example describes how to use the animation property to drag a tag:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);var marker;function initialize(){var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP };var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE });marker.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Google Maps - Icon
Tags can be displayed with a custom new icon instead of the default icon:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP };var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker=new google.maps.Marker({ position:myCenter, icon:'pinkball.png' });marker.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Google Maps - Folding Lines
GPolyline objects create linear overlays on maps. GPolyline includes a series of points and creates a series of line segments that connect these points in an orderly manner.
Polylines support the following properties:
path - Specifies the latitude/longitude coordinates of multiple straight lines
strokeColor - Specifies the hexadecimal color value of the line (format: "#FFFFFF")
strokeOpacity - Specifies the transparency of a line (the value is 0.0 to 1.0)
strokeWeight - Defines the width of the line in pixels.
editable - Defines whether the user can edit a straight line (true/false)
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var x=new google.maps.LatLng(52.395715,4.888916);var stavanger=new google.maps.LatLng(58.983991,5.734863);var amsterdam=new google.maps.LatLng(52.395715,4.888916);var london=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:x, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);var myTrip=[stavanger,amsterdam,london];var flightPath=new google.maps.Polyline({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2 });flightPath.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Example rendering:
Google Maps - Polygons
GPolygon objects are similar to GPolyline objects in that they all include a series of ordered points. However, instead of having two endpoints like polylines, polygons are designed to define areas that form closed loops.
Like polylines, you can customize the color, thickness, and transparency of polygon edges (lines), as well as the color and transparency of closed fill areas. The color should be in the hexadecimal number HTML style.
Polygons support the following properties:
path - Specifies the coordinates of multiple straight line 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 (this value is 0.0 to 1.0)
strokeWeight - Defines the width of the line in pixels.
fillColor - Specifies the hexadecimal color value for the closed area (format: "#FFFFFF")
fillOpacity - Specifies the transparency of the fill color (the value is 0.0 to 1.0)
editable - Defines whether the user can edit a straight line (true/false)
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var x=new google.maps.LatLng(52.395715,4.888916);var stavanger=new google.maps.LatLng(58.983991,5.734863);var amsterdam=new google.maps.LatLng(52.395715,4.888916);var london=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:x, zoom:4, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);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 });flightPath.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Example rendering:
Google Maps - Circle
Circles support the following properties:
center - Specify 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 transparency of the arc (the value is 0.0 to 1.0)
strokeWeight - Defines the width of the line in pixels.
fillColor - Specifies the hexadecimal color value fill value of the circle (format: "#FFFFFF")
fillOpacity - Specifies the transparency of the fill color (the value is 0.0 to 1.0)
Defines whether the user can edit a straight line (true/false)
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var amsterdam=new google.maps.LatLng(52.395715,4.888916);function initialize(){var mapProp = { center:amsterdam, zoom:7, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });myCity.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Example rendering:
Google Maps - Information Window
Display a text message window on a tag:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP };var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker=new google.maps.Marker({ position:myCenter, });marker.setMap(map);var infowindow = new google.maps.InfoWindow({ content:"Hello World!" });infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Example rendering:
The above is a compilation of the information on the overlay of Google Maps. We will continue to add it later. Thank you for your support for this site!