Signed-in Maps

Note: The signed-in feature is deprecated. Versions 3.27 and earlier of the Google Maps JavaScript API continue to support signed-in maps, but a future version will no longer support signed-in maps. Please watch the release notes for updates. (You can subscribe to the release notes.) Future versions of the Google Maps JavaScript API will continue to support features that save a place to Google Maps using an info window or the SaveWidget.

When you enable sign-in with the Google Maps JavaScript API, the maps on your site will be tailored to your users. Users who are signed-in to their Google account will be able to save places for later viewing on the web or mobile devices. Places saved from the map can be attributed to your site or app.

Overview

Every visitor to your site sees a Google Map tailored just for them. If they're signed in with their Google account, their saved places, home and work locations, and more are built right into the map they see. This also means that interactions with the map, such as starring a location, are saved for easy viewing in Google Maps for desktop or mobile, and any other Google Map that the user visits on the web.

These user-specific details are visible only to the signed-in user; they aren't visible to other users of your application, nor are they accessible with the API. Below is an example of a signed-in map. You should see a Google sign-in box, or your Google avatar, on the top right of the map.

View example.

Enable sign-in

To enable sign-in on a map created with the Google Maps JavaScript API, load v3.18 or later of the API with the additional signed_in=true parameter.

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

You should see a Google sign-in box, or your Google avatar, on the top right of the map.

Users can click the sign-in control on the top right of the map to sign in with their Google account. If they have previously signed in to Google on a different property, they will automatically be signed in to the map.

Attributed Save

Help your users remember the locations that matter most to them by allowing them to save places on Google Maps. Saved places will appear on other Google Maps when this user views them on the web or mobile devices. When a user saves a place from a SaveWidget or an InfoWindow, you can include personalized attribution and links back to your app.

You can enable the attributed save feature in two ways:

Add place information to a marker to allow saving from an InfoWindow anchored to this Marker.
Create a custom SaveWidget.

Places can later be accessed by selecting the saved place on the map.

Save to Google Maps with an info window

Add information about a place to a marker to enable a Save to Google Maps control on the default info window. This control will automatically be added to any info window associated with that marker. You can optionally attribute the save to your app to help users remember the original source.

To enable Save to Google Maps from an info window:

Create a new Marker.
In the MarkerOptions, specify map and place properties. Note that a position is not necessary when a place is provided.
In the place object, specify a location and one of:
- A placeId to uniquely identify a place. Learn more about how to reference a place with a place ID.
- A query string to search for places near to the location. Search strings should be as specific as possible. For example: 'stanley park vancouver bc canada'.
In the attribution object, specify:
- The source of the save. Typically the name of your site or app.
- An optional webUrl to include as a link back to your site.
- An optional iosDeepLinkId, specified as a URL Scheme, that will be displayed in place of the webUrl when viewed on iOS.
Create a new InfoWindow.
Add an event listener to open the InfoWindow when the Marker is clicked.

This will enable an option to Save to Google Maps when the marker is clicked.

Below is an example that uses a query string to search for a location.

View example.

// [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 with the `SaveWidget`

You can use the SaveWidget control to create a custom UI for saving places. When you use the SaveWidget you can specify additional attribution data so that your user remembers where they saved the place from, and can easily navigate back to your app.

In order to add a SaveWidget to your app, you will need to do the following.

Add a div to a page that contains a Google Map.
Indicate the place to be saved with a marker, so that your user knows which place they are saving.
Create a SaveWidgetOptions object that includes a place and attribution object literal.
Create a new SaveWidget object, passing the div and the options that you've added.

An example of a save widget for the Google Sydney office is shown below. In the example, we create the div outside of the map canvas, and then use the Google Maps JavaScript API to add that div as a control.

View example.

<!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?v=3.27&key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

You're all set!

Overview

Enable sign-in

Attributed Save

Save to Google Maps with an info window

Save to Google Maps with the `SaveWidget`

Send feedback about...

You're all set!

Activate the Google Maps JavaScript API

Signed-in Maps

Overview

Enable sign-in

Attributed Save

Save to Google Maps with an info window

Save to Google Maps with the SaveWidget

Send feedback about...

Save to Google Maps with the `SaveWidget`