yudaduy

Geolocation + Geocoding (NOT WORKING)

Sep 21st, 2021
825
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Get Current Location + Address Location</title>
  5.     <style>
  6.         /* Always set the map height explicitly to define the size of the div
  7.             * element that contains the map. */
  8.             #map {
  9.         height: 100%;
  10.         }
  11.  
  12.         /* Optional: Makes the sample page fill the window. */
  13.         html,
  14.         body {
  15.         height: 100%;
  16.         margin: 0;
  17.         padding: 0;
  18.         }
  19.  
  20.         .custom-map-control-button {
  21.         background-color: #fff;
  22.         border: 0;
  23.         border-radius: 2px;
  24.         box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  25.         margin: 10px;
  26.         padding: 0 0.5em;
  27.         font: 400 18px Roboto, Arial, sans-serif;
  28.         overflow: hidden;
  29.         height: 40px;
  30.         cursor: pointer;
  31.         }
  32.         .custom-map-control-button:hover {
  33.         background: #ebebeb;
  34.         }
  35.     </style>
  36.  
  37.     <!-- jsFiddle will insert css and js -->
  38.   </head>
  39.   <body>
  40.     <div id="map"></div>
  41.  
  42.     <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  43.     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  44.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  45.     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&channel=2" async></script>
  46.  
  47.     <script>
  48.    
  49.     let map, infoWindow;
  50.  
  51.     function initMap() {
  52.     map = new google.maps.Map(document.getElementById("map"), {
  53.         center: { lat: -34.397, lng: 150.644 },
  54.         zoom: 12,
  55.     });
  56.     infoWindow = new google.maps.InfoWindow();
  57.  
  58.     const locationButton = document.createElement("button");
  59.  
  60.     locationButton.textContent = "Pan to Current Location";
  61.     locationButton.classList.add("custom-map-control-button");
  62.     map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  63.     locationButton.addEventListener("click", () => {
  64.         // Try HTML5 geolocation.
  65.         if (navigator.geolocation) {
  66.         navigator.geolocation.getCurrentPosition(
  67.             (position) => {
  68.             const pos = {
  69.                 lat: position.coords.latitude,
  70.                 lng: position.coords.longitude,
  71.             };
  72.  
  73.                 var marker = new google.maps.Marker({map: map, position: pos, clickable: true});
  74.  
  75.                 function showPosition(position) {
  76.                     var lat = position.coords.latitude;
  77.                     var lang = position.coords.longitude;
  78.                     var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lang +"&key=YOUR_API_KEY";
  79.  
  80.                     fetch(url).then(r => r.json())
  81.                     .then(data => console.log(data))
  82.                     .catch(e => console.log("Booo"))
  83.                 }
  84.  
  85.                 marker.info = new google.maps.InfoWindow({
  86.                 content: "Your Location: Latitude " + position.coords.latitude +" dan Longitude "+ position.coords.longitude +
  87.                          "<br> Your Address is: " + showPosition(position)
  88.                          
  89.                 });
  90.  
  91.                 google.maps.event.addListener(marker, 'click', function() {
  92.                 marker.info.open(map, marker);
  93.                 });
  94.  
  95.                 map.setCenter(pos);
  96.             },
  97.             () => {
  98.             handleLocationError(true, infoWindow, map.getCenter());
  99.             }
  100.         );
  101.         } else {
  102.         // Browser doesn't support Geolocation
  103.         handleLocationError(false, infoWindow, map.getCenter());
  104.         }
  105.     });
  106.     }
  107.  
  108.     function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  109.     infoWindow.setPosition(pos);
  110.     infoWindow.setContent(
  111.         browserHasGeolocation
  112.         ? "Error: The Geolocation service failed."
  113.         : "Error: Your browser doesn't support geolocation."
  114.     );
  115.     infoWindow.open(map);
  116.     }
  117.  
  118.     </script>
  119.   </body>
  120. </html>
RAW Paste Data