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,
});
}
var geoJson = '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01384776566772,40.71283222634755],[-74.01206677888183,40.71205151790942],[-74.0127105090454,40.71019729868139],[-74.01331132386474,40.71035995155685],[-74.01365464661865,40.71009970676538],[-74.01442712281494,40.71037621682256],[-74.01384776566772,40.71283222634755]]]},"properties":{}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01672381852416,40.71865472137034],[-74.01286143754271,40.718248139094314],[-74.01485700104979,40.71120574010474],[-74.01661653016356,40.711953928711026],[-74.01631612275389,40.71348280971995],[-74.0174533793762,40.71362919010266],[-74.01672381852416,40.71865472137034]]]},"properties":{}}]}'
/* 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;
}
<!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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&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>