title: Find current location after click by Leaflet
body: <p>In my project I am using <a href="https://leafletjs.com/" rel="nofollow noreferrer">leaflet</a> to display points. I want to get the current lat and long after clicked on button <code>Show Your Location</code>, I tried the below code:
  <a href="https://jsfiddle.net/a1p26e7v/" rel="nofollow noreferrer">https://jsfiddle.net/a1p26e7v/</a></p>
  <p>What do i do?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>lat = '34.020479';
  lon = '-118.4117325';
  var map = L.map('map', {
      center: [lat, lon],
      zoom: 12
  });
  mapLink = '&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;';
  L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&amp;copy; ' + mapLink + ' Contributors',
          maxZoom: 18
      }).addTo(map);
  var gIcon = L.icon({
      iconUrl: 'https://up.grdagrd.com/image/map_maker.png',
      iconSize: [20, 32],
  });
  map.on('click', function(e) {
      var latlng = map.mouseEventToLatLng(e.originalEvent);
      console.log(latlng.lat + ', ' + latlng.lng);
      L.marker([latlng.lat, latlng.lng], {
          icon: gIcon
      }).addTo(map);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"&gt;&lt;/script&gt;
  &lt;link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" name="latitude" autocomplete="off" readonly&gt;
  &lt;input type="text" name="longitude" autocomplete="off" readonly&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;button type="button" class="btnGetLoc"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-fill" viewBox="0 0 16 16"&gt;&lt;path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"&gt;&lt;/path&gt;&lt;/svg&gt;Show Your Location&lt;/button&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;div id="map" style="height: 250px;width: 360px;z-index: 9999999;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>