JSFiddle - React, Tailwind, and code Playground

by sandesh2302

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>    

    <script type="text/javascript">
      function getLocation(){
        navigator.geolocation.getCurrentPosition(handleSuccess,handleError);
      }

      function initiate_watchlocation() {  
        if(watchProcess == null){
          watchProcess = navigator.geolocation.watchPosition(handleSuccess,handleError);
        }
      } 

      function stop_watchlocation() {  
        if(watchProcess != null){
          navigator.geolocation.clearWatch(watchProcess);
        }
      } 

      function handleSuccess(position){
        drawMap(position);
      }

      function handleError(error){
        switch(error.code)
        {
          case error.PERMISSION_DENIED: alert("User did not share geolocation data");break;  
          case error.POSITION_UNAVAILABLE: alert("Could not detect current position");break;  
          case error.TIMEOUT: alert("Retrieving position timed out");break;  
          default: alert("Unknown Error");break;  
        }
      }


      function drawMap(position) {
        var container = $('#map_canvas');
        var myLatLong = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        var mapOptions = {
          center: myLatLong,
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(container[0],mapOptions);
        container.css('display','block');
        var marker = new google.maps.Marker({ 
          position: myLatLong,
          map:map,
          title:"My Position (Accuracy of Position: " + position.coords.accuracy + " Meters), Altitude: " 
            + position.coords.altitude + ' Altitude Accuracy: ' + position.coords.altitudeAccuracy
        });
      }

      function drawStaticMap(position){
        var...

CSS

html { height: 100% }
      
      body { }
      
      #map_canvas { 
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 5px 14px -9px rgba(0, 0, 0, 0.29);
        height: 300px;
        margin: 2em auto;
        width: 70%;
        display: none;
      }

      div button{
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.29);
          padding: 5px;
      }
      
      #getLocation{
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.29);
          display: block;
          margin: 1em auto;
          padding: 5px;
      }

      #map_canvas > div > div:nth-child(3){
        display: none;
      }

JavaScript

$('#getLocation').click(getLocation);
      $('#initWatch').click(initiate_watchlocation);
      $('#stopWatch').click(stop_watchlocation);