<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=IzaSyBaS_p-3aWMqsEvbQCMnw_Up0dU3Ra7tus&callback=initMap">
    </script>
      <script type="javascript">
var findMeButton = $('.find-me');

// Check if the browser has support for the Geolocation API
if (!navigator.geolocation) {

  findMeButton.addClass("disabled");
  $('.no-browser-support').addClass("visible");

} else {

  findMeButton.on('click', function(e) {

    e.preventDefault();

    navigator.geolocation.getCurrentPosition(function(position) {

      // Get the coordinates of the current possition.
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

      $('.latitude').text(lat.toFixed(3));
      $('.longitude').text(lng.toFixed(3));
      $('.coordinates').addClass('visible');

      // Create a new map and place a marker at the device location.
      var map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng
      });

      map.addMarker({
        lat: lat,
        lng: lng
      });

    });

  });

</script>
  <style type="text/css">
  .container {
    max-width: 980px;
    text-align: center;
    margin: 20px auto;
  }

  h1 {
    margin-bottom: 20px;
  }

  #geocoding_form {
    margin: 40px auto 40px;
  }

  .input-group {
    margin-left: 4%;
  }

  .find-me.btn:focus {
    border-color: transparent;
    outline: 0;
  }

  .coordinates {
    font-size: 18px;
    opacity: 0;
    margin-bottom: 40px;
  }

  .no-browser-support {
    font-size: 18px;
    opacity: 0;
  }

  .coordinates b:first-child {
    margin-right: 15px;
  }

  .visible {
    opacity: 1;
  }

  .map-overlay {
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    border-radius: 2px;
  }

  #map {
    max-width: 550px;
    height: 400px;
    margin: 0 auto;
  }

</style>
</head>
<body>

<div class="container">

  <h1>Geolocation Demo</h1>

  <form id="geocoding_form" class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <button type="button" class="find-me btn btn-info btn-block">Find My Location</button>
      </div>
    </div>
  </form>

  <p class="no-browser-support">Sorry, the Geolocation API isn't supported in Your browser.</p>
  <p class="coordinates">Latitude: <b class="latitude">42</b> Longitude: <b class="longitude">32</b></p>

  <div class="map-overlay">
    <div id="map"></div>
  </div>

</div>

</body>
</html>
yaptım onları ama soçun aynı