Google Maps – Markers

Insertar Mapa de Google Maps en Pagina web

Básico código de mapa

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</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>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
       #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;
      }
    </style>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <script>
    let map;

    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 6.249216, lng: -75.588066 },
        zoom: 8,
      });
    }
    </script>
  </body>
</html>

Con marcador pin de la ubicación

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</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>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
     #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;
      }
    </style>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <script>
      // Initialize and add the map
      function initMap() {
        // The location of marker
        const coords = { lat: 6.249216, lng: -75.588066 };
        // The map, centered at Uluru
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 16,
          center: coords,
        });
        // The marker, positioned at Uluru
        const marker = new google.maps.Marker({
          position: coords,
          map: map,
        });
      }
    </script>
  </body>
</html>

Credenciales de Google API

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 *