JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<p>User can take his position on map for another input and find this again for another user</p>
<div id="map_canvas"></div>

CSS

html, body {
    margin: 0;
    padding: 0 10px;
}
a {
    cursor:pointer;
}
a, label {
    padding:0px 5px;
}
#map_canvas {
    width: 800px;
    height: 400px;
}

#controls {
    margin-top:2px;
    background-color:white;
    padding:5px;
}

JavaScript

function initialize() {
    var myMapOptions = {
        zoom: 17,
        center: new google.maps.LatLng(23.75861566043553, 90.38536486649514),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myMapOptions);
    
    // Create a div to hold everything else
    var controlDiv = document.createElement('DIV');
    controlDiv.id = "controls";
                           
    // Create an input field
    var controlInput = document.createElement('input');
    controlInput.id = "some-information";
    controlInput.name = "some-information";
    controlInput.value = "Hi there!";

    // Create a label
    var controlLabel = document.createElement('label');
    controlLabel.innerHTML = 'Some information';
    controlLabel.setAttribute("for","some-information");
   
    // Create a button to send the information
    var controlButton = document.createElement('a');
    controlButton.innerHTML = 'Send it!';

    // Append everything to the wrapper div
    controlDiv.appendChild(controlLabel);
    controlDiv.appendChild(controlInput);
    controlDiv.appendChild(controlButton);
    
    var onClick = function() {
        var inputvalue = $("#some-information").val();
        alert("You entered: '" + inputvalue + "', map center is at " + map.getCenter());
    };
    google.maps.event.addDomListener(controlButton, 'click', onClick);
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
}

jQuery(document).ready(initialize);