Google Map Places Radar Search

using a radar for pois

by chrisbenseler

HTML

<script
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,visualization&v=3.exp"></script>
 
  
  <body>
    <div id="map"></div>
       
      <input placeholder="O que quer procurar?" id="pac-what" />
      <input placeholder="Digite o local" id="pac-input" />
      
  </body>

</html>

CSS

#map {
  height:400px;
  width:100%;
  border:6px solid #dedede;
  margin:0 auto;
}

JavaScript

var map;
      var infoWindow;
      var service;

      function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(47.53772, -122.1153),
          zoom: 15,
          styles: [
            {
              stylers: [
                { visibility: 'simplified' }
              ]
            },
            {
              elementType: 'labels',
              stylers: [
                { visibility: 'on' }
              ]
            }
          ]
        });

        infoWindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);

        google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
          
          var input = document.getElementById("pac-input");
		var searchBox = new google.maps.places.SearchBox((input));

		google.maps.event.addListener(searchBox, 'places_changed', function() {
			var places = searchBox.getPlaces();
            map.setCenter(places[0].geometry.location);
			//map.setCenter(places[0].geometry.location
			//Map.deleteUserMarker();
			//Map.marker("user", places[0].geometry.location, map)
			//$scope.search(current_provider);
			
		});
      }

      function performSearch() {
        var request = {
          bounds: new google.maps.LatLngBounds(
       new google.maps.LatLng(47.5204, -122.2047),
       new google.maps.LatLng(47.5986, -122.0672)),
          keyword: 'park',
          types: ['park']
        };
        service.radarSearch(request, callback);
      }

      function callback(results, status) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          alert(status);
          return;
        }
        for (var i = 0, result; result = results[i]; i++) {
          createMarker(result);
        }
      }

      function createMarker(place) {
        var marker = new google.maps.Marker({
          map: map,
         ...