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.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

2017.01.12

Roads API を使って道路へスナップする

みなさん、こんにちは!

 

今回は、Google Maps API のウェブサービスのひとつ「

続きを読む

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

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

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

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

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