MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.01.24

InfoWindow をカスタマイズする

InfowWindowのカスタマイズ

こんにちは。

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

 

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

2017.02.26

Wi-Fi マックアドレスから位置取得

みなさん、こんにちは。

Google Maps API には様々なAPIがありますが、その中の「続きを読む

2016.12.22

未来の交通状況を考慮したルート検索

みなさん、こんにちは。

 

Google Maps API では、指定した日時の交通状況を予測したかたちでルート検索を行・・・

続きを読む

2017.07.19

「関東一の祇園・熊谷うちわ祭り」の山車・屋台位置情報サイト公開!

みんさん、こんにちは!

暑い夏をいかがお過ごしですか?今回は、前回記事の山笠に引き続き、夏祭りネタにです^^

 ・・・

続きを読む

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

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

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

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