containsLocation()

by iselwin

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places,geometry&callback=initAutocomplete" async defer></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>

<script>
  function initAutocomplete() {
    var location = {
      lat: 45.029662,
      lng: -93.446626
    };
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: location
    });
    var triangleCoords = [
      {lat: 45.1221134048546, lng: -93.4221261051227},
      {lat: 45.1048506315009, lng: -93.4223835971881},
      {lat: 45.1017458069231, lng: -93.4246581104328},
      {lat: 45.0993981445303, lng: -93.4292929676105},
      {lat: 45.0974972245804, lng: -93.4311705139209},
      {lat: 45.0983530250593, lng: -93.4352689292957},
      {lat: 45.0982924378367, lng: -93.4415560272266},
      {lat: 45.0946570868316, lng: -93.4417169597675},
      {lat: 45.0967474419382, lng: -93.4476821926166},
      {lat: 45.0996087758486, lng: -93.4509515762329},
      {lat: 45.1046537452006, lng: -93.4597414043476},
      {lat: 45.1168594117478, lng: -93.4786670711566},
      {lat: 45.1246115315689, lng: -93.4839456584979},
      {lat: 45.1234079749371, lng: -93.4786342693953},
      {lat: 45.1234621032403, lng: -93.4616287470183},
      {lat: 45.1395569069889, lng: -93.4618075877361}
    ];

    var friMapleGroveOne = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    friMapleGroveOne.setMap(map);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < friMapleGroveOne.getPath().getLength(); i++) {
      bounds.extend(friMapleGroveOne.getPath().getAt(i));
    }
    map.fitBounds(bounds);

   ...

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