JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map;

function initialize() {
  var latlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 16,
    center: latlng,
    scrollwheel: false,
    disableDefaultUI: true,
    draggable: false,
    keyboardShortcuts: false,
    disableDoubleClickZoom: false,
    noClear: true,
    scaleControl: false,
    panControl: false,
    streetViewControl: false,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "hue": "#FFBB00"
      }, {
        "saturation": 43.400000000000006
      }, {
        "lightness": 37.599999999999994
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.highway",
      "stylers": [{
        "hue": "#FFC200"
      }, {
        "saturation": -61.8
      }, {
        "lightness": 45.599999999999994
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "hue": "#FF0300"
      }, {
        "saturation": -100
      }, {
        "lightness": 51.19999999999999
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "hue": "#FF0300"
      }, {
        "saturation": -100
      }, {
        "lightness": 52
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "hue": "#0078FF"
      }, {
        "saturation": -13.200000000000003
      }, {
        "lightness": 2.4000000000000057
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "hue": "#00FF6A"
      }, {
        "saturation": -1.0989010989011234
      }, {
        "lightness": 11.200000000000017
      }, {
        "gamma": 1
      }]
    }],
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  var geocoder_map = new google.maps.Geocoder();
  var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
 ...