JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_canvas" style="width: 100%; height: 400px"></div>

CSS

.infobox{
	box-shadow: 2px 2px 1px #888888;
	cursor: pointer;
	line-height: 10px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width: 126px;
	height: 58px;
	background: #fff;
	padding: 7px;
	padding-left: 23px;
	font-size: 11px;
}
.infobox .icon{
	position: absolute;
	margin-top: 5px;
	margin-left: -50px;
}
.infobox hr{
	border: none;
	border-top: 1px solid #ddd;
}
.infobox .detalii{
	color:#db5332;
	float: right;
}
.infobox a{
	color:#db5332;
	float: right;
}
.infobox .pic{
	float: left;
}

JavaScript

function initialize() {
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 13
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

    for (var i=0; i < 3; i++){
		var marker = new google.maps.Marker({
			map: theMap,
			draggable: true,
			position: new google.maps.LatLng(49.47216 + (0.2*i), -123.76307),
            icon: 'https://www.imobiliare.org/skins/default/Images/map_icons/vila.png',
			visible: true
		});

		var boxText  = '<div class="infobox" id="infobox_' + 0 + '"><img src="'+ 'https://www.imobiliare.org/skins/default/Images/map_icons/vila.png' +'" class="icon" /><b>'+ 'Vila' +'</b><br />'+ '250' +' m<sup>2</sup><br />'+ '450.000' +' &euro;<hr /><a href="http://www.imobiliare.org/anunt/'+ '1' +'">detalii &rsaquo;&rsaquo;</a><img src="http://www.imobiliare.org/skins/default/Images/icon_pic.png" class="pic"></div>',
            contentString = boxText;

        var myOptions = {
			content: boxText,
			disableAutoPan: false,
			maxWidth: 0,
			pixelOffset: new google.maps.Size(2, -63),
			zIndex: null,
			infoBoxClearance: new google.maps.Size(1, 1),
			isHidden: false,
			pane: "floatPane",
			enableEventPropagation: true,
		};

		var ib = new InfoBox(myOptions);
    
        var ibTimeout;
		google.maps.event.addListener(marker, "mouseover", function (e) {
            console.log('inside marker');
			ib.open(theMap, this);
		});
		google.maps.event.addListener(marker, "mouseout", function (e) {
            ibTimeout = setTimeout(function(){
                ib.close();
            }, 50);
		});
         google.maps.event.addListener(ib, 'domready', function(e){
             $('.infobox').on('mouseenter', function(e){
                 clearTimeout(ibTimeout);
             }).on('mouseleave', function(e){
                 clearTimeout(ibTimeout);
                 ib.close();
             });
       ...