Styled Maps

by Lawrence Ross

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

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;
}

JavaScript

function initMap() {
  // Styles a map in night mode.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 7,
    styles: [{
      featureType: 'administrative.province',
      elementType: 'geometry.stroke',
      stylers: [{
        visibility: '#off'
      }]
    }, ]
  });
  // SELECT 'kml_4326' FROM 19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA WHERE 'name_0' = 'United States of America';
  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'kml_4326',
      from: '19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA'
    },
    map: map
  });
}