GoogleMap の Marker に InfoWindow を設定するサンプル

公開日: : 最終更新日:2014/05/05 JavaScript , , , ,

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。
そのサンプルプログラムを作成したのでメモしておきます。

サンプルプログラムは次の URL で公開しているものを修正したものになります。

icatch-googlemap_4866826566_mini

photo credit: masakiishitani via photopin cc

目次

1. v0.2 からの変更点

次の URL で公開しているものは v0.2 として作成したものです。

今回の改修では、このバージョンをベースに機能を修正して v0.3 としました。

具体的な機能修正内容は次の通りです。

1-1. 住所から計算した緯度・経度は InfoWindow を使って表示するように変更

v0.2 では、緯度・経度を画面上部にちょろっと表示してました。

20140307_01

やっつけ感がぷんぷん漂っていたのを、InfoWindow を使って表示するように変更しました。

20140307_02

InfoWindow に表示している内容が安っぽいので、相変わらずやっつけ感は残っていますが、GoogleMap の機能を使っているぜって感じにはなりました(と思っています)。

まぁ、サンプルなので実装がどうなっているのかが分かれば。。。

2. 使用したライブラリ

v0.2 との変更点は Underscore.js を追加したことです。

Underscore.js は InfoWindow に HTML を設定する際に使用しています。

2-1. jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

2-2. Google Maps JavaScript API v3

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

2-3. Underscore.js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

3. ソースコード

以下は、作成したソースコードについてになります。

3-1. ファイル構成

ファイル構成は v0.2 から変更ありません。

  • index.html
  • js/script.js
  • css/style.css
$ ls -R
.:
css  index.html  js

./css:
style.css

./js:
script.js

3-2. index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=utf8>
        
        <meta name="description" content="入力欄で指定した住所から緯度・経度と GoogleMap で表示するだけの簡単なプログラムです。" >

        <link rel="stylesheet" type="text/css" href="./css/style.css" />
    </head>
    <body>
        <div id="field">
            <input type="text" id="address" size="70" value="東京都墨田区押上1−1−2" />
        </div>
        <div id="map-canvas"></div>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
        <script type="text/javascript" src="./js/script.js" charset="utf8"></script>
        <script type="text/template" id="infowindow_template">
            <div>
                <div>
                    <span>緯度:<%= latitude %></span>
                </div>
                <div>
                    <span>経度:<%= longitude %></span>
                </div>
            </div>
        </script>
    </body>
</html>

“#address” の input タグが住所入力欄なのは v0.2 と同じですが、その下にあった緯度・経度表示用の span タグを削除。
その代わりに “#infowindow_template” の script タグを追加しました。

このタグは InfoWindow に設定する HTML のテンプレートです。
underscore.js を使って、このテンプレートから InfoWindow に設定する HTML を生成します。

“#map-canvas” の div タグは GoogleMap のレンダリング用のタグです。

3-3. js/script.js

このスクリプトで GoogleMap をレンダリングします。

コメントを残してあるので、何をやっているかの雰囲気は掴めるんじゃないかと思います。

$(function() {
    var geocoder = new google.maps.Geocoder();

    // 初期表示
    var address = $('#address').val();
    geocoder.geocode({'address': address}, callbackRender);

    // 住所が入力された場合の対応
    $('#address').change(function(event) {
        address = $(this).val();
        geocoder.geocode({'address': address}, callbackRender);
    });
});

/**
 * ジオコーダの結果を取得したときに実行するコールバック関数。
 * 
 * この関数内で GoogleMap を出力する。
 * 
 * @param results ジオコーダの結果
 * @param status ジオコーディングのステータス
 * 
 */
function callbackRender(results, status) {
    if(status == google.maps.GeocoderStatus.OK) {
        var options = {
            zoom: 18,
            center: results[0].geometry.location, // 指定の住所から計算した緯度経度を指定する
            mapTypeId: google.maps.MapTypeId.ROADMAP // 「地図」で GoogleMap を出力する
        };
        var gmap = new google.maps.Map(document.getElementById('map-canvas'), options);
            // #map-canvas に GoogleMap を出力する
        var marker = new google.maps.Marker({map: gmap, position: results[0].geometry.location});
            // 指定の住所から計算した緯度経度の位置に Marker を立てる

        var infoWindow = createInfoWindow(results); // InfoWindow オブジェクトを生成し、
        infoWindow.open(marker.getMap(), marker); // 初期表示で InfoWindow を表示する
        google.maps.event.addListener(marker, 'click', function(event) {
            infoWindow.open(marker.getMap(), marker);
                // Marker をクリックしても InfoWindow を表示する
        });

        adjustMapSize();
    }
}

/**
 * InfoWindow オブジェクトを生成する。
 * 
 * @param result ジオコーダの実行結果
 * 
 */
function createInfoWindow(result) {
    var infoWindow = new google.maps.InfoWindow({
        content: createTag(result), // InfoWindow に表示するコンテンツ
        maxWidth: 500
    });
    return infoWindow;
}

/**
 * InfoWindow 内に設定する HTML を生成する。
 *
 * HTML の生成は Underscore.js を使い、テンプレートは index.html 内に定義してある。
 *
 * @param result ジオコーダの実行結果
 * 
 */
function createTag(result) {
    var latitude = result[0].geometry.location.d; // 緯度
    var longitude = result[0].geometry.location.e; // 経度
    var template = _.template($('#infowindow_template').text());
    var tag = template({latitude: latitude, longitude: longitude});
    return tag;
}

/**
 * GoogleMap を表示する部分のサイズを調整する。
 * 
 */
function adjustMapSize() {
    var mapCanvas = $('#map-canvas');
    var marginBottom = 5; // CSS に定義してある margin の値
    mapCanvas.css("height", ($(window).height() - mapCanvas.offset().top - marginBottom) + "px");
}

3-4. css/style.css

表示する位置を調整するための CSS です。
v0.2 と変更はありません。

@charset "utf-8";

#map-canvas {
    margin:5px 5px;
    width:100%;
}

4. サンプル

このサンプルプログラムは、次の場所に公開してあります。

初期表示では東京スカイツリーを Marker した GoogleMap がほぼ全画面で表示されるはずです。
InfoWindow も表示されます。

住所を入力すると、その場所の GoogleMap が表示されます。

5. まとめ

InforWindow に情報を表示させると一段と GoogleMap っぽい感じになります。

このサンプルではテキストのみを表示していますが、画像などのコンテンツも表示できます。
InfoWindow に設定している HTML をいじってみると面白いと思います。

6. プログラムを Github に登録しました

今回の記事で使用したサンプルプログラムを Github に登録しました。

よかったら参考にしてみてください。

7. その他の GoogleMap に関する記事

その他の GoogleMap に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-load_6161289029_mini-thumbnail

Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし

記事を読む

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

icatch-exception_2482521750_mini-thumbnail

Error オブジェクトの種類と独自例外オブジェクトの作成方法

JavaScript で例外オブジェクトを扱ったことがなかったので、簡単な内容ですが例外オブジェクト

記事を読む

icatch-simcity_536954375_mini-thumbnail

GoogleMapsAPIを使ってMarkerを削除する方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を削除する方法に

記事を読む

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-darts_1543970905_mini-thumbnail

GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法

GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


四 − 3 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑