JSFiddle - React, Tailwind, and code Playground

by chinmay235

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<h4 class="get-direction">Bhubaneswar</h4>
<div id="location-map">
    <div class="close-map"><span>Close Map</span></div>
    <div id="map-canvas"></div>
    <div id="directions-display"><span class="error"></span></div>
</div>

CSS

/* popup map start === */
.get-direction{
    cursor: pointer;
    text-decoration:underline;
}
#location-map {
    background: rgba(7, 50, 79, 0.8) none repeat scroll 0 0;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
#location-map .close-map {
    margin: 5% auto 0;
    overflow: hidden;
    text-align: right;
    width: 90%;
}
#location-map .close-map span {
    background-color: #e67e22;
    border-radius: 3px 3px 0 0;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1em;
    padding: 5px;
}
#location-map #map-canvas {
    height: 80%;
    margin: 0 auto;
    width: 90%;
}
.gm-style {
    font-family: Roboto,Arial,sans-serif;
    font-size: 11px;
    font-weight: 400;
}
#directions-control {
    background-color: #fff;
    display: none;
    padding: 0 10px 30px;
    text-align: center;
    width: 100%;
}
#location-map #map-canvas #directions-control {
    background-color: #fff;
    display: none;
    padding: 0 10px 30px;
    text-align: center;
    width: 100%;
}

#location-map #map-canvas #directions-control p {
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#location-map #map-canvas #directions-control #directions-start {
    height: 17px;
    line-height: 17px;
    margin: 0 0 5px 50px;
    width: 200px;
}
#location-map #map-canvas #directions-control #directions-submit {
    background-color: #2876aa;
    border-radius: 3px;
    border-width: 0;
    color: #fff;
    cursor: pointer;
    height: 27px;
    line-height: 27px;
    margin: 0 0 5px;
    padding: 0 5px;
}

JavaScript

var geocoder;
 var map;
 function initialize() {
     geocoder = new google.maps.Geocoder();
     var myOptions = {
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
 }

 function showMap() {
     var address = 'bhubaneswar'; //alert(address);
     geocoder.geocode({ 'address': address }, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
             var marker = new google.maps.Marker({
                 map: map,
                 position: results[0].geometry.location
             });
         } else {
             alert("Geocode was not successful for the following reason: " + status);
         }
     });
 }


$(function(){
       $('.get-direction').on('click',function(){
           initialize();
            showMap();
           $('#location-map').show();
       });
       $('.close-map').click(function(){
           $('#location-map').hide();
           $("#map-canvas").html('');
       });
 });