Add a city, county, state overlay to Google Map

01/30/2024
Back to Blogs
<!--
    To get the OSM ID for a county or municipality:
    1. Go to https://nominatim.openstreetmap.org/ui/search.html
    2. Search for the county or municipality.
    3. Click on "Details" and scroll to the OSM ID. Copy it.
    4. Go to http://polygons.openstreetmap.fr/index.py and paste the OSM ID.
    5. Copy the coordinates and remove unnecessary array wrappers.
    Author: Knol Aust
    Gist Keywords: google, maps, js, javascript, css
-->

<style>
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 400px;
  }
</style>

<div id="map"></div>

<!-- Load Google Maps with API Key -->
<script>
let map;

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 32.2988, lng: -90.1848 },
    zoom: 9,
  });

  const locationCoordinates = [
    // Load an array of lat, lng from cleaned results; must be formatted like the example below
    { lat: 32.2988, lng: -90.1848 },
  ];
  const locationOutline = new google.maps.Polygon({
    paths: locationCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#E6572F",
    fillOpacity: 0.35,
  });
  locationOutline.setMap(map);
}
</script>