<!doctype html> <!-- Copyright (c) 2015 Google Inc. All rights reserved. --> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <title>Google Map Poly demo</title> <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="../google-map.html"> <link rel="import" href="../google-map-poly.html"> <style> body { margin: 0; height: 100vh; } #toggleEdit { position: absolute; top: 10px; left: 120px; } </style> </head> <body fullbleed> <google-map latitude="37.779" longitude="-122.3892" min-zoom="9" max-zoom="11" language="en"> <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1"> <google-map-point latitude="37.779" longitude="-122.3892"></google-map-point> <google-map-point latitude="37.804" longitude="-122.2711"></google-map-point> <google-map-point latitude="37.386" longitude="-122.0837"></google-map-point> </google-map-poly> </google-map> <button id="toggleEdit" onclick="toggleEdit()">Enable editing</button> <script> var poly = document.querySelector('google-map-poly'); var button = document.querySelector('#toggleEdit'); function toggleEdit() { poly.editable = !poly.editable; button.innerText = poly.editable ? 'Disable editing' : 'Enable editing'; } </script> </body> </html>