Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
polygon tiling google maps example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div><hr></div>
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var number_of_poly = 0;
function initialize() {
var mapOptions = {
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
//35.918981, 14.489933
var startPosition = new google.maps.LatLng(35.918981, 14.489933); //Sliema, MT
var radius = 50; //radius in meters
drawHorizontalHexagonGrid(map,startPosition,radius,24,9);
map.setCenter(startPosition);
}
function SE_heading(startPosition, radius){
var curPos = startPosition;
var width = radius * 2 * Math.sqrt(3)/2 ;
var new_pos = google.maps.geometry.spherical.computeOffset(curPos, width,135);
return new_pos;
}
function S_heading(startPosition, radius){
var curPos = startPosition;
var width = radius * 2 * Math.sqrt(3)/2 ;
var new_pos = google.maps.geometry.spherical.computeOffset(curPos, width,180);
return new_pos;
}
function drawHorizontalHexagonGrid(map,startPosition,radius,count, row_count){
var curPos = startPosition;
var width = radius * 2 * Math.sqrt(3)/2 ;
for(var j = 0;j < row_count; j++){
for(var i = 0;i < count; i++){
displayLocationElevation(map,curPos,radius);
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,90);
}
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,180);
curPos = google.maps.geometry.spherical.computeOffset(curPos, width*1.5,270);
for(var i = 0;i < count; i++){
displayLocationElevation(map,curPos,radius);
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,270);
}
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,180);
curPos = google.maps.geometry.spherical.computeOffset(curPos, width*1.5,90)
}
}
function displayLocationElevation(map,position,radius) {
var elevator = new google.maps.ElevationService;
// Initiate the location request
elevator.getElevationForLocations({
'locations': [position]
}, function(results, status) {
if (status === google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0].elevation > 8) {
number_of_poly += 1;
//alert (results[0].elevation + ' meters.');
var coordinates = [];
for(var angle= 0;angle < 360; angle+=60) {
coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle));
}
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: coordinates,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
map.setCenter(position);
}
}
});
}
function drawHorizontalHexagon(map,position,radius){
var coordinates = [];
for(var angle= 0;angle < 360; angle+=60) {
coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle));
}
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: coordinates,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
map.setCenter(position);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?keyYOUR_API_KEY&callback=initialize&libraries=geometry">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.