Polys in the Maps API v3: Now with Level of Detail & Holes!
We've just added Polylines and Polygons to Maps API v3. These allow you to draw lines or filled regions on the map, specify stroke and fill styles, and handle events. They work in all supported browsers.
We've just added Polylines and Polygons to Maps API v3. These allow you to draw lines or filled regions on the map, specify stroke and fill styles, and handle events. They work in all supported browsers.
We've also made a few improvements from Polylines and Polygons in Maps API v2.
- You can send in multiple paths for one Polygon, and use that to render holes inside your poly, like in this Pentagon example.
- When you give us a set of vertices, we assign a level of detail to each vertex, showing only the necessary amount of vertices per zoom level. This is how we show complex routes in driving directions on Google Maps, and now you can benefit from that optimization with no extra work. Zoom in on the fractal snowflake poly example to see how it looks.
Adding a polyline or polygon to a map is easy, as shown in this snippet from the documentation:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
We wanted to launch early and get feedback, so there are still some features to come:
- Support for the
'mouseover'event - Further rendering optimizations
- Built-in editing like in Google My Maps
That said, here's a simple demo of polygon editing to show what you can do.
As always, please provide feedback in the Google Maps JS API v3 Group.
The 
Follow