マルティスープ
Staff Blog

2017.01.24

InfoWindow をカスタマイズする

こんにちは。

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

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

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

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

左側のアイコンをクリックすると通常の 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 の便利なライブラリや小技などを紹介していきたいと思います。もしご要望などあれば、下記の問い合わせより応募してください。可能な限りお答えしたいと思います。