當您使用 Google Maps JavaScript API 啟用登入功能時，您網站上的地圖將能夠針對您的使用者量身訂做。已登入自己 Google 帳戶的使用者將能儲存地點，以便之後在網頁或行動裝置上檢視。從地圖儲存的地點會標示為在您的網站或應用程式中所建立。
總覽
您網站的每位訪客都會看到為他們量身訂做的「Google 地圖」。如果以 Google 帳戶登入，他們儲存的地點、住家與公司的位置等都會建置在所見的地圖中。這也表示會儲存與地圖的互動（例如用星號標出位置），以便在電腦或行動裝置的「Google 地圖」中檢視，也可以在使用者於網路上瀏覽的任何其他「Google 地圖」中檢視。
這些使用者特定詳細資料只供已登入的使用者檢視，應用程式的其他使用者看不到這些詳細資料，也無法使用 API 存取這些詳細資料。以下是已登入地圖的範例。您應該會在地圖的右上方看到一個 Google 登入方塊，或是您的 Google 虛擬人偶。
請參閱完整的程式碼範例。
啟用登入功能
如果要在使用 Google Maps JavaScript API 建立的地圖上啟用登入功能，請使用額外的 signed_in=true 參數載入 v3.18 或更新版本的 API。
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer> </script>
您應該會在地圖的右上方看到一個 Google 登入方塊，或是您的 Google 虛擬人偶。
使用者可以按一下地圖右上方的登入控制項，使用自己的 Google 帳戶登入。如果使用者之前在不同的地方登入 Google，他們將會自動登入地圖。
儲存屬性
允許您的使用者儲存「Google 地圖」上的地點，協助他們記住對他們很重要的位置。該使用者在網頁或行動裝置瀏覽其他「Google 地圖」時，這些儲存的地點也會出現。當使用者從 SaveWidget 或 InfoWindow 儲存地點時，您可以包括個人化資料引用標示，並將之連回您的應用程式。
您可以透過兩種方式啟用儲存屬性功能：
- 新增
place資訊到標記，允許從錨定到這個Marker的InfoWindow儲存。 - 建立自訂的
SaveWidget。
地圖上儲存的地點可讓您稍後選取使用。
使用資訊視窗儲存到「Google 地圖」
新增有關地點的資訊到標記，以在預設資訊視窗上啟用 [儲存到 Google 地圖] 控制項。這個控制項會自動新增到與該標記關聯的任何資訊視窗。您可以選擇性地將該儲存連結至您的應用程式，來幫助使用者記住它的原始來源。
從資訊視窗啟用「儲存到 Google 地圖」的功能：
- 建立新的
Marker。 - 在
MarkerOptions中，指定map、place和attribution屬性。請注意，如果已提供place，則不一定需要position。 - 在
place物件中，指定location和下列其中一項：placeId，用來唯一識別地點。深入瞭解如何使用地點 ID 參照某個地點。query字串，用來搜尋location附近的地點。搜尋的字串應儘可能保持明確。例如：'stanley park vancouver bc canada'。
- 在
attribution物件中，指定：- 儲存的
source。通常是您網站或應用程式的名稱。 - 選擇性的
webUrl，包括此項目以做為回到您網站的連結。 - 選擇性的
iosDeepLinkId，指定為 URL 配置，並能在 iOS 作業系統上檢視時取代webUrl的位置。
- 儲存的
- 建立新的
InfoWindow。 - 新增事件接聽程式，以在按一下
Marker時開啟InfoWindow。
這會在按一下標記時啟用 [儲存到 Google 地圖] 的選項。
以下是使用 query 字串搜尋位置的範例。
請參閱完整的程式碼範例。
// [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]
使用 SaveWidget 儲存到「Google 地圖」
您可以使用 SaveWidget 控制項，建立用於儲存地點的自訂 UI。使用 SaveWidget 時，您可以指定其他資料引用標示資料，這樣您的使用者就會記得他們所儲存地點的來源，也可以輕鬆地瀏覽回您的應用程式。
如果要將 SaveWidget 新增到您的應用程式，您需要執行下列動作。
- 新增
div到包含「Google 地圖」的頁面。 - 指出要該地點將隨著標記儲存，這樣您的使用者就會知道他們所儲存的地點。
- 建立包括
place和attribution物件常值的SaveWidgetOptions物件。 - 建立新的
SaveWidget物件，傳遞div和您已新增的選項。
Google 雪梨辦公室之儲存小工具的範例顯示如下。在範例中，我們會在地圖畫布外面建立 div，然後使用 Google Maps JavaScript API 新增該 div 做為控制項。
請參閱完整的程式碼範例。
<!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?key=YOUR_API_KEY&signed_in=true&callback=initMap">
</script>
</body>
</html>
需要協助嗎？請前往我們的