I would like to create a page where the user enters me a place,I search this place, I search all the objects in my db that belong to that place and I also search all those who are within a mile of that place. I have already created the structure that allows me to look for a place with auto-completion and point on the map with this code:
function initialize() {
var myCoordsLenght = 6;
var mapOptions = {
center: new google.maps.LatLng(46.018151,8.956521),
zoom: 17
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
draggable: true
});
var circle = new google.maps.Circle({
map: map,
radius: 16093, // 10 miles in metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, 'dragend', function(evt){
document.getElementById('latitude').value= evt.latLng.lat().toFixed(myCoordsLenght);
document.getElementById('longitude').value = evt.latLng.lng().toFixed(myCoordsLenght);
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35),
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
document.getElementById('latitude').value= place.geometry.location.lat();
document.getElementById('longitude').value = place.geometry.location.lng();
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="type-selector" class="controls">
<label for="latitude">Latitude:</label>
<input id="latitude" type="text" value="" />
<label for="longitude">Longitude:</label>
<input id="longitude" type="text" value="" />
</div>
<div id="map-canvas" style="width: 500px; height: 400px;"></div>
</body>
</html>
But at this point how do I run a query that will return me the desired objects and update the map?
Thanks to all
You will need to find the bounds of the circle object that you have drawn on the map (which is unfortunately a rectangle). Pass this to your server side, and query the database using something like:
SELECT * FROM yourtable WHERE lat BETWEEN a AND c AND lng between b AND d
Where a and b are you top left coordinates and c and d are your bottom right. (more information available here).
Now that you have all objects within your bounding box you will need to pass them back to your front-end and determine whether or not they are within your radius. See this answer for more information, and you're done!