fit bounds by radius
by grant
HTML
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=weekly"></script>
<p>if it starts giving a 'NoApiKeys' error go to <a href="https://developers.google.com/maps/documentation/javascript/overview" target="_blank">google developers</a></p>
<p>Get a new weekly api key by clicking the edit jsfiddle. Copy that key here.</p>
<P>the gist at github is standard geojson.</P>
SCSS
#map {
width: 100%;
height: 70vh;
}
p {
font-family: sans-serif;
font-size: smaller;
margin: 5px;
}
JavaScript
let map;
function initialize() {
// permits json
var permits = 'https://gist.githubusercontent.com/grantiago/01ee6105278e80eacd7d1ec8e0576899/raw/598b585bddc83d9bdd75dc76ed9668fcd8594f57/geojson.json';
// map properties
var mapProp = {
zoom: 0,
mapTypeId: 'terrain'
};
// google map object
var map = new google.maps.Map(document.getElementById("map"), mapProp);
// load GeoJSON.
map.data.loadGeoJson(permits, null, function () {
// create empty bounds object
var bounds = new google.maps.LatLngBounds();
// loop through features
map.data.forEach(function(feature) {
var geo = feature.getGeometry();
geo.forEachLatLng(function(LatLng) {
bounds.extend(LatLng);
});
});
// fit data to bounds
map.fitBounds(bounds);
});
var infowindow = new google.maps.InfoWindow({
content: "amaral 2022"
});
map.data.addListener('click', function(event) {
let id = event.feature.getProperty('ID');
let amount = event.feature.getProperty('amount');
let name = event.feature.getProperty('species');
let date = event.feature.getProperty('date');
//if (typeof id == "undefined") id = event.feature.getProperty('amount');
//if (typeof name == "undefined") name = event.feature.getProperty('species');
let html = amount + " " + name + "<br /> " + date;
infowindow.setContent(html);
infowindow.setPosition(event.latLng);
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -25)
});
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);