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

 

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

2017.02.11

Directions API で巡回セールスマン問題を解決する

みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します!・・・

続きを読む

2017.02.01

Embed API で会社のアクセスマップを作成する

こんにちは。

会社のホームページにアクセスマップを作成することがありますが、みなさんどのように作成していますか?

昔はFLASHや・・・

続きを読む

2017.08.20

Google Static Maps API の使い方

みなさん、こんにちは!

今回は、今まで紹介していなかった「Google Static Maps API」の使い方を紹介いたします。

続きを読む

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