Google Maps Overlays

Category: /blog /website
Tags: website

I read this book to learn the basics.

Overlays

add a marker

Marker - Single locations on a map. Markers can also display custom icon images.

var marker = new google.maps.Marker({
  position: myLocation,
  title: 'My Place',
  map: myMap
});
marker.setMap(map);

Sample code

You can add animation to the marker.

var marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

Use an icon for a marker.

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

add a polyline

Polyline - Series of straight lines on a map

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)

add a polygon

Polygon - Series of straight lines on a map, and the shape is “closed”

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)

Circle and Rectangle

Info Windows

Displays content within a popup balloon on top of a map

Related article

Google Maps Basics

评论

Comments powered by Disqus

提示

  • 如果看不到评论部分, 请暂时关掉adblock in Firefox/Chrome
  • 本网站使用Javascript实现评论功能, 此处外链对提高您的网站PR没有帮助. (潜台词: 请不要灌水, 谢谢)