How to: Polygons in Google Maps in V3

Written by veronica summers
  • Share
  • Tweet
  • Share
  • Email

Using the Google Maps API version three, you can draw polygons on your Google maps. Create polygons to highlight your house, a tourist attraction or a particular area, such as the Bermuda Triangle, and display this map on your website. You specify the line size, fill style, colour, latitude and longitude coordinates and Google automatically draws the polygon on your map.

Skill level:


  1. 1

    Open your HTML file and locate the scripts referencing your Google map. Add the JavaScript polygon code to your map script.

  2. 2

    Enter the Latitude and Longitude coordinates for each vertex on your polygon using .LatLng object. Initialise the variable defining the polygon coordinates, then set the coordinates using "var my Coordinates = [ new google.maps.LatLng (latitude, longitude)," syntax. Each vertex is a separate line of code.

  3. 3

    Draw the polygon using the Polygon command. Follow this syntax "my Polygon = new google.maps.Polygon ({ paths:my Coordinates,".

  4. 4

    Add a stroke colour following the syntax "strokeColor: hexadecimal colour,".

  5. 5

    Add weight for the line following the syntax "stroke Weight: number,".

  6. 6

    Add a fill colour for your polygon following the syntax "fillColor: hexadecimal colour,".

  7. 7

    Save the html file, upload to your web server and test your map.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.