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" />
      <button>procurar</button>
      
  </body>

</html>

CSS

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

#pac-what {
    
    position: absolute;
    top: 10px;
    left: 80px;
    z-index: 10;
}
button {
     position: absolute;
    top: 10px;
    left: 280px;
    z-index: 10;
}
#pac-input {
    position: absolute;
    top: 40px;
    left: 80px;
    z-index: 10;
}

JavaScript

var map;
      var infoWindow;
      var service;

      function initialize() {
        
        navigator.geolocation.getCurrentPosition(function(pos) {
      
        
            map = new google.maps.Map(document.getElementById('map'), {
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
              zoom: 16,
              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);
    
            });
            
        });
      }

     
      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,
          position: place.geometry.location,
          icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png'
        });

        google.maps.event.addListener(marker,...