Несколько кастомных попапов в Google Maps api

.map{ 
  width: 500px; 
  height: 300px; 
} 
.map_item { 
  z-index: 5000; 
  background: #fff; 
  padding: 10px 16px; 
  -webkit-border-radius: 5px; 
          border-radius: 5px; 
  position: relative; 
  -webkit-box-shadow: 0px 2px 35px 0px rgba(140, 160, 182, 0.24); 
          box-shadow: 0px 2px 35px 0px rgba(140, 160, 182, 0.24); 
} 
.map_item:after { 
  content: ''; 
  position: absolute; 
  bottom: -22px; 
  right: -8px; 
  height: 44px; 
  width: 22px; 
  background: url(../img/marker.png); 
  background-repeat: no-repeat; 
  -webkit-background-size: contain; 
          background-size: contain; 
} 
.map_item h3 { 
  color: #e7ae6f; 
  font-size: 14px; 
  margin-bottom: 4px; 
} 
.map_item h3 span { 
  font-size: 18px; 
  font-family: muller_bold; 
} 
.map_item h4 { 
  font-size: 13px; 
  color: #6e7887; 
  font-family: muller_light; 
} 
.popup-tip-anchor { 
  height: 0; 
  position: absolute; 
  width: 130px; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  margin-top: 0; 
} 
/* The bubble is anchored above the tip. */ 
.popup-bubble-anchor { 
  position: absolute; 
  width: 100%; 
  bottom: 0; 
  left: 0; 
} 
/* The popup bubble itself. */ 
.popup-bubble-content { 
  position: absolute; 
  top: 0; 
  left: 0; 
  -webkit-transform: translate(-100%, 0%); 
      -ms-transform: translate(-100%, 0%); 
          transform: translate(-100%, 0%); 
  /* Style the info window. */ 
  background-color: white; 
  padding: 5px; 
  -webkit-border-radius: 5px; 
          border-radius: 5px; 
  font-family: sans-serif; 
  max-height: 60px; 
  -webkit-box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5); 
          box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5); 
}

<div class="map" id="map"></div> 
			 
			<div class="map_item" id="map_item"> 
				<h3><span>18 000</span> руб</h3> 
				<h4>Иван Иванов</h4> 
			</div> 
			<div class="map_item" id="map_item2"> 
				<h3><span>17 000</span> руб</h3> 
				<h4>Иван Иванов</h4> 
			</div> 
			<div class="map_item" id="map_item3"> 
				<h3><span>16 000</span> руб</h3> 
				<h4>Иван Иванов</h4> 
			</div> 
       
       
      <script> 
        var map, popup, popup2, popup3, Popup; 
		function initMap() { 
			definePopupClass(); 
 
	    	map = new google.maps.Map(document.getElementById('map'), { 
		        center: {lat: 55.75222, lng: 37.61556}, 
			    zoom: 10, 
			    disableDefaultUI: true, 
		        styles: [ 
	            {elementType: 'geometry', stylers: [{color: '#ebeff4'}]}, 
	            {elementType: 'labels.text.stroke', stylers: [{color: 'transparent'}]}, 
	            {elementType: 'labels.text.fill', stylers: [{color: '#aab5c5'}]}, 
	            
	            { 
	              featureType: 'water', 
	              elementType: 'geometry', 
	              stylers: [{color: '#d4dbe3'}] 
	            }, 
	            { 
				  featureType: "administrative.country", 
				  elementType: "geometry.stroke", 
				    stylers: [ 
				      { 
				        color: "#cad2dc" 
				      }, 
				      { 
				        weight: '1' 
				      } 
				    ] 
				}, 
	            { 
	              featureType: 'water', 
	              elementType: 'labels.text.fill', 
	              stylers: [{color: '#d4dbe3'}] 
	            }, 
	            { 
	              featureType: 'water', 
	              elementType: 'labels.text.stroke', 
	              stylers: [{color: '#d4dbe3'}] 
	            } 
	        	] 
	        }); 
      		popup = new Popup( 
			      new google.maps.LatLng(55.75222, 37.61556), 
			      document.getElementById('map_item')); 
		  	popup.setMap(map); 
			popup2 = new Popup( 
			      new google.maps.LatLng(55.75322, 37.61536), 
			      document.getElementById('map_item2')); 
		  	popup2.setMap(map); 
		  	popup3 = new Popup( 
			      new google.maps.LatLng(55.75222, 37.61540), 
			      document.getElementById('map_item3')); 
		  	popup3.setMap(map); 
	  	} 
 
		function definePopupClass() { 
		  
		  Popup = function(position, content) { 
		    this.position = position; 
 
		    content.classList.add('popup-bubble-content'); 
 
		    var pixelOffset = document.createElement('div'); 
		    pixelOffset.classList.add('popup-bubble-anchor'); 
		    pixelOffset.appendChild(content); 
 
		    this.anchor = document.createElement('div'); 
		    this.anchor.classList.add('popup-tip-anchor'); 
		    this.anchor.appendChild(pixelOffset); 
 
		    this.stopEventPropagation(); 
		  }; 
		  Popup.prototype = Object.create(google.maps.OverlayView.prototype); 
 
		  Popup.prototype.onAdd = function() { 
		    this.getPanes().floatPane.appendChild(this.anchor); 
		  }; 
 
		  Popup.prototype.onRemove = function() { 
		    if (this.anchor.parentElement) { 
		      this.anchor.parentElement.removeChild(this.anchor); 
		    } 
		  }; 
 
		  Popup.prototype.draw = function() { 
		    var divPosition = this.getProjection().fromLatLngToDivPixel(this.position); 
		    var display = 
		        Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ? 
		        'block' : 
		        'none'; 
 
		    if (display === 'block') { 
		      this.anchor.style.left = divPosition.x + 'px'; 
		      this.anchor.style.top = divPosition.y + 'px'; 
		    } 
		    if (this.anchor.style.display !== display) { 
		      this.anchor.style.display = display; 
		    } 
		  }; 
 
		  Popup.prototype.stopEventPropagation = function() { 
		    var anchor = this.anchor; 
		    anchor.style.cursor = 'auto'; 
 
		    ['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart', 
		     'pointerdown'] 
		        .forEach(function(event) { 
		          anchor.addEventListener(event, function(e) { 
		            e.stopPropagation(); 
		          }); 
		        }); 
		  }; 
		} 
      </script> 
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHc0g5_19kWscLU6PDZCspCZXhOyY2lnA&callback=initMap" 
    async defer></script>