dvas0004/polygon_tiling_google_maps.html

## polygon_tiling_google_maps.html
<!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>
	<!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>