JSFiddle - React, Tailwind, and code Playground

by Brent Coder

HTML

<script src="https://maps.google.com/maps/api/js"></script>
<body onload="initialize()">

<div id="map" style="width:600px; height:600px; display:block;">
    <div id="map_canvas" style="width:600px; height:600px;"></div>
</div>

<form style="float:left; ">
   <select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)>
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>
</form>

</body>

JavaScript

function updateMap(selectControl)
{
switch(selectControlValue)
{

case 'school1':
  var polyline = new google.maps.polyline({
  path: [
  new google.maps.LatLng(51.408664,0.114405),
  new google.maps.LatLng(51.412973,0.114973),
  new google.maps.LatLng(51.417979,0.097195),
  new google.maps.LatLng(51.421214,0.023720)],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});
  var latLng = new google.maps.LatLng(51.41859298,0.089179345)
  break;
case 'school2':
  var polyline = new google.maps.polyline({
  path: [
  new google.maps.LatLng(51.408664,0.114405),
  new google.maps.LatLng(51.412973,0.114973),
  new google.maps.LatLng(51.417979,0.097195),
  new google.maps.LatLng(51.421214,0.023720)],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2

  });
  var latLng = new google.maps.LatLng(51.382522,0.045018)
  break;
default:
  break;
}
initialize(polyline, latLng);
}

function initialize() {
        var myLatLng = schoolLatLng;
        var myOptions = {
          zoom: 13,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };


       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

       polyline.setMap(map);

      }