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="Fixed">
  <div id="Fixed_img_c">
  </div>
</div>
<div class="container">

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Something</a>
    <a href="#">Something</a>
  </div>

  <div id="map" style="width:100%;height:500px"></div>
  <div id="Footer">
    <p id="Footer_text" class="paragraphs">dufault</p>
  </div>

CSS

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

JavaScript

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
var map;

function initMap() {
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(31.9, 35.8),
      mapTypeId: 'terrain'
    });



  //jordan cities locations
  var locations = [
    [31.8354533, 35.9674337],
    [31.186446, 35.6248844],
    [30.8071736, 35.5228078],
    [32.0522945, 35.9935951],
    [31.7157524, 35.7633807],
    [32.0321557, 35.655972],
    [32.3402518, 36.1527321],
    [32.2699656, 35.824437],
    [32.3415654, 35.7322292],
    [32.5525113, 35.81239],
    [30.2200923, 35.5467541],
    [29.5909744, 35.1750487]
  ]

  var info = [
    ["Amman", 4.007256],
    ["Al_Karak", 316.629],
    ["Tafilah", 96.291],
    ["Zarqa  ", 1.364878],
    ["Madaba  ", 189.192],
    ["Balqa   ", 491.709],
    ["Mafraq  ", 549.948],
    ["Jerash  ", 237.059],
    ["Ajloun  ", 176.080],
    ["Irbid  ", 1.770158],
    ["Ma'an", 144.083],
    ["Aqaba ", 188.160]
  ]
  var markers = new Array();

  for (var i = 0; i < locations.length; i++) {
    var coords = locations[i];
    var latLng = new google.maps.LatLng(coords[0], coords[1]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      label: info[i][0],
      title: info[i][0]
    });

    var infowindow = new google.maps.InfoWindow({
      content: info[i][1] + ""
    });

    google.maps.event.addListener(marker, 'click', function(marker, i) {
      return function() {
        openNav();
        //changeText();
        infowindow.setContent(info[i][1] + "");
        infowindow.open(map, marker);
      }
    }(marker, i));
    google.maps.event.addListener(map, 'click', function() {
      closeNav()
    });
  }
}
google.maps.event.addDomListener(window, 'load', initMap);