Data Layer: Styling

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Data Layer: Styling</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=drawing&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
<div id="map" class="map"></div>
    <div id="map2" class="map" style="top:-100%;"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.map {
        width: 100%;
        height: 100%; 
        background:transparent !important;
    }

JavaScript

function initMap() {
  let map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: {
      lat: 40.7127753,
      lng: -74.0159728
    },
  });
  let map2 = new google.maps.Map(document.getElementById('map2'), {
    mapTypeControl: false,
    backgroundColor: 'hsla(0, 0%, 0%, 0)',
    zoom: map.getZoom(),
    styles: [{
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }]
    }],
    center: map.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.bindTo('center', map2, 'center');
  map.bindTo('zoom', map2, 'zoom');
  // Load GeoJSON.
  map.data.addGeoJson(JSON.parse(geoJson));
  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    fillColor: "green",
    fillOpacity: 1.0,
    strokeWeight: 1,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON,
      ],
    },
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    console.log(e.overlay.getPath())
    map.data.add({
      geometry: new google.maps.Data.Polygon([e.overlay.getPath().getArray()])
    });
    map.data.toGeoJson(function(geoJson) {
      console.log(geoJson);
      console.log(JSON.stringify(geoJson));
    });
  });
}
var geoJson =...