JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>My MAP</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.0.js'></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </head>
  
  <body>
    <!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:650px; height:345px"></div>
      </body>
    
    </html>
  </body>

</html>

JavaScript

function initialize() {
        var latlng = new google.maps.LatLng(-40.513799, 173.583984);
        var myOptions = {
          zoom: 1,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          panControl: false,
          streetViewControl: false,
          zoomControl: false,
          scaleControl: false,
          mapTypeControl: false
        };

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


        var one = new google.maps.LatLng(-39.048252, 174.075623);
        var marker1 = new google.maps.Marker({
          position: one
        });




        var three = new google.maps.LatLng(-39.088252, 174.075623);
        var marker3 = new google.maps.Marker({
          position: three
        });



        marker1.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);


        }


      }
      //]]>