New pricing changes went into effect on July 16, 2018. For more information, check out the Guide for Existing Users.

Signed-in Maps

When you enable sign-in with the 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 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:

  1. Create a new Marker.
  2. In the MarkerOptions, specify map and place properties. Note that a position is not necessary when a place is provided.
  3. 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'.
  4. 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.
  5. Create a new InfoWindow.
  6. 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.

  1. Add a div to a page that contains a Google Map.
  2. Indicate the place to be saved with a marker, so that your user knows which place they are saving.
  3. Create a SaveWidgetOptions object that includes a place and attribution object literal.
  4. 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 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>

Send feedback about...

This page
Documentation feedback
Maps JavaScript API
Product feedback
Need help? Visit our support page.