Menu
I created a map where a user inputs a zipcode and a radius (miles) and I want the map to center on the point created from the zipcode and only display (roughly) the area that would be within that radius. I am creating a Circle with the radius and trying to get the map to fit to that circle. Right now it centers correctly but the area being shown is way more than the radius given.
me.center_map = function(latlng, r) { // latlng is the point of the zipcode var circ = new google.maps.Circle(); circ.setRadius(r * 1609.0); circ.setCenter(latlng); map.setCenter(latlng); map.fitBounds(circ.getBounds()); // updates markers google.maps.event.trigger(map,'dragend'); }; EDIT: Drew the circle that I am using. Ideally the map would be zoomed in to the area within the radius.
848
You can change the zoom level of the map using simple steps. Step 1 Go to Add or Edit Map page . Step 2 Select 'Default zoom level' in the 'Map Information section'. Step 3 click save map and see the changes.
Google Maps does not support the radius functionality, which means that you can't determine the radius around a given location. But you can measure the distance between two or more points. As a quick reminder, the radius of a circle is the distance from its edge to its center.
Setting up the minimum or maximum Zoom value for Google Maps can be done by adding the shortcode attribute with Store Locator Shortcode. Furthermore, the maximum value of Google Maps Zoom level is 22. Therefore, the defined maximum value must be below or equal to 22, which is the default.
Click on the map and create a popup marker to select the point. From there, opt for the “Draw Radius.” Choose the proximity distance from the given address found within the radius options in the software. Once settings are entered, a map will show the highlighted parameters on the map.
The call to fitBounds() will zoom to the smallest zoom level that fully contains the bounds. If you were to zoom in 1 more zoom level the radius would not be fully contained within the map.
189
map.setZoom(map.getZoom() + 1); This depends how good the particular radius fit (in case it's not always the same). To display the area within the circle one would need to construct a rectangle that has it's corners on the circle's perimeter and fit the map's viewport to it's bounds. Eg. drawing a visible circle and a transparent rectangle with same center-point should work as described by the op.
20
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
