googleforwork-japan: Google Maps JavaScript API でマーカーのラベル設定が可能に

Google Maps JavaScript API でマーカーのラベル設定が可能に

2015年8月24日月曜日

たくさんのマーカーが表示された地図では目的地が分かりづらいものです。Google の検索画面では、地図上のマーカーにラベルを加えることでその問題に対処しています。これにより、ユーザーはマーカーと検索結果とを照らし合わせることができるようになります。

Google Maps JavaScript API（英語）を用いてアプリケーションなどを開発する際にこのラベル設定用のプロパティが使用可能になっていますが、それができるよう、MarkerOptions（英語）に新しいラベルプロパティを導入し、マーカーのラベル設定をもっと簡単にできるようにしたのです。ラベルプロパティを使って文字や数字などをマップのマーカーに設定できるので、目的地が分かりやすく、より見やすい地図を作成することができます。
例えば、ラベル「A」をマーカーに追加する場合は、マークを付けたいピンに「label」を加えます。
var marker = new google.maps.Marker({
// マップと位置パラメーターをこれまで通りに準備します。
label: 'A'
});

この機能はカスタムアイコンでも使用できるので、地図に全体的な統一感を持たせることができます。また、アイコン内のテキストの原点を設定したり、テキストの色を設定したりもできます。設定例をご覧ください。
var beachIcon = {
url: 'images/beachflag.png',
labelOrigin: new google.maps.Point(9, 9)
};

var marker = new google.maps.Marker({
// マップと位置パラメーターをこれまで通りに準備します。
icon: beachIcon,
label: {
text: '2',
color: 'purple'
}
});