JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--    

Notes:
1. First gat a Google Map Javascript API from https://console.developers.google.com/apis/
Here is my API : "AIzaSyCzyIlpgOK31pyLQt7qnqRt5NhVwZBb7So"
2. Put it in the place where I have kept under 
<script src="https://maps.googleapis.com/maps/api/js?key="YOUR_API_KEY"&callback=initMap"
    async defer></script>
3. Make the map height:100%; in CSS
4. Get the latitude and longitude of your place from http://www.latlong.net/
5. Put all those in the lat, and long variables in the script and follow the steps as I did


-->

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzyIlpgOK31pyLQt7qnqRt5NhVwZBb7So&callback=initMap"
    async defer></script>
<div class="location-map-wrapper">
                <div id="map"></div>
</div>

<script>
function initMap() {

      var latlong = {lat: 40.674, lng: -73.945};

        var map = new google.maps.Map(document.getElementById('map'), {
          center: latlong,
          zoom: 12,
          
        });

      var contentString = '';
          contentString += '<div class="map-content">';
          contentString += '<p>Some Title</p>';
          contentString += '</div>';

      var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
       var image = 'http://damiracle.in/demos/map_icon.png';
      var marker = new google.maps.Marker({
          position: latlong,
          map: map,
          title: 'Da Miracle',
          icon: image
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

      }

</script>

CSS

.location-map-wrapper, .quick-contact-wrapper{
	min-height: 557px;
	overflow:  hidden;
}

.location-map-wrapper{
	background: #f5d83d;
	height: 557px;
}



#map {
        height: 100% ;
        width: 100% !important;
      }