JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="container">
    <div id="map"></div>
   
</div>

CSS

#container{
    width: 400px;
    height: 300px;
    position:relative;
}
#map{
    width: 100%;
    height: 100%;

}

JavaScript

var mapOptions = {
						center: new google.maps.LatLng(40,10),
						zoom: 3
						
					};
map = new google.maps.Map(document.getElementById("map"), mapOptions);

var markers=[];
var contents = [];
var infowindows = [];


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({
      position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
      map: map,
      title: 'samplemarker'
    });
     markers[i].index = i;
    contents[i] = '<div class="popup_container">' +
    '</div>';


    infowindows[i] = new google.maps.InfoWindow({
    content: contents[i],
    maxWidth: 300
    });

    google.maps.event.addListener(markers[i], 'click', function() {
            console.log(this.index); // this will give correct index
            console.log(i); //this will always give 10 for you
            infowindows[this.index].open(map,markers[this.index]);
            map.panTo(markers[this.index].getPosition());
    });  
}