JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<!DOCTYPE html>
<html>
  
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </head>
  
  <body onload="initialize()">
    <p>
      <form action="#">
        <select onchange="selectedLocation()" id="location">
          <option value="None">Select Location</option>
          <option value="Location 1">Location 1</option>
          <option value="Location 2">Location 2</option>
        </select>
      </form>
    </p>
    <div id="map_canvas" style="width:600px; height:400px"></div>
  </body>

</html>

JavaScript

function initialize() {
        var latlng = new google.maps.LatLng(0, 0);
        var myOptions = {
          zoom: 1,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP


        };
        
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          
    var two = new google.maps.LatLng(37.7699298, -122.4469157);
    var marker2 = new google.maps.Marker({
    position: two,
    title:"Hello World!"
});
          
    var one = new google.maps.LatLng(-39.048252, 174.075623);
    var marker1 = new google.maps.Marker({
    position: one,
    title:"Hello World!"
});
          
    var three = new google.maps.LatLng(-39.088252, 174.075623);
    var marker3 = new google.maps.Marker({
    position: three,
    title:"Hello World!"
});
          
          marker1.setMap(map);
          marker2.setMap(map);
          marker3.setMap(map);

      }

      function selectedLocation() {
        var selected = document.getElementById("location").value;
        if (selected == "Location 1") {
          var location1 = new google.maps.LatLng(-39.048252, 174.075623);
          map.setCenter(location1);
          map.setZoom(12);
   
        } else if (selected == "Location 2") {
          var location2 = new google.maps.LatLng(-45.333442, 154.334421);
          map.setCenter(location2);
          map.setZoom(12);
     

        }
        
        
      }