Mapas conectados

Observação: o recurso conectado está obsoleto. As versões 3.27 e anteriores da Google Maps JavaScript API ainda tem compatibilidade com mapas conectados, mas, no futuro, não haverá suporte a eles. Veja as notas da versão para saber mais. (você pode assinar as notas da versão). As versões futuras da Google Maps JavaScript API continuarão oferecendo suporte a recursos que salvam um local no Google Maps usando uma janela de informações ou o SaveWidget.

Quando você ativa o login com a Google Maps JavaScript API, os mapas no seu site são personalizados para os usuários. Os usuários que fizeram login na conta Google poderão salvar locais para visualização posterior na web ou em dispositivos móveis. Locais do mapa salvos podem ser atribuídos ao site ou aplicativo.

Visão geral

Cada visitante do seu site vê um mapa do Google Maps criado sob medida para ele. Se ele estiver conectado a uma conta Google, os locais salvos, as localizações da casa e do local de trabalho e outros dados são diretamente integrados ao mapa exibido. Isso também significa que as interações com o mapa, como marcar uma localização com estrela, são salvas para facilitar a visualização no Google Maps em desktops ou dispositivos móveis, bem como qualquer outro mapa do Google Maps acessado pelo usuário na web.

Esses detalhes específicos do usuário são visíveis apenas para o usuário conectado. Eles não são visíveis para outros usuários do aplicativo nem podem ser acessados com a API. Veja a seguir um exemplo de um mapa com usuário conectado. A caixa de login do Google ou o seu avatar do Google aparece no canto superior direito do mapa.

Veja o exemplo de código completo.

Ativar login

Os mapas conectados exigem cookies. Se você ativar os mapas conectados, o mapa definirá um cookie se houver um usuário conectado.

Para ativar o login em um mapa criado com a Google Maps JavaScript API, carregue a API v3.18 ou mais recente com o parâmetro adicional signed_in=true.

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

A caixa de login do Google ou o seu avatar do Google aparece no canto superior direito do mapa.

Os usuários podem clicar no controle de login no canto superior direito do mapa para fazer login na conta Google. Se o usuário já fez previamente login no Google em uma propriedade diferente, será conectado automaticamente ao mapa.

Salvar com atributo

Ajude os usuários a lembrar as localizações mais importantes, permitindo que salvem locais no Google Maps. Os locais salvos aparecem em outros mapas do Google Maps quando o usuário os visualiza na web ou em dispositivos móveis. Quando um usuário salva um local de um SaveWidget ou uma InfoWindow, é possível incluir atribuição personalizada e links de retorno ao aplicativo.

O recurso de salvar com atributo pode ser ativado de duas formas:

• Adicione informações de place a um marcador para permitir a ação de salvar em uma InfoWindow ancorada a esse Marker.
• Crie um SaveWidget personalizado.

Os locais podem ser acessados posteriormente selecionando o local salvo no mapa.

Save to Google Maps com uma janela de informações

Adicione informações sobre um local a um marcador para ativar o controle Save to Google Maps na janela de informações padrão. Esse controle é adicionado automaticamente a todas as janelas de informações associadas a esse marcador. Opcionalmente, você pode atribuir a ação de salvar ao aplicativo para ajudar os usuários a lembrar da origem.

Para ativar Save to Google Maps em uma janela de informações:

1. Crie um novo Marker.
2. Na opção MarkerOptions, especifique as propriedades map, place e attribution. Observe que a position não é necessária quando um place é informado.
3. No objeto place, especifique uma location e uma das seguintes propriedades:
   • placeId, para identificar exclusivamente um local. Saiba mais sobre como referenciar um local com um ID de local.
   • String de query para pesquisar locais perto da location. As strings de pesquisa devem ser as mais específicas possível. Por exemplo: 'parque do ibirapuera são paulo brasil'.
4. No objeto attribution, especifique:
   • source para salvar. Normalmente, o nome do site ou aplicativo.
   • webUrl opcional a ser incluído como link para voltar ao site.
   • iosDeepLinkId opcional, especificado como um esquema de URL, exibido em vez de webUrl quando visualizado no iOS.
5. Crie uma nova InfoWindow.
6. Adicione um ouvinte de eventos para abrir a InfoWindow quando o Marker é clicado.

Essa ação ativa uma opção de Save to Google Maps quando o marcador é clicado.

Veja a seguir um exemplo que usa uma string de query para pesquisar uma localização.

Veja o exemplo 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]

Save to Google Maps com SaveWidget

Use o controle SaveWidget para criar uma IU personalizada para salvar locais. Ao usar o SaveWidget, é possível especificar dados de atribuição adicionais para que o usuário se lembre de onde salvou o local e possa navegar facilmente de volta ao aplicativo.

Para adicionar um SaveWidget ao aplicativo, faça o seguinte.

1. Adicione um div a uma página que contém um mapa do Google Maps.
2. Indique o local a ser salvo com um marcador para que o usuário saiba qual local está salvando.
3. Crie um objeto SaveWidgetOptions que inclui um literal de objeto place e attribution.
4. Crie um novo objeto SaveWidget, passando o div e as opções adicionadas.

Veja a seguir um exemplo do widget de salvar para o escritório da Google em Sidnei. Nesse exemplo, criamos o div fora da tela do mapa e usamos a Google Maps JavaScript API para adicionar esse div como um controle.

Veja o exemplo 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>