JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALACIKrqi2GvXNKF8TmqHWS-FO6V01ZRc&amp;callback=initMap"></script>
<div class="container-fluid">
  <div class="row">
    
    <div class="col-md-2 bg-light p-3">
        <h6>Konumlar</h6>
        <div class="row">
        <div class="col-md-12">asd</div>
        </div>
        
    </div>
    
    <div class="col-md-10">
     <div id="map"></div>


    </div>
    
  </div>
</div>



    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALACIKrqi2GvXNKF8TmqHWS-FO6V01ZRc&callback=initMap"
    async defer></script>

CSS

#map { width:100%; height:100vh; }

JavaScript

var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }