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

Mapas con inicio de sesión

Cuando habilites el inicio se sesión con la Google Maps JavaScript API, los mapas de tu sitio se adecuarán a los requisitos de tus usuarios. Los usuarios que inicien sesión en sus cuentas de Google podrán guardar sitios para visualizarlos posteriormente en la Web o desde dispositivos móviles. Los sitios guardados en el mapa pueden atribuirse a tu sitio o aplicación.

Información general

Cada una de las persona que visita tu sitio ve un mapa de Google Maps adaptado para ellos. Si iniciaron sesión con su cuenta de Google, los sitios que hayan guardado y las ubicaciones del hogar y el trabajo, entre otros elementos, se incorporarán al mapa que vean. Esto también significa que se guardarán las interacciones con el mapa, como las calificaciones de ubicaciones mediante estrellas, a fin de facilitar su visualización en Google Maps para dispositivos de escritorio o móviles, y en cualquier otro mapa de Google Maps que el usuario visite en la Web.

Esta información detallada específica del usuario solo es visible para los usuarios que iniciaron sesión. No pueden visualizarla otros usuarios de tu aplicación y tampoco es posible acceder a ella con la API. A continuación, se ofrece un ejemplo de un mapa con inicio de sesión. En la parte superior derecha del mapa, podrás ver un cuadro de inicio de sesión de Google o tu avatar de Google.

Observa el ejemplo de código completo.

Habilitar el inicio de sesión

Para iniciar sesión en un mapa creado con la Google Maps JavaScript API, carga la versión 3.18 de la API, o una posterior y agrega el parámetro signed_in=true.

<script
  src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer>
</script>

En la parte superior derecha del mapa, podrás ver un cuadro de inicio de sesión de Google o tu avatar de Google.

Los usuarios pueden hacer clic en el control de inicio de sesión de la parte superior derecha del mapa para iniciar sesión con sus cuentas de Google. Cuando inicien sesión en Google a través de una propiedad diferente, iniciarán sesión en el mapa de manera automática.

Guardado atribuido

Ayuda a tus usuarios a recordar las ubicaciones que más les importan al permitirles guardar sitios en Google Maps. Los sitios guardados aparecerán en otros mapas de Google Maps cuando los usuarios los vean en la Web o en dispositivos móviles. Si un usuario guarda un sitio con un objeto SaveWidget o InfoWindow, puedes incluir atribuciones y enlaces personalizados hacia tu aplicación.

Puedes habilitar la función de guardado atribuido de dos maneras:

  • Agrega información de place a un marcador para permitir el guardado desde un objeto InfoWindow anclado al objeto Marker.
  • Crea un objeto SaveWidget personalizado.

El acceso posterior a los sitios es posible seleccionando los que se hayan guardado en el mapa.

Guardar sitios en Google Maps con una ventana de información

Agrega información sobre un sitio a un marcador para habilita un control “Guardar en Google Maps” en la ventana de información predeterminada. Este control se agregará de manera automática a cualquier ventana de información asociada con dicho marcador. En forma opcional, puedes atribuir el guardado a tu aplicación para ayudar a los usuarios a recordar la fuente original.

Para habilitar el control “Guardar en Google Maps” desde una ventana de información:

  1. Crea un nuevo objeto Marker.
  2. En MarkerOptions, especifica las propiedades map, place y attribution. Ten en cuenta que las propiedades position no son necesarias cuando se proporciona una propiedad place.
  3. En el objeto place, especifica una propiedad location y uno de los siguientes elementos:
    • Un campo placeId para identificar de manera exclusiva un sitio. Obtén más información sobre la manera de hacer referencia a un sitio con un id. de sitio
    • Una cadena query para buscar sitios cercanos a location. Las cadenas de búsqueda deben lo más específicas posible. Por ejemplo: 'stanley park vancouver bc canada'.
  4. En el objeto attribution, especifica:
    • La propiedad source del guardado. Normalmente, se trata del nombre de tu sitio o aplicación.
    • Un objeto webUrl opcional que debe incluirse como un vínculo de regreso a tu sitio.
    • Un objeto iosDeepLinkId, especificado como un esquema de direcciones URL, que aparecerá en lugar del objeto webUrl al realizar la visualización en iOS.
  5. Crea un nuevo objeto InfoWindow.
  6. Agrega un receptor de eventos para abrir el objeto InfoWindow cuando se haga clic en Marker.

Con esto se habilitará la opción “Guardar en Google Maps” al hacer clic en el marcador.

A continuación, se ofrece un ejemplo en el que se usa una cadena query para buscar una ubicación.

Observa el ejemplo de código completo.

// [START script-body]
      // When you add a marker using a Place instead of a location, the Maps
      // API will automatically add a 'Save to Google Maps' link to any info
      // window associated with that marker.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958}
        });

        var marker = new google.maps.Marker({
          map: map,
          // Define the place with a location, and a query string.
          place: {
            location: {lat: -33.8666, lng: 151.1958},
            query: 'Google, Sydney, Australia'

          },
          // Attributions help users find your site again.
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
          content: 'Google Sydney'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
// [END script-body]

Guardar sitios en Google Maps con el objeto SaveWidget.

Puedes usar el control SaveWidget para crear una IU personalizada que permita guardar sitios. Cuando uses el control SaveWidget, podrás especificar datos de atribuciones adicionales para que tu usuario recuerde el sitio desde el cual guardó el sitio y pueda regresar fácilmente a tu aplicación.

Para agregar un SaveWidget, deberás hacer lo siguiente:

  1. Agrega un elemento div a una página que contenga un mapa de Google Maps.
  2. Indica el sitio que debe guardarse con un marcador, para que tu usuario conozca el sitio que guarda.
  3. Crea a un objeto SaveWidgetOptions que incluya un literal de objeto place y attribution.
  4. Crea un nuevo objeto SaveWidget y pasa el elemento div y las opciones que agregaste.

A continuación, se muestra un ejemplo de un widget de guardado para la oficina de Google en Sídney. En el ejemplo, se crea el elemento div fuera del lienzo del mapa y luego se usa la Google Maps JavaScript API para agregar div como un control.

Observa el ejemplo de código completo.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <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;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

Enviar comentarios sobre...

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