JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var gmap;
var currentMarker = new google.maps.Marker({
position: new google.maps.LatLng(54.13512, -117.0114),
draggable: true
});
var snapToRoute = null;
var polypath = new Array(
new google.maps.LatLng(54.13512, -117.0114),
new google.maps.LatLng(54.13353, -117.01141),
new google.maps.LatLng(54.1332, -117.01159),
new google.maps.LatLng(54.13241, -117.01157),
new google.maps.LatLng(54.13217, -117.01142),
new google.maps.LatLng(54.12725, -117.01143),
new google.maps.LatLng(54.12185, -117.00125),
new google.maps.LatLng(54.1188, -116.9955),
new google.maps.LatLng(54.11603, -116.99473),
new google.maps.LatLng(54.11517, -116.99281),
new google.maps.LatLng(54.10235, -116.97771),
new google.maps.LatLng(54.10244, -116.96093),
new google.maps.LatLng(54.10197, -116.96067),
new google.maps.LatLng(54.10158, -116.96075),
new google.maps.LatLng(54.09808, -116.95913),
new google.maps.LatLng(54.09725, -116.95668),
new google.maps.LatLng(54.09669, -116.95598),
new google.maps.LatLng(54.08378, -116.9471),
new google.maps.LatLng(54.08218, -116.94696),
new google.maps.LatLng(54.07374, -116.93832),
new google.maps.LatLng(54.07319, -116.93571),
new google.maps.LatLng(54.07185, -116.93527));
var polyline = new google.maps.Polyline({
path: polypath,
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 1
});
function initialize() {
gmap = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(54.10244, -116.96093),
zoom: 12
});
currentMarker.setMap(gmap);
polyline.setMap(gmap);
snapToRoute = new SnapToRoute(gmap, currentMarker, polyline);
}
google.maps.event.addDomListener(window, "load", initialize);
function SnapToRoute(map, marker, polyline) {
...