JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<style>
#map_canvas { height:450px;width:450px;top:50px;left:0px;position:absolute;
    z-index:1; }
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=true">
</script>
<script>
    $(document).ready(function(){
        $('#but').click(function(){
                
            var myOptions = {
                center: new google.maps.LatLng(25.539574, 81.5660),
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map($("#map_canvas")[0],myOptions);
            
            var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(25.539574, 81.5660),
            map: map,            
            title:"MY PLACE"
        });
        marker.setMap(map);    });
 });
</script>
<body >
    <div id="maap">
        <input type="text" >
        <input type="button" value="Search" id="but">
    </div> 
    <div id="map_canvas"></div>
</body>