Map Tips: Create a connected mapping experience


Posted by David McClusky, Google Maps Solutions Architect

Editor’s note: ‘Map Tips’ are designed to answer frequently asked questions about Google Maps APIs. For important tips on how to deploy Google’s mapping tools, read more from David McClusky, Google Maps Solutions Architect at Google.
Millions of websites and apps are leveraging the Google Maps APIs today—whether helping users book a hotel or find a great restaurant. But, did you know that by enabling signed-in maps you can make this an even more powerful experience for your users? With signed-in Maps, you can build applications where users will see a map completely tailored to them.

Within your application, users will have the option to sign-in to the Google Map with their Google account, and will be able to see all of their favorite places (such as their home and work locations) displayed on your map. If you display your own layers of data on the map, such as markers for store locations, you can enable your users to save those to their favorite places as well, to be viewable on other Google Maps throughout the web and mobile devices (such as maps.google.com or Google Maps for Android/iOS).

For example, imagine you are building a travel site to help users choose a hotel and plan nearby activities. By enabling signed-in maps, a user can save a hotel they found on your site to their personal Google account.

Later, when continuing their research on maps.google.com or on Google Maps Mobile, your user will see the hotel she saved (indicated by a star on the map), with a link back to your site.

Getting Started

It’s easy to get started. The first step is to enable sign-in on a map created with the Google Maps JavaScript API. You do this by including “signed_in=true” when loading the Javascript API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
When you enable sign-in with the Google Maps JavaScript API, your users will now see a map tailored to them, which means their saved locations will now show on the map. As you can see in the following picture, the user’s Google profile picture will also appear in the top-right of the map (when logged in with a Google account).

Next, you want to help your users remember the locations that matter most to them by allowing them to save places using the Attributed Save feature of the Google Maps Javascript API. With Attributed Save, saved places will appear on other Google Maps when a user views them on the web or mobile devices.

The easiest way to do this is by adding place and attribution properties to the MarkerOptions object when creating and adding a marker to your map.
var marker = new google.maps.Marker({
    map: map,
    // Define the place with a location, and a query string.
    place: {
      location: {lat: 40.739929, lng: -74.005792},
      query: Gansevoort Meatpacking NYC, New York, NY
    },
    // Attributions help users find your site again.
    attribution: {
      source: 'Altostrat Hotels',
      webUrl: 'https://developers.google.com/maps/'
    }
  });
By adding the place property with a location and query string, you are associating your marker with a specific point-of-interest in Google’s database of places. The attribution field allows your users link back to your site again in the future when viewing this saved place on other maps throughout the web. Note that attributed save requires the place to be known in Google’s database (either as a business name or an address). Here is a complete working code sample for reference.

Tips and Tricks

Here are some tips to help you make the most of signed-in maps using the Google Maps Javascript API:

When specifying the place to associate with a marker, use placeId rather than a query string to uniquely identify the place. Learn more about how to reference a place using a place Id.
Be sure to use include attribution for any markers added to the map, so your users can easily link back to your site when viewing favorite places on other maps throughout the web.
If you are showing only a single marker on a map, using the SaveWidget is a great way to highlight the location with a custom display

Resources

We hope you’re able to incorporate signed-in Maps into your website. To learn more about implementing signed-in Maps and Attributed Save, take a look at the following resources: