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

 

バイ!

 

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2017.03.11

GoogleマップにGeoJSONで図形を描画する

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画・・・

続きを読む

2017.05.01

Google Places API オートコンプリートで地名検索を素早くする

みんさん、こんちには。

今回は、Google Places API のオートコンプリートについて、ご紹介します。

オートコ・・・

続きを読む

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツ・・・

続きを読む

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