Google Maps JavaScript API でサインインを有効にすると、サイト上のマップは、各ユーザーに合わせて作成されます。自分の Google アカウントにサインインしたユーザーは、プレイスを保存して、後でウェブまたはモバイル端末で表示させることができます。マップから保存されたプレイスは、サイトまたはアプリと関連付けることができます。
概要
サイトの各訪問者にはその訪問者に合わせて作成された Google マップが表示されます。訪問者が Google アカウントを使用してサインインする場合は、表示されるマップに、保存したプレイス、自宅、職場などが組み込まれます。これは、ある地点に星印を付けるなどのマップでの操作が保存され、デスクトップやモバイル端末の Google マップや、ユーザーがウェブ上で訪問するその他の任意の Google マップで簡単に表示できることも意味します。
これらのユーザー固有の詳細情報は、サインインしたユーザーのみに表示されます。これらの情報は、アプリケーションの他のユーザーに表示されることはなく、API を使用してアクセスされることもありません。下に、サインインしたマップの例を示します。マップの右上に、Google サインイン ボックスまたは Google アバターが表示されているはずです。
完全なサンプルコードを見る。
サインインを有効化する
Google Maps JavaScript API を使用して作成されたマップ上でサインインを有効化するには、v3.18 以降の API を追加の signed_in=true パラメータを付けてロードします。
<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 から保存するときに、パーソナライズされた関連事項やアプリに戻るリンクを含めることができます。
この関連付け保存機能は、次の 2 つの方法で有効化できます。
place情報をマーカーに追加して、このMarkerに紐づけられているInfoWindowからの保存を可能にします。- カスタムの
SaveWidgetを作成します。
後でマップ上に保存されたプレイスを選択することで、プレイスにアクセスできます。
情報ウィンドウを使用して Google マップに保存する
プレイスに関する情報をマーカーに追加すると、デフォルトの情報ウィンドウで [Save to Google Map] コントロールを有効化できます。このコントロールは、該当するマーカーに関連付けられているすべての情報ウィンドウに自動的に追加されます。オプションで、保存とアプリを関連付けて、ユーザーが保存元ソースを忘れないようにすることができます。
情報ウィンドウから Google マップへの保存を有効化するには、次の手順に従います。
- 新しい
Markerを作成します。 MarkerOptionsで、map、placeおよびattributionの各プロパティを指定します。placeが指定されている場合はpositionは必要ありません。placeオブジェクトで、locationと次のいずれかを指定します。- プレイスを一意に識別する
placeId。詳細は、プレイス ID を使用したプレイスの参照をご覧ください。 location周辺のプレイスを検索するquery文字列。検索文字列は、できるだけ具体的にする必要があります。たとえば、'stanley park vancouver bc canada'のように指定します。
- プレイスを一意に識別する
attributionオブジェクトに、次の項目を指定します。- 保存の
source（ソース）。通常、これはサイトやアプリの名前です。 - サイトに戻るリンクとして含める
webUrl（オプション）。 - iOS で表示したときに
webUrlの代わりに表示するiosDeepLinkId（オプション）。URL スキームとして指定します。
- 保存の
- 新しい
InfoWindowを作成します。 MarkerがクリックされたときにInfoWindowを開くためのイベントリスナを追加します。
これにより、マーカーがクリックされたときに [Save to Google Maps] オプションが有効になります。
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>
ご不明な点がありましたら、Google の