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

 

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

2018.06.22

Google Maps Platform でAPIキーを新規に作成する方法

みなさん、こんにちは。

Google 社より5月3日に発表された Google Maps Platform では、APIキーを指定しないアクセ・・・

続きを読む

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置・・・

続きを読む

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは!

今回は、「JavaScript・・・

続きを読む

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

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

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