JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mapDiv" style="width: 600px; height: 400px;">
</div>
<script>
//for using the google map without a key
window._alert = window.alert;
window.alert = function() {return;};
</script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=AIzaSyC2YxRC0b3AKEHgj7DQ4ghcGmlxU3OaI4k" type="text/javascript"></script>
JavaScript
window.radiusOfEarth = 6371; // km
window.setupMap = function() {
window.map = new GMap2(document.getElementById("mapDiv"));
var centerPoint = new GLatLng(37.4419, -122.1419);
map.setCenter(centerPoint, 8);
map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());
var marker = new GMarker(centerPoint);
var markerText = "Center @ 37.4419, -122.1419";
GEvent.addListener(marker, "click", markerClickHandler(marker, markerText));
map.addOverlay(marker);
var points = pointsAround(37.4419, -122.1419, 50);
//_alert(points.length);
for (var index = 0; index < points.length; index++) {
var point = points[index];
var latlng = new GLatLng(point.lat, point.lng);
marker = new GMarker(latlng);
markerText = "Marker @ " + point.lat + ", " + point.lng;
GEvent.addListener(marker, "click", markerClickHandler(marker, markerText));
map.addOverlay(marker);
}
};
window.markerClickHandler = function(marker, text) {
return function() {
marker.openInfoWindowHtml(text);
};
};
window.pointsAround = function(centerLat, centerLng, radius, numInterpolations) {
var result = [];
//do annoying trig maths to work out the delta in latitude between our start and end points
var targetD = radius; //km
var fractionalDistance = (targetD / radiusOfEarth) / 2;
var sqrtA = Math.sin(fractionalDistance);
var a = sqrtA * sqrtA;
var sinHalfDLat = Math.sqrt(a);
var dLat = Math.asin(sinHalfDLat) * 2;
var dLatDegrees = degrees(dLat);
var minLat = centerLat - dLatDegrees; //furthest valid latitude to the above the origin
var maxLat = centerLat + dLatDegrees; //furthest valid latitude to the below the origin
var centerLatRadians = radians(centerLat);
//topmost and bottommost points in the circle
result.push({lat: minLat, lng: centerLng});
result.push({lat:...