Places Search Box

by designworksinteractive

HTML

<div id="search-panel">
      <input id="target" type="text" placeholder="Starbucks">
    </div>
<table border="1" style="width:800px; height: 500px;"><tr><td style="width:80%;height:100%;">
    <div id="map_canvas" style="width:600px; height: 500px;"></div>
</td><td style="width:300px;height:500px">
    <div id="side_bar"></div>
</td></tr></table>
<div id="info"></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"></script>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
//  width: 80%;
}

#side_bar {
  height: 100%;
  width: 300px;
  overflow: auto;
}

@media print {
  html, body {
    height: auto;
  }

  #map_canvas {
    height: 650px;
  }
}
#search-panel {
        position: absolute;
        top: 5px;
        left: 100px;
        margin-left: 0px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }

JavaScript

var map = null;
var gmarkers = [];
var destMarkers = [];
var service = null;
var noAutoComplete = true;
var initialService = null;
var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50)});
    var startLoc = new google.maps.LatLng(40.7902778, -73.9597222); // Manhattan, NY
    var circle = new google.maps.Circle({
        center:startLoc,
        radius:10*1609.34, // 10 miles
        strokeWeight: 2,
        strokeColor: "black",
	strokeOpacity: 0.9,
        fillColor: "red",
        fillOpacity: 0.15,
	clickable: false,
        map: map
     });

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
  var places = [];
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
  gmarkers = [];

  document.getElementById('side_bar').innerHTML ="<h5>found "+results.length+" places</h5>";
  for (var i = 0; i < results.length; i++) {
    var place = results[i];
    places.push(place);
    createMarker(results[i]);
  }
    
  map.fitBounds(circle.getBounds());
  // if (markers.length == 1) map.setZoom(17);
  var destArray = [];
  destMarkers = [];

  for (var i=0; i<gmarkers.length;i++){
    if (google.maps.geometry.spherical.computeDistanceBetween(startLoc, gmarkers[i].getPosition()) < 10 * 1609.34) { // 1609.34 meters/mile
       destArray.push(gmarkers[i].getPosition());
       destMarkers.push(gmarkers[i]);
    }
  }
  
  document.getElementById('info').innerHTML ="found "+destArray.length+" places within 10 miles<br>";
  var DistanceMatrixService = new google.maps.DistanceMatrixService();
  DistanceMatrixService.getDistanceMatrix(
    {
      origins: [startLoc],
      destinations: destArray,
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
      avoidHighways: false,
      avoidTolls: false,
    }, function (response, status) {
       var distancefield = distancefield;
         if (status ==...