MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.12.17

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

MarkerWithLabel

みなさん、こんにちは。

今回は 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タグ等も設定できるようですので、是非、みなさんも利用してみてください!!

 

バイ!

 

 

 

【関連記事】こんな記事も読まれています

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

2017.06.10

Street View Image API を初めて使ってみました

みなさん、こんにちは!

来週の 6月14、15日は、Google Cloud Next'17 が開催されます。皆さん、申込みしましたか? 

続きを読む

 - Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)