GoogleMapsAPI地図 Maker(マーカー)にテキストラベルを付ける

以前にGoogleMapsAPIを使って、大山グルメマップを作成しましたが、使いづらい課題が残っていました。

1 現状課題
2 課題１対策マーカーにテキストラベルを付ける
3 課題２対策 Google標準マーカーはクリックできないようにする
- 3.1 こちらの記事もどうぞ

現状課題

お店の名前がわからない。
グルメのアイコンが密集しており、アイコンをひとつずつクリックしないと店名がわからないため、どこにどのお店があるのかが把握できないという点です。
クリック誤操作が多い自分が立てたマーカーと、Google標準のマーカーが隣接しており、誤って標準のマーカーをくりっくすることが多い。

今回この課題に対応していきたいと思います。

課題１対策マーカーにテキストラベルを付ける

マーカーだけでは何のお店なのか一目でわからないのでマーカーにテキストラベルを追加します。

他の方法として、infowindowをデフォルト表示する方法もありますが、infowindowだと吹出しが大きくて、見た目が良くないのでこれはやめました。

マーカーにテキストラベルとつける方法は標準APIでは対応はできないみたいなので、有志の方が開発した「markerwithlabel」というライブラリを使用します。

GitHubからダウンロードできます。
https://github.com/goglemaps/v3-utility-library/tree/master/markerwithlabel

この中のsrcディレクトリにあるmarkerwithlabel.jsをincludeします。
includeした状態で、Markerのカスタムクラスを使ってインスタンスを生成します。

作成したデモ

こんな感じでマーカーにラベルを表示させることができます。これは見易いですね。

ソース javascript

//通常google.maps.Markerを使うところをMarkerWithLabelに置き換えます。
//labelContentのところが表示するラベルです。
var marker1 = new MarkerWithLabel({
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "ニコニコ",
labelAnchor: new google.maps.Point(10, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.75}
});

ソース css

// 見た目はcssで制御します。
<style type="text/css">
.labels {
color: blue;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
--font-weight: bold;
text-align: center;
width: 40px;
border: 2px solid black;
white-space: nowrap;
}
</style>

完成。これでクリックしなくともお店の名前がわかるようになりました。見やすい・・・です。フォントのサイズや色はＣＳＳで変更できます。