CODEWITHSUNDEEP
google-maps
Najib
Najib

Reputation: 510

Google Map Place API with area border

How to show the places with Area border? User will search in textbox and get a result like the image bellow. Google as a service provides that from map.google.com. But is there any API from where I can implement it in my website?

enter image description here

Upvotes: 0

Views: 1410

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Google doesn't provide that data via its APIs. You can use the Embed API to display a map with that data on it (if that is all you need)

(An alternative to display it on a Google Maps Javascript API v3 map, would be to use data from OpenStreetMaps: proof of concept fiddle, but that doesn't include the same data as Google Maps.)

example of polygon on embed map

To change the location of the embedded map dynamically, change the src of the iframe:

example of embed API map with changeable query

screenshot of resulting map

<input id="searchString" value="Keraniganj, Bangladesh" onchange="changeLocation();" /><br>
<script>
function changeLocation() {
  var ifrm = document.getElementById('map');
  var srcUrl="https://www.google.com/maps/embed/v1/place?q="+document.getElementById("searchString").value+"&key=AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I";
  ifrm.setAttribute('src',srcUrl);
}
</script>
<iframe id="map" 
  width="600" 
  height="450" 
  frameborder="0" 
  style="border:0"
  src="https://www.google.com/maps/embed/v1/place?q=Keraniganj%2C%20Bangladesh&key=AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I" allowfullscreen>
</iframe>

Upvotes: 2

Related Questions