Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Comportamiento de desplazamiento y movimiento panorámico

Con la opción gestureHandling del objeto MapOptions, puedes controlar el comportamiento de movimiento panorámico y desplazamiento de un mapa cuando se visualiza en un dispositivo móvil.

Ejemplo

En el siguiente ejemplo se usa control gestual cooperative. Mira la demostración en un dispositivo móvil para visualizar el código en acción.

/**
 * This sample sets the gesture handling mode to 'cooperative',
 * which means that on a mobile device, the user must swipe with one
 * finger to scroll the page and two fingers to pan the map.
 */
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: 'cooperative'
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Cooperative Gesture Handling</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>

      /**
       * This sample sets the gesture handling mode to 'cooperative',
       * which means that on a mobile device, the user must swipe with one
       * finger to scroll the page and two fingers to pan the map.
       */
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng,
          gestureHandling: 'cooperative'
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Control gestual

En la Web móvil, puede resultar molesto para los usuarios cuando deslizan el dedo con la intención de desplazar la página, pero en su lugar se realiza un movimiento panorámico del mapa.

La Google Maps JavaScript API proporciona la opción gestureHandling en el objeto MapOptions que puedes usar para optimizar la experiencia de tus usuarios cuando interactúan con el mapa. Los valores disponibles son los siguientes:

  • greedy: se realiza un movimiento panorámico del mapa (hacia arriba, abajo, izquierda o derecha) cuando el usuario desliza (arrastra) la pantalla. En otras palabras, los deslizamientos con uno y dos dedos generan un movimiento panorámico del mapa.
  • cooperative: el usuario debe deslizar la pantalla con un dedo para desplazar la página, y con dos dedos para generar un movimiento panorámico del mapa. Si el usuario desliza el mapa con un dedo, aparecerá una superposición sobre el mapa con un mensaje que indica al usuario que debe usar dos dedos para mover el mapa. Mira el ejemplo anterior en un dispositivo móvil para ver el modo “cooperative” en acción.
  • none: el mapa no puede moverse de forma panorámica ni admite pellizcos.
  • auto (predeterminado): el comportamiento es cooperative o greedy, según la página admita desplazamiento o no. Un detalle consiste en que, si la opción es auto, la API selecciona el siguiente comportamiento:
    • cooperative, si el cuerpo de la página es más grande que la ventana o si la API no puede determinar el tamaño de la página (por ejemplo, si es un iframe).
    • greedy, si el cuerpo de la página no es más grande que la ventana y, por lo tanto, es poco probable que el usuario necesite realizar un desplazamiento.

El control de pantalla completa es visible de forma predeterminada en los dispositivos móviles, por lo cual los usuarios pueden agrandar el mapa fácilmente. Cuando el mapa se encuentra en el modo de pantalla completa, los usuarios pueden realizar movimientos panorámicos del mapa usando uno o dos dedos. Nota: iOS no admite la función de pantalla completa. Por lo tanto, el control de pantalla completa no puede verse en dispositivos iOS.

eventos;

Cuando el usuario desplaza (arrastra) el mapa, la API activa, entre otros, los siguientes eventos:

  • drag: se activa repetidamente mientras el usuario arrastra el mapa.
  • dragstart: se activa cuando el usuario comienza a arrastrar el mapa.
  • dragend: se activa cuando el usuario deja de arrastrar el mapa.

Para obtener más información, consulta la guía de eventos y la referencia.

Restricciones y limitaciones

Las siguientes restricciones se aplican al comportamiento disponible en la opción gestureHandling:

  • Dispositivos sensibles al tacto únicamente: Las opciones de gestureHandling solo se aplican si el usuario visualiza la página en un dispositivo que admite una interfaz táctil.
  • Eventos táctiles únicamente: Las opciones de gestureHandling no se aplican a los eventos de mouse o lápiz.
  • Incompatibilidad con mapas con inicio de sesión: las opciones de gestureHandling no se aplican a mapas con inicio de sesión habilitado.
  • Incompatibilidad con Street View: las opciones de gestureHandling no se aplican al servicio Street View.

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.