Google Maps – Location

<!DOCTYPE html>
<html>
  <head>
    <title>Location</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style>

      #map {
        height: 500px;
        width: 800px;
        border-radius: 15px;
        margin: 100px auto;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
      }

      .custom-map-control-button {
        appearance: button;
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        margin: 10px;
        padding: 0 0.5em;
        height: 40px;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
      }
      .custom-map-control-button:hover {
        background: #ebebeb;
      }
    </style>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <center>
      <h2>Coordenadas</h2>
      <h3>Latitude</h3>
      <p id="textLatitude">Latitude</p>
      <h3>Longitude</h3>
      <p id="textLongitude">Longitude</p>
    </center>

    <script>
    let map, infoWindow;
    function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 6.249216, lng: -75.588066 },
      zoom: 6,
    });
    infoWindow = new google.maps.InfoWindow();
    const locationButton = document.createElement("button");
    locationButton.textContent = "Localizarme";
    locationButton.classList.add("custom-map-control-button");
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    locationButton.addEventListener("click", () => {
      // Try HTML5 geolocation.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            };

            document.getElementById("textLatitude").innerHTML = pos.lat;
            document.getElementById("textLongitude").innerHTML = pos.lng;

            infoWindow.setPosition(pos);
            map.setCenter(pos);
            map.setZoom(16);

            // The marker, positioned at located
            const marker = new google.maps.Marker({
              position: pos,
              map: map,
            });
          },
          () => {
            handleLocationError(true, infoWindow, map.getCenter());
          }
        );
      } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
      }
    });
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(
      browserHasGeolocation
        ? "Error: The Geolocation service failed."
        : "Error: Your browser doesn't support geolocation."
    );
    infoWindow.open(map);
    }
    </script>
  </body>
</html>

API Key

https://console.developers.google.com/apis/credentials

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *