マルティスープ
Staff Blog

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描画方法をご紹介いたします。

通常、ラベル付きマーカーを描画するときは、以下のような記述になります。

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(35.6, 139,6),
    icon: {
        url: 'pin.png',
        scaledSize new google.maps.Size(32, 32),
        labelOrigin: new google.maps.Point(20, 50)  //ラベルの基点
    },
    label: {
       text: 'ラベル文字',         //ラベル文字
       color: '#ff0000',          //ラベル文字の色
       fontFamily: 'sans-serif',  //フォント 
       fontWeight: 'bold',        //フォントの太さ 
       fontSize: '14px'           //フォントのサイズ 
    } 
});

マーカー生成時に、label オプションを設定するとラベルを描画できますが、この方法では、フォント・フォントのサイズ・色・太さ等しか指定できないため、あまりカッコ良いラベルにはなりません。

しかし、Google 社が提供している「MarkerWithLabel」というライブラリを用いれば、スタイル（CSS）を利用できるようになります。

MarkerWithLabel ライブラリのダウンロードサイト

では使用方法をを説明いたします。

上記のサイトでダウンロードした「markerwithlabel.js」を 、Google Maps JacaScript API の js の後でロードするようにします。

<script src="https://maps.google.com/maps/api/js?v=3&key={API_KEY}"></script>
<script src="markerwithlabel.js"></script> 

「MakerWithLabel」オブジェクトを以下のように作成します。

var marker = new MarkerWithLabel({
    map: map,
    position: new google.maps.LatLng(35.6, 139,6),
    icon: {
        url: 'pin.png',
        scaledSize new google.maps.Size(32, 32)
    },
    labelContent: 'ラベル文字',                   //ラベル文字
    labelAnchor: new google.maps.Point(38, 0),   //ラベル文字の基点
    labelClass: 'labels',                        //CSSのクラス名
    labelStyle: {opacity: 0.8}                   //スタイル定義
});

使用するスタイルを定義します。

 <style>
.labels {
    color: #ffffff;
    background: #000000;
    font-size: 14px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 8px;
}
</style>

以下がサンプルです。マーカーの下に黒い背景のボックス付きラベルを描画してみました。

このように 「MarkerWithLabel」ライブラリを利用すれば、簡単にスタイル付きのラベルを描画できます。なお、labelContent プロパティには、imgタグ等も設定できるようですので、是非、みなさんも利用してみてください！！

バイ！