title: How do I get google maps to display nearby restaurants?
body: <p>I am trying to create a site that uses Google Maps API to search for restaurants near to the users location. I don't want it to load on start up, I will add a button that will initiate the search. This is the code I have. I am getting a map but there are no markers and no restaurants being shown. I have a Places API enabled and a div with <code>id="map:</code> in my body. Why am I not seeing the restaurants?</p>
  
  <pre><code>var map;
  
  function createMap(){
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 40.0519752, lng: -76.314270999999},
      zoom: 10 
    });
  
  
  
  var request ={
    location: center,
    radius: 8047,
    types: ['cafe']
  }
  
  var service = new google.maps.places.PlacesService(map);
  
  service.nearbySearch(request, callback);
  }
  
  function callback(results, status) {
    if(status ==google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i &lt; results.length; i++) {
        createMarker(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.addDomListener(window, 'load', createMap);
  
   &lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY&amp;callback=createMap&amp;libraries=places" async defer&gt;&lt;/script&gt;
  
  </code></pre>