D3 Examples - just the map

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.28&key=AIzaSyBkEjkS9E2RAIJodE6gFHseUQx8_Cx2AiE&callback=initMap"
    async defer>
  <script async defer
  </script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {position:absolute;width: 100%;height: 100%;}
  </style>
    
</head>
    
<body>
  <div id="map"></div>
  <script>
      var map;
      var maxZoomService;
      var infoWindow;
  //Creates Google Maps Background
    function initMap() {
        // Create a map object and specify the DOM element for display.
        map = new google.maps.Map(document.getElementById('map'), 
        {center: {lat: 38.434084, lng: -78.864970},
        scrollwheel: true, zoom: 20, mapTypeId: "hybrid",heading: 60 });
    
        infoWindow = new google.maps.InfoWindow();
​
        maxZoomService = new google.maps.MaxZoomService();
​
        map.addListener('click', showMaxZoom);
      }
        //Creates a function that tells what the max zoom of the location is.
      function showMaxZoom(e) {
        maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
          if (response.status !== 'OK') {
            infoWindow.setContent('Error in MaxZoomService');
          } else {
            infoWindow.setContent(
                'The maximum zoom at this location is: ' + response.zoom);
          }
          infoWindow.setPosition(e.latLng);
          infoWindow.open(map);
        });
      }
    
  </script>
</body>
​
    