Menu
I am working on a website in which I want to make a circle on google map either around current location or some manual address.
Users will have option to decide whether they want to make circle around current location or some random address they will provide. (Users would have the option to put manual address inside current location as shown below in an image)
Now we also need to make sure that circle is of particular radius (0-20/70km from the current location) as well and user needs to decide that as well. (The line beneath the current location will decide the radius which users can move here and there 0-70km)
For example: user want to create a circle from current location till 30KM or user want to create a circle from some random address till 20KM.
The HTML code which I have used in order to make a search bar for search radius is:
<div class="input-searchradius">
<input class="form-control search_radius mb-4" type="text" placeholder="search radius">
</div>
Problem Statement:
(1) I am wondering what changes I need to make or code I need to add so that the items are being searched around a specific radius. I think, I need to integrate the code Google Maps circle but I am not sure how I can do that.
(2) On hit of search radius on the website the following options/screen will appear at the bottom:
539
If you're using CalcMaps, click on Draw a circle and add the circle on the map area you're interested in. Use can then use the drop-down menu to select the radius type you want to use. The tool automatically calculates the circle area as well.
Google Map Developers Distance is given in feet, meters, kilometers, and miles. Draw a circle - Enter a radius then click a point or enter an address to draw a circle on a google map.
As you conduct multiple searches, you'll see a blue bar at the bottom of the left side of the Maps page. You can click on it to expand the widget, which will list the searches that you have made. You can also turn searches on or off by clicking on the box to the side of each search.
Following @SirPeople suggestions here is the complete code that addresses your core problem statement of getting location input from user, update map, and set dynamic radius around it.
here is JS Fiddle link https://jsfiddle.net/innamhunzai/63vcthp7/3/
JS:
var circle;
var map;
function initMap() {
var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
map = new google.maps.Map(document.getElementById('map'), {
center: centerCoordinates,
zoom: 4
});
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
var infowindowContent = document.getElementById('infowindow-content');
var autocomplete = new google.maps.places.Autocomplete(input);
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
circle = new google.maps.Circle({
map: map,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
autocomplete.addListener('place_changed', function() {
document.getElementById("location-error").style.display = 'none';
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
document.getElementById("location-error").style.display = 'inline-block';
document.getElementById("location-error").innerHTML = "Cannot Locate '" + input.value + "' on map";
return;
}
map.fitBounds(place.geometry.viewport);
marker.setPosition(place.geometry.location);
circle.setCenter(place.geometry.location);
marker.setVisible(true);
circle.setVisible(true);
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = input.value;
infowindow.open(map, marker);
});
}
function updateRadius() {
circle.setRadius(document.getElementById('radius').value * 1609.34);
map.fitBounds(circle.getBounds());
}
**CSS:**#map {
height: 400px;
}
**HTML**<html>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="label">
Location search
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location">
<div id="location-error"></div>
</div>
<div>
<input type="range" id="radius" name="radius" min="0" max="100" onchange="updateRadius()">
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
async defer></script>
</body>
</html>Let's try to give you some first steps, I would no code the whole app, but rather give you some guide lines in to how to solve the small subproblems that you have:
Adding a circle in a map
Well, for this you have many different options for input, but the most important part is the addCircle function:
function addCircle(center){
circle = new google.maps.Circle({
map: map, //The existing map
center: center,
radius: 200, //This will be modified afterwards
zindex: 100
});
}
The center could come from a click for example:
// Area is wherever you want to attach the click, either a polygon, a map...
google.maps.event.addListener(area, "click", function(event) {
addCircle(event.latLng);
});
OR by getting the position of a certain address (This is documented as well), OR whatever method (drag and drop the circle, drag the marker blablabla)
Adding a dynamic radius
Well, if we know that the radius of the Circle is given in meters, then is very easy to give the addCircle function the correct radius. For example, 20km -> 20 000 meters. So you just have to be able to access radius when calling addCircle (it can be an argument, a global variable... your choice).
We are done with the drawing part, lets now search within that circle.
Getting only the markers inside the circle
There is a prerequisite here, to have all the markers of your map. You may have an array of places that you get from a database or maybe you get the markers from Google Maps API (Place search for example).
After that you will have to compute the distance between those markers and your given center, and check if the distance is smaller than your radius (with computeDistanceBetween is very easy), so you will know which markers are valid for you.
const markers = [//array of my valid markers with position];
markers.filter( (marker) =>
google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), center.getPosition()) < radius; // Filter the markers which distance is bigger than radius;
The rest of the job should be as easy, place the markers in the map and do whatever you like with this information.
EXTRAS
As a further help there are a pair of examples/answers that may be useful for you:
Full Google Map API example, very easy step by step guide.
Radius search using places, a good answer in to how to do radius search.
Example of radius search, open F12 and debug the code if you like, but it is easy to follow.
EDIT**: I did not realize that 2 of these link where also pointed out in the comments.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
