Google Maps Overlays
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Google Maps Overlays
❮ Previous
Next ❯
Add a marker to the Google map:
function myMap()
{
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
Google Maps - Overlays
Overlays are objects on the map that are bound to latitude/longitude
coordinates.
Google Maps has several types of overlays:
- Marker - Single locations on a map. Markers can also display custom icon images
- Polyline - Series of straight lines on a map
- Polygon - Series of straight lines on a map, and the shape is "closed"
- Circle and Rectangle
- Info Windows - Displays content within a popup balloon on top of a map
- Custom overlays
Google Maps - Add a Marker
The Marker constructor creates a marker. (Note that the position property
must be set for the marker to display).
Add the marker to the map by using the setMap()
method:
Example
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Google Maps - Animate the Marker
The example below shows how to animate the marker with the animation
property:
Example
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);Try it Yourself »
Google Maps - Icon Instead of Marker
The example below specifies an image (icon) to use instead of the default marker:
Example
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);Try it Yourself »
Google Maps - Polyline
A Polyline is a line that is drawn through a series of coordinates in an
ordered sequence.
A polyline supports the following properties:
- path - specifies several latitude/longitude coordinates for the line
- strokeColor - specifies a hexadecimal color for the line (format: "#FFFFFF")
- strokeOpacity - specifies the opacity of the line (a value between 0.0 and 1.0)
- strokeWeight - specifies the weight of the line's stroke in pixels
- editable - defines whether the line is editable by users (true/false)
Example
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});Try it Yourself »
Google Maps - Polygon
A Polygon is similar to a Polyline in that it consists of a
series of coordinates in an ordered sequence. However, polygons are designed to define regions within a closed loop.
Polygons are made of straight lines, and the shape is "closed" (all the lines
connect up).
A polygon supports the following properties:
- path - specifies several LatLng coordinates for the line (first and last coordinate are equal)
- strokeColor - specifies a hexadecimal color for the line (format: "#FFFFFF")
- strokeOpacity - specifies the opacity of the line (a value between 0.0 and 1.0)
- strokeWeight - specifies the weight of the line's stroke in pixels
- fillColor - specifies a hexadecimal color for the area within the enclosed region (format: "#FFFFFF")
- fillOpacity - specifies the opacity of the fill color (a value between 0.0 and 1.0)
- editable - defines whether the line is editable by users (true/false)
Example
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
});Try it Yourself »
Google Maps - Circle
A circle supports the following properties:
- center - specifies the google.maps.LatLng of the center of the circle
- radius - specifies the radius of the circle, in meters
- strokeColor - specifies a hexadecimal color for the line around the circle (format: "#FFFFFF")
- strokeOpacity - specifies the opacity of the stroke color (a value between 0.0 and 1.0)
- strokeWeight - specifies the weight of the line's stroke in pixels
- fillColor - specifies a hexadecimal color for the area within the circle (format: "#FFFFFF")
- fillOpacity - specifies the opacity of the fill color (a value between 0.0 and 1.0)
- editable - defines whether the circle is editable by users (true/false)
Example
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});Try it Yourself »
Google Maps - InfoWindow
Show an InfoWindow with some text content for a marker:
Example
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);Try it Yourself »
❮ Previous
Next ❯
