Place searches

by Wolf

HTML

<div id="map"></div>
<div id="results"></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&callback=initMap&v=3.exp" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  width: 50%;
  height: 100%;
  float: left;
}
#results, #attribution {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;
var infowindow;

function initMap() {
  var pyrmont = {lat: -33.867, lng: 151.195};
  var manila = {lat: 14.603, lng: 121.02};
  var manilaBB = {north: 14.635, south: 14.571, east: 121.05, west: 120.97};
  var request = {bounds: manilaBB, keyword: 'hotel'};

  map = new google.maps.Map(document.getElementById('map'), {
    center: manila,
    zoom: 15
  });
  map.fitBounds(manilaBB);

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(document.getElementById('results'));
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    var r = document.getElementById('results');
    //r.innerHTML = "";
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
			createEntry(r, results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

function createEntry(container, place) {
  var div = document.createElement('div');
	div.innerHTML = place.name;
  container.appendChild(div);
}