Points In Water

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" id="lat" value=51.520497>
<input type="text" id="lon" value=-0.109827>
<button onclick="paint()">paint</button>
<div id="map-canvas"></div>
<div class="container">
    <div class="people"></div>
    <canvas id="mapImage" class="map" width="640" height="450">
</div>
<div id="results"></div>

CSS

#map-canvas {
    height: 450px;
    width: 640px;
}

.person {
    position: absolute;
    background: rgba(0, 0, 255, .7);
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
#mapImage{
  display:none;
}

JavaScript

/*
Explanation of the code...

Input: 
center
radius


- 1) Select 10 equidistant points in a circunference from a given center and radius
- 2) Creating a mapImage to store the google static image representing those same 10 points and same center
- 3) Define a hidden image (called 'water') with the same center that will highlight the water (style=feature:water) with a selected specific color (color:0x00FF00)
- 4) Checked for each of the 10 points on mapImage if there are over water. By checking its representing color of each point in the 'water' image
- 5) If the point is over water, it will be checked along the line connecting the center and that point where is the further point on land
- 6) When found, it will be checked if that point on the line is 70% of the line's distance
- 7) After recalculating the new points on land on the static image, it will be created markers for all the final points on the original map

Note: its used the map.getProjection(), so its needed the map to be loaded first or this will be undefined


What to merge on the other script...
- Point 1) Not needed, its already done in the other script
- Point 2) to merge but the image must be hidden
- Point 3) to merge
- Point 4) to merge
- Point 5) to merge
- Point 6) to merge
- Point 7) to merge (this will be the final points on the other script)

*/



function init(){
var allFinalPoints = [];
	function initialize() {
	var map;
	var numberedMarker = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=___|FE6256|000000";
	var mapZoom = 12;
	var totalPoints = 10
	//var latCenter = 40.826065;
	//var lonCenter =  -0.135785;
	if(document.getElementById("lat").value!="")latCenter=document.getElementById("lat").value;
	if(document.getElementById("lon").value!="")lonCenter=document.getElementById("lon").value;
	//var latlon = "51.520497,-0.109827"
	var centerLatLng = new google.maps.LatLng(latCenter, lonCenter);
	//var radius = 3000;  //in meters
	var mapImageUrl =...