var map;
var circle;
var markers = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['circle']
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 0.4,
strokeWeight: 5,
strokeOpacity: 0.4,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
function onCircleComplete(shape) {
if (shape == null || (!(shape instanceof google.maps.Circle))) return;
circle = shape;
google.maps.event.addListener(circle, 'radius_changed', function() {
performSearch(circle);
});
google.maps.event.addListener(circle, 'center_changed', function() {
performSearch(circle);
})
performSearch(circle);
}
function performSearch(shape) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var request = {
location: shape.center,
radius: shape.radius,
keyword: 'restaurant'
};
service.radarSearch(request, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
if (google.maps.geometry.spherical.computeDistanceBetween(placeLoc, circle.getCenter()) > circle.getRadius())
// if marker outside circle, don't add it to the map
return;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
var that = this;
service.getDetails({
placeId: place.place_id
}, function(result, status) {
infowindow.setContent(result.name + "<br>" + result.formatted_address);
infowindow.open(map, that);
});
});
markers.push(marker);
}
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,drawing"></script>
<div id="map_canvas"></div>

You are watching: results out of the defined radius google maps api. Info created by GBee English Center selection and synthesis along with other related topics.