JSFiddle - React, Tailwind, and code Playground

by suyash

HTML

<div class="container">

  <h4>Shipping Address</h4>

  <p>You can click the button below to use your current location as your shipping address</p>

  <div id="map">
  </div>

  <p id="current_position"></p>

  <button id="showMe" class="btn center-align">
    <i class="material-icons">
        my_location
    </i>
    Use My Location
  </button>

  <form id="billingAddress">

    <div id="locationList"></div>
    <br>

    <div class="input-field">
      <textarea class="materialize-textarea" id="address" type="text"></textarea>
      <label class="active" for="address">Address (Area and Street)</label>
    </div>

    <div class="input-field">
      <input id="locality" type="text">
      <label class="active" for="locality">Locality</label>
    </div>

    <div class="input-field">
      <input id="city" type="text">
      <label class="active" for="city">City/District/Town</label>
    </div>
    <div class="input-field">
      <input id="postal_code" type="text">
      <label class="active" for="pin_code">Pin Code</label>
    </div>

    <div class="input-field">
      <input id="landmark" type="text">
      <label class="active" for="landmark">Landmark</label>
    </div>

    <div class="input-field">
      <input id="state" type="text">
      <label class="active" for="State">State</label>
    </div>

  </form>

</div>

CSS

.container{
    width: 50%;
}
#map{
    height: 50vh;
    margin-bottom: 10px;
    display: none;
}

#locationList .card{
    padding: 10px;
}

#toast-container{
  top: 50%;
  bottom: unset;
}
.toast{
  background-color: rgba(0,0,0,.8);
}
.btn i{
  font-size: 1rem;
  margin-right: 2px;
}

@media only screen and (min-width: 768px){
  .container{
    width: 80%;
      max-width: 800px;
  }
}

JavaScript

//This div will be used to show Google map
const mapArea = document.getElementById('map');

const $ = id => document.getElementById(id);

const actionBtn = document.getElementById('showMe');
const locationsAvailable = document.getElementById('locationList');
let Gmap, Gmarker;

const __KEY = "AIzaSyBGCql0HlN4C_D7B2BcIIhtuFvjrdfvoew";

actionBtn.addEventListener('click', e => {
  // hide the button 
  actionBtn.style.display = "none";

  // call Materialize toast to update user 
  M.toast({ html: 'I am fetching your current location', classes: 'rounded' });

  // get the user's position
  getLocation();

});

getLocation = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation, showError, options)

  }
  else {
    M.toast({ html: 'Sorry, your browser does not support this feature... Please Update your Browser to enjoy it', classes: 'rounded' });
  }
}

// displayLocation
displayLocation = (position) => {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;

  const latlng = { lat, lng }

  showMap(latlng, lat, lng);
  createMarker(latlng);
  mapArea.style.display = "block";
  getGeolocation(lat, lng);

}

// Recreates the map
showMap = (latlng, lat, lng) => {
  let mapOptions = {
    center: latlng,
    zoom: 17
  };

  Gmap = new google.maps.Map(mapArea, mapOptions);

  Gmap.addListener('drag', function () {
    Gmarker.setPosition(this.getCenter()); // set marker position to map center
  });

  Gmap.addListener('dragend', function () {
    Gmarker.setPosition(this.getCenter()); // set marker position to map center
  });

  Gmap.addListener('idle', function () {

    Gmarker.setPosition(this.getCenter()); // set marker position to map center

    if (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
      setTimeout(() => {
        // console.log("I have to get new geocode here!")
        updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update...