---
updatedAt: 2025-11-26T03:55:15.000Z
agentTools:
  projectIndex: https://developer.realestateapi.com/llms.txt
---

# Integrating Your First Map

Add a Map to your application and quickly get it setup to accept our latitude/longitude for pins & the parcel boundaries for drawing lot lines 

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). <Anchor label="Get Google API Key" target="_blank" href="https://developers.google.com/maps/documentation/javascript/get-api-key">Get Google API Key</Anchor>

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. <Anchor label="Security for Google Map" target="_blank" href="https://developers.google.com/maps/api-security-best-practices">Security for Google Map</Anchor>

<br />

```html
<!-- 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>
```

<br />

<br />

```javascript
// 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);
}

```

<br />