Integrating Your First Map

To make the most of the data we provide, you may need to add a map to your application. We don't make one ourselves, but Google has a great & easy one that you can get setup in minutes.

After you've integrated your map, you'll be able to:

Call the "setPin" function provided below to plot a latitude/longitude pair on the map
Use the "setBoundary" function provided below to take the shape provided in the Property Boundary API response and draw it on the map.

Google Account Setup for Map Embed Widget

To set up Google Maps in your app, do these once: create a Google Cloud project + billing, enable the Maps JavaScript API, and create an API key (Google’s step-by-step is here). Get Google API Key

Before you ship, lock the key down with HTTP referrer restrictions (your domain) and API restrictions (only “Maps JavaScript API”), following Google’s security guidance. Security for Google Map

<!-- index.html -->
<div id="map" style="width:100%;height:500px"></div>

<script>
  // Your app will call these two functions with real data:
  // setPin(37.7749, -122.4194)
  // setBoundary([[37.78,-122.42],[37.79,-122.41],[37.77,-122.40]])
</script>

<script
  async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=marker"
></script>

// map.js (inline is fine too)
let map, pin, boundary;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12,
    mapId: "YOUR_MAP_ID_OPTIONAL", // optional but recommended for Advanced Markers
  });
}

// Plot/update a pin from (lat, lng)
function setPin(lat, lng) {
  const pos = { lat, lng };
  if (!pin) {
    pin = new google.maps.marker.AdvancedMarkerElement({ map, position: pos });
  } else {
    pin.position = pos;
  }
  map.panTo(pos);
}

// Draw/update a boundary from [[lat,lng], ...]
function setBoundary(latLngPairs) {
  const path = latLngPairs.map(([lat, lng]) => ({ lat, lng }));

  if (boundary) boundary.setMap(null);
  boundary = new google.maps.Polygon({
    paths: path,
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillOpacity: 0.2,
  });
  boundary.setMap(map);

  const bounds = new google.maps.LatLngBounds();
  path.forEach(p => bounds.extend(p));
  map.fitBounds(bounds);
}