Google Maps Platform: Map Tips: Create a connected mapping experience

Maps Platform

Product updates, customer stories, and tips and tricks on Google Maps Platform

Map Tips: Create a connected mapping experience

Tuesday, July 21, 2015

Posted by David McClusky, Google Maps Solutions ArchitectEditor’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>

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/'
}
});sample
Tips and Tricksreference a place using a place IdSaveWidget
Resources