JSFiddle - React, Tailwind, and code Playground

by Suvi Vignarajah

HTML

<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=&sensor=false">
</script>
    <script type="text/javascript">
        function initialize(){
var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
  var myOptions = {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        var contentString = "<div id='content'>";
        contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
        contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎</a></p></div></div>";
        
        var infowindow = new google.maps.InfoWindow({
    content: contentString
        });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Mr. Frosty's Deli and Grill"
  });
        
        google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
        });
}
    </script>
</head>
<body onload="initialize()"> 
<div id="map_canvas"></div>
</body>

CSS

#map_canvas{
    width: 480px;
    height: 320px
}
#title{
   font-size: 14px;
   padding-bottom: 10px;    
}
#info{
    font-size: 12px;
}