JSFiddle - React, Tailwind, and code Playground

by Shah Danial

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="map" style="width: 500px; height: 300px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>

var my_lat, my_long;

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        alert('Browser anda tidak support Geolocation');
    }
}

function showPosition(position) {
		my_lat = position.coords.latitude;
    my_long = position.coords.longitude;
}



//////////////////////////////
           var map;
       function initialize() {
       var haightAshbury = new google.maps.LatLng(2.9208729, 101.6556267);
        var mapOptions = {
                zoom: 20,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
       map = new google.maps.Map(document.getElementById('map'),
                    mapOptions);

      google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
            });
        }

        // Add a marker to the map and push to the array.
        function addMarker(location) {
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            var lat = marker.getPosition().lat();
            var lng = marker.getPosition().lng();
            
            document.getElementById('lat').textContent = lat;
            document.getElementById('lng').textContent = lng;
            
            
    
        }
       google.maps.event.addDomListener(window, 'load', initialize);
    
</script>
<div id="panel">
    <label  id="lat"></label><br>
   <label  id="lng"></label>

        </div>