Signed-in Maps

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.

1. Overview
2. Enable sign-in
   1. Changes to map controls
3. Attributed Save
   1. Save to Google Maps with an info window
   2. Save to Google Maps with the SaveWidget

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.

See the complete code sample.

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 type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</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.

Changes to map controls

When sign-in is enabled, the default position and appearance of several controls will change.

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, place and attribution 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.

See the complete code sample.

/*
 * 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 initialize() {
  var mapOptions = {
    zoom: 17,
    center: {lat: -33.8666, lng: 151.1958}
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var infowindow = new google.maps.InfoWindow();

  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);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

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 API to add that div as a control.

See the complete code sample.

<!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>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #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>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <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 initialize() {
  var map;
  var saveWidget;
  var myOptions = {
    zoom: 17,
    center: {lat: -33.8666, lng: 151.1958}
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      myOptions);

  // Create a new SaveWidgetOptions object for Google Sydney.
  var saveWidgetOptions = {
    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/'
    }
  };

  new google.maps.Marker({
    map: map,
    position: saveWidgetOptions.place.location
  });

  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.
  saveWidget = new google.maps.SaveWidget(widgetDiv, saveWidgetOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></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>
  </body>
</html>

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.