Google Maps v3 Drag Polygon

It’s really not that hard. No need for one of the many diy scripts; just set the draggable property on your instance of google.maps.Polygon and you’re good to go.

Note: draggable was introduced in Google Maps v3.11 (dd 22 January 2013). The current stable version of Google Maps still is 3.10 however. For now (until 3.11 is the stable one), you can include the experimental 3.11 version by referencing http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

Here’s an example showing the Bermuda triangle

var map = new google.maps.Map(document.getElementById('map_canvas'), {
	zoom: 5,
	center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
	mapTypeId: google.maps.MapTypeId.TERRAIN
});

var poly = new google.maps.Polygon({
	paths : [new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262)],
	strokeColor: '#ff0000',
	strokeOpacity: 1,
	strokeWeight: 1,
	fillColor: '#ff0000',
	fillOpacity: 0.4,
	draggable: true, // yes, it's that easy!
	geodesic: true // set to false if you do not want distortion due to the mercator projection
});

poly.setMap(map);

Google Maps v3 Draggable Polygon

Google Maps v3 Draggable Polygon Demo →

Update: you might also be interested in Google Maps v3 Move Polygon, a code snippet of mine which allows one to programmatically move a polygon.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.