MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2017.01.24

InfoWindow をカスタマイズする

InfowWindowのカスタマイズ

こんにちは。

Google Maps 上に描画したマーカーをクリックしたときに表示する吹き出し、通称「InfoWindow」をカスタマイズして自分独自のデザインにしてみませんか?
今回は、InfoWindow を簡単にカスタマイズする方法を紹介したいと思います。

 

InfoWindow  をカスタマイズするときは「infobox」という便利なライブラリが公開されていますので、こちらを使用します。

infobox ライブラリのダウンロード

 

簡単なサンプルを作成したので、ご覧ください。

左側のアイコンをクリックすると通常の InfoWindow が表示されます。右側の赤いアイコンをクリックすると、カスタマイズした InfoWindow を表示します。

InfoWindowカスタマイズ

 

 

カスタマイズ方法を解説します。

まず、先程ご紹介した infobox.js は、google maps の js をロードした後にロードする必要があります。

<script src="https://maps.google.com/maps/api/js?v=3&key=XXXXXXXX"></script>
<script src="infobox.js"></script>

 

// Mapオブジェクト生成
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Markerを生成
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(35.69, 129.75),
});

表示するHTMLを生成します。<div>タグを生成後、innerHTMLに表示するHTMLを設定してください。

inofboxOptions の 「content」パラメータに上記で作成した div タグを設定します。

infobox のインスタンスを生成後、open メソッドで表示します。閉じるときは、close メソッドを使用してください。

// Marker をクリックした時のイベントを定義
google.maps.event.addListener(marker, 'click', function() {
    // infobox 用の div エレメントを生成
    var infoboxContent = document.createElement('div');
    // infobox に表示するHTML
    infoboxContent.innerHTML = '
        <div class="infobox">
          <div class="inner">
            <div class="header"><h3>マルティスープ株式会社</h3></div>
            <div class="container">東京都千代田区神田錦町3-11<br/>03-3518-9013</div>
            <div class="footer"><button>Detail</button></div>
          </div>
        </div>
    ';

    // infobox のオプション
    var infoboxOptions = {
        content: infoboxContent,  //表示するHTML
        disableAutoPan: false,
        dixelOffset: new google.maps.Size(-150, -48), // オフセット値
        zIndex: null,
        alignBottom: true,
        boxClass: "infobox",
        enableEventPropagation: true,
        closeBoxMargin: "0px 0px -30px 0px",
        closeBoxURL: "close.png", // 閉じるボタンのイメージ
        infoBoxClearance: new google.maps.Size(1, 1)
    };
    // infobox を生成して表示
    var infobox = new InfoBox(infoboxOptions);
    infobox.open(map, this);
});

今回作成した CSS は下記の通りです。

.infobox {
    font-family: 'Arial', sans-serif;
    display: block;
    width: 300px;
    position: relative;
    background: white;
    opacity: 0.9;  
}
.infobox .inner .header{
    background-color: #555;
    padding: 5px;
    color:#fff;
}
.infobox .inner .container {
    padding: 10px;
    font-size: 12px;
}
.infobox .inner .footer {
    text-align: right;
    padding: 10px;
}
.infobox .inner {
  border-bottom: 5px solid #0dcdbd;
}
.infobox .inner .footer button {
    padding: 5px 20px;
    background-color: #009E9E;
    border: none;
    color:#fff;
    font-size: 14px;
}
.infobox .inner .footer button:hover {
    background-color: #f7941d;
}
.infobox img {
    z-index: 1
}

 

infobox は、通常の InfoWindow を表示するときのロジックとそれ程大きな違いはありません。意外と変更はし易いと思いますので、是非お試しください。

私はそれ程 CSS が得意ではないのですが、デザインセンスがある人が行えば、もっとカッコ良いものが簡単にできると思います!

 

マルティスープでは、今後も Google Maps の便利なライブラリや小技などを紹介していきたいと思います。もしご要望などあれば、下記の問い合わせより応募してください。可能な限りお答えしたいと思います。

 

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

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

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

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

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

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

2017.06.24

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

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

続きを読む

2018.06.28

新プランの Places API を調べてみました

みなさん、こんにちは。

新プラン Google Maps Platform の中で、 Places API の価格体系は、非常に細かく分類・・・

続きを読む

2018.04.26

Googleマップでマーカーの回転

みなさん、こんにちは。

Google マップでマーカーを描画するとき、回転したいなと思うことはありませんか?

例えば、車の走行履歴・・・

続きを読む

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