JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="map"></div>
<script type="text/javascript">
var poly, map, markers = {}, tmp_path = null, id_i = 1, MD = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
poly.addListener('click', polyOnClick);
}
function polyOnClick(event) {
if(tmp_path !== null) tmp_path.setMap(null);
tmp_path = null;
var
p_x = event.latLng.lat(),
p_y = event.latLng.lng(),
min_dist = 999999;
$.each(markers, function(k, v) {
if(typeof markers[(v.id+1)] == 'undefined') return false;
var
m_x = v.x,
m_y = v.y,
m2_x = markers[(v.id+1)].x,
m2_y = markers[(v.id+1)].y;
var
a = getDist(m_x, m2_x, m_y, m2_y),
b = getDist(m_x, p_x, m_y, p_y),
c = getDist(p_x, m2_x, p_y, m2_y);
var h = getHgh(a, b, c);
var min_mark_dist = (c > b)? b : c;
console.info(h/min_mark_dist);
if((h/min_mark_dist) < min_dist) {
min_dist = (h/min_mark_dist);
MD = [v.id, markers[(v.id+1)].id];
}
});
tmp_path = new google.maps.Polyline({
path: [{lat: markers[MD[0]].x, lng: markers[MD[0]].y},{lat: markers[MD[1]].x, lng: markers[MD[1]].y}],
geodesic: true,
strokeColor: '#76EE00',
strokeOpacity: 1,
strokeWeight: 6
});
tmp_path.addListener('click', tmp_pathOnClick);
tmp_path.setMap(map);
}
function tmp_pathOnClick(event) {
tmp_path.setMap(null);
tmp_path = null;
/* restore markers order and path */
var tmp_markers = {},
ctx_marker_id = 0; // here we...
CSS
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#map
{
height: 100%;
}