<div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=PUT YOUR API KEY&libraries=drawing,geometry"></script>
    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            map.data.setControls(['Polygon']); // comment it while to show only maps
            map.data.setStyle({
                editable: true, // set it false
                draggable: true // set it false
            bindDataLayerListeners(map.data);
            loadPolygons(map);
            map.data.addListener('click', function(event) {
                alert('Hello');
        function bindDataLayerListeners(dataLayer) {
            dataLayer.addListener('addfeature', savePolygon);
            dataLayer.addListener('removefeature', savePolygon);
            dataLayer.addListener('setgeometry', savePolygon);
        function loadPolygons(map) {
            var data = JSON.parse(localStorage.getItem('geoData'));
            map.data.forEach(function (f) {
                map.data.remove(f);
            map.data.addGeoJson(data);
        function savePolygon() {
            map.data.toGeoJson(function (json) {
                localStorage.setItem('geoData', JSON.stringify(json));
        initMap();
    </script>
<style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;