JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;ext=.js"></script>
<div id="map">
</div>

CSS

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


.infoContent{ width:350px; max-width:350px; position:relative;}

.infoContent img { width:60px; height:60px; float:left;  }
.infoContent span { margin-left:70px; width:280px; display:block; }

JavaScript

var TarihiArray = [{


}];

var tarihIcon = 'https://image0.flaticon.com/icons/png/32/1466/1466989.png';
var infoWindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById("map"), {
     center: new google.maps.LatLng(38.418919, 27.128778),
     zoom: 17,
     mapTypeId: 'roadmap'
   });



   var plusOneMarker = new google.maps.Marker({
     position: {
       lat: 38.418919,
       lng: 27.128778
     },
     map: map,
     icon: tarihIcon,
     title: 'Saat Kulesi'
   });


   var Asansor = new google.maps.Marker({
     position: {
       lat: 38.4142264,
       lng: 27.1252341
     },
     map: map,
     icon: tarihIcon,
     
     title: 'Tarihi Asansör'
   });


  var HavaGazi = new google.maps.Marker({
     position: {
       lat: 38.442771,
       lng: 27.145449
     },
     map: map,
     icon: tarihIcon,
     title: 'Tarihi Havagazı Fabrikası'
   });
   
   
   
   google.maps.event.addListener(plusOneMarker, 'click', function () {
        infoWindow.setContent("<div class=\"infoContent\"><img src=\"https://img.haberler.com/haber/431/saat-kulesi-nin-cesmeleri-yine-calindi-5055431_o.jpg\" /><span><strong>Saat Kulesi</strong><br/>1900 yılında inşaa edilen saat kulesi günümüze kadar çalışma özelliğini korumaktadır.<br/><a href=\"\">detaylar</a></span></div>");
        infoWindow.open(map, plusOneMarker);

    });