JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
      </style>
      <script type="text/javascript"
        src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI">
      </script>
      <script type="text/javascript">
        function initialize() {
          var myOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
          };
          var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

             var centreicon = new GIcon();
          centreicon.constructor
          centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png ";
          centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png ";
          centreicon.iconSize = new GSize(12, 20);
          centreicon.shadowSize = new GSize(22, 20);
          centreicon.iconAnchor = new GPoint(6, 20);
          centreicon.infoWindowAnchor = new GPoint(5, 1);

          var marker = new GMarker(new GLatLng(-34.397, 150.644), centreicon);
          map.addOverlay(marker);
        }
      </script>
    </head>
    <body onload="initialize()">
      <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
  </html>