JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing">
    </script>

<div id="map_canvas"></div>

CSS

#map_canvas {
    display: block;
    width: 100%;
    height: 500px;
}

JavaScript

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(32.30, -86.40),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON
                ]
        },
        markerOptions: {
            icon: 'images/beachflag.png'
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    
  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(32.37, -86.47),
      new google.maps.LatLng(32.33, -86.43));


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

  var oldmap = new google.maps.GroundOverlay(
      "http://sutherlandboswell.com/shared/bus2.png",
      imageBounds);
  oldmap.setMap(map);
    drawingManager.setMap(map);
    
}

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