JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
	<title>Google maps interactive</title>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
	<link type="text/css" rel="stylesheet" href="style.css" media="all">

</head>
<body>

	<div id="map-canvas"></div>
	<div class="controls">
		<p>Zoom</p>
		<i class="icon-plus-sign"></i> 
		<i class="icon-minus-sign"></i>

		<div class="pinWrapper">
			<p>Drop your pin</p>
			<div class="markers">
				<div id="m1" class="drag" style="left:0; background-image: url('https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/location-pointer.png')"></div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDnC44plDBgcsagXTK-V9G4LeQmB4YBUKI&amp;sensor=false">
</script>

<script type="text/javascript">
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3578zA-Z]|1\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 z,C,F,I,3;5 V,J=0;7 W(){X.setMap(z);X.draw=7(){}}W.prototype=A O.P.OverlayView();7 1a(a){5 b=D.createElement("Q");b.E.1b="1c("+a+")";5 c;8(3.K=="m1"){c="0px"}L 8(3.K=="m2"){c="50px"}L 8(3.K=="m3"){c="100px"}b.E.1d=c;b.K=3.K;b.Y="Z";b.10=b.11=R;F.replaceChild(b,3);3=B}7 12(){M J}7 1e(e,h){5 f=O.P;5 i={1c:h,size:A f.Size(32,32),anchor:A f.1f(15,32)};5 g=A f.Marker({position:e,z:z,clickable:1g,draggable:1g,crossOnDrag:G,optimized:G,icon:i,1h:12()});f.N.14(g,"1i",7(){I=g;5 a=I.1j().lat();5 b=I.1j().lng();5 c="<Q class=\'infowindow\'>"+a.1k(6)+", "+b.1k(6)+"<\\/Q>";C.setContent(c);C.open(z,X)});f.N.14(g,"dragstart",7(){8(I==g)C.1l();J+=1;g.setZIndex(12())})}7 R(d){5 l=7(a){5...