今回は以前解説した「マーカーを追加する方法」をベースに、マーカーにツールチップを表示する方法について解説していきたいと思います。
まず、「ツールチップ」とは「コンピュータの操作画面の表示要素の一種で、対象にカーソルやマウスポインタを合わせると周辺に小さな領域が出現し、注釈などが表示されるもの」のことを言います。以下画像のように、アイコンにマウスポインタを合わせると、説明のテキストが表示されます。
このような形でツールチップをマーカーに表示させてみましょう。
マーカーにツールチップを表示させることで、そのマーカーがどのような意味を持っているのかをユーザに分かりやすく伝えることができます。
特にマーカーに情報ウィンドウを表示させない時やマーカーの画像を標準のまま使用する時など、マーカーの説明が特になされていない場合には、ユーザの理解を手助けるすためにとても役立ちます。
それでは早速、マーカーにツールチップを表示する方法を見ていきましょう。
marker optionのtitleにツールチップとして表示させたいテキストを指定しましょう。
ツールチップで表示されるテキストを設定していない場合はundefinedが返ってきます。
マーカーのツールチップにテキストを追加したい場合は、以下Markerクラスのメソッドで追加しましょう。
マーカーのラツールチップのテキストをセットすると、マーカーにポインタを合わせた時に表示されます。
マーカーにポインタを合わせた時にツールチップが表示されるのが確認できますね。
また、「GET」ボタンをクリックすると、表示領域（画面右上のコンテンツ）にツールチップに指定したテキストを取得することができます。
そして、「SET」ボタンをクリックすると、ツールチップに「再セット」というテキストが追加されます。
ソースをそのまま使用しても表示できますので、まずはコピーしてツールチップを表示してみましょう。
サンプルページはこちら
以上でマーカーにツールチップを表示する方法の解説を終わります。
マーカーの数を多く表示させるときに、ツールチップを設定しまうと逆にユーザにとって分かりにくいUIとなることがあります。その時の地図の表現に合わせて、適時表示の設定を見直すように心がけましょう。
まず、「ツールチップ」とは「コンピュータの操作画面の表示要素の一種で、対象にカーソルやマウスポインタを合わせると周辺に小さな領域が出現し、注釈などが表示されるもの」のことを言います。以下画像のように、アイコンにマウスポインタを合わせると、説明のテキストが表示されます。
マーカーにツールチップを表示させることで、そのマーカーがどのような意味を持っているのかをユーザに分かりやすく伝えることができます。
特にマーカーに情報ウィンドウを表示させない時やマーカーの画像を標準のまま使用する時など、マーカーの説明が特になされていない場合には、ユーザの理解を手助けるすためにとても役立ちます。
それでは早速、マーカーにツールチップを表示する方法を見ていきましょう。
マーカーにツールチップを表示する
マーカーにツールチップを表示させる方法はとても簡単です。marker optionのtitleにツールチップとして表示させたいテキストを指定しましょう。
1 2 3 4 5 6 | var marker = new google.maps.Marker({ position: myLatlng, //ツールチップを指定 title: 'ツールチップ', map: map,}); |
マーカーのツールチップのテキストを取得する
マーカーのツールチップに指定したテキストを取得したい場合は、以下Markerクラスのメソッドで取得することができます。1 | marker.getTitle(); |
マーカーのツールチップのテキストを追加する
マーカーのツールチップのテキストは、マーカー設定した後に追加することも可能です。マーカーのツールチップにテキストを追加したい場合は、以下Markerクラスのメソッドで追加しましょう。
1 | marker.setTitle('ここに追加したいテキストを入れます'); |
マーカーにツールチップを表示、取得、追加する
それでは、以下サンプルで一通りの動作を確認してみましょう。マーカーにポインタを合わせた時にツールチップが表示されるのが確認できますね。
また、「GET」ボタンをクリックすると、表示領域（画面右上のコンテンツ）にツールチップに指定したテキストを取得することができます。
そして、「SET」ボタンをクリックすると、ツールチップに「再セット」というテキストが追加されます。
ソースをそのまま使用しても表示できますので、まずはコピーしてツールチップを表示してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script>var map, marker;function initMap() { var myLatlng = new google.maps.LatLng(35.681167, 139.767052); //インスタンスを作成 map = new google.maps.Map(document.getElementById('map'), { //地図のオプション //初期のズームレベル zoom: 12, //地図の中心点 center: myLatlng }); //マーカーの初期プロパティを指定 marker = new google.maps.Marker({ position: myLatlng, //ツールチップを指定 title: 'ツールチップ', map: map, });}//SETボタンクリック時にマーカーのツールチップにテキストを追加function set() { marker.setTitle('再セット');}//GETボタンクリック時にマーカーのツールチップにテキストを取得function get() { var getTitle = marker.getTitle(); $('#result').text(getTitle);}google.maps.event.addDomListener(window, 'load', initMap);</script> |
サンプルページはこちら
以上でマーカーにツールチップを表示する方法の解説を終わります。
マーカーの数を多く表示させるときに、ツールチップを設定しまうと逆にユーザにとって分かりにくいUIとなることがあります。その時の地図の表現に合わせて、適時表示の設定を見直すように心がけましょう。
ご質問などございましたら、お気軽に下記コメント欄にお寄せください。
※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。
コメント
コメントを投稿