JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />

CSS

html, body, #map_canvas {
    height: 90%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;
var polyline;

positions = [new google.maps.LatLng(37.441883,-122.143019),
             new google.maps.LatLng(37.45296,-122.181725)];
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    $("#chkRouteLines").click(function () {
        if (!polyline || !polyline.setMap) {
          polyline = new google.maps.Polyline({
            path: positions,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            visible: true
          }); 
        }

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})


}
google.maps.event.addDomListener(window, "load", initialize);