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.
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
placeinformation to a marker to allow saving from anInfoWindowanchored to thisMarker. - 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, specifymapandplaceproperties. Note that apositionis not necessary when aplaceis provided. - In the
placeobject, specify alocationand one of:- A
placeIdto uniquely identify a place. Learn more about how to reference a place with a place ID. - A
querystring to search for places near to thelocation. Search strings should be as specific as possible. For example:'stanley park vancouver bc canada'.
- A
- In the
attributionobject, specify:- The
sourceof the save. Typically the name of your site or app. - An optional
webUrlto include as a link back to your site. - An optional
iosDeepLinkId, specified as a URL Scheme, that will be displayed in place of thewebUrlwhen viewed on iOS.
- The
- Create a new
InfoWindow. - Add an event listener to open the
InfoWindowwhen theMarkeris 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.
// [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
divto 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
SaveWidgetOptionsobject that includes aplaceandattributionobject literal. - Create a new
SaveWidgetobject, passing thedivand 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.
<!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>
Weitere Fragen?