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

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

これまで GoogleMaps API を使って Marker やら InfoWindow を表示するサンプルを作成してきました。

これらはどれも住所を入力させるものでした。
GoogleMaps では地図をクリックして Marker を設定することもできます。

Google Map サンプル v0.3.1 に手を加えて、クリックした場所に Marker を立てるようにしてみました。

サンプルは次の URL で公開しています。

icatch-pointer_7269926502_mini

photo credit: OlivierJD via photopin cc

目次

1. v0.3.1 からの変更点

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

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

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

1-1. Marker を立てる場所の指定を入力ではなくクリックに変更

v0.3.1 では Marker を立てる場所は住所を入力して指定しましたが、v0.4 では、地図上をクリックして指定するように変更しました。

1-2. 画面右側に広告を設定

画面の右側を広告エリアとして、Google Adsense と Amazon のアフィリエイトを貼らせてもらいました。

公開しているサンプルサイトや、このブログの記事が役に立ったならクリックしてくれるとうれしいです。

2. 使用したライブラリ

v0.3.1 からライブラリの変更はありませんが、初めてこの記事を見る方もいらっしゃると思いますので載せておきます。

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.3.1 から変更ありません。

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

./css:
style.css

./js:
script.js

3-2. index.html

広告枠を確保するために、画面右側をその領域としました。
“#right-side” の div タグが広告領域になっています。
Adsense の広告を縦に2つ並べて、その下に Amazon のアフィリエイトリンクを設置しました。

また、コピーライトを表示する領域として footer タグも追加しました。

v0.3.1 からの変更点は以上2箇所になります。

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

        <!-- CSS -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

        <link rel="stylesheet" type="text/css" href="./css/style.css" />
    </head>
    <body>
        <div class="container">
            <div id="header-hollow" class="row">
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-map-marker"></span>
                        </span>
                        <input type="text" id="address" class="form-control" value="東京都墨田区押上1−1−2" />
                    </div>
                </div>
            </div><!-- /#header-hollow -->

            <div class="row">
                <div id="main" class="col-md-9">
                    <div class="well well-sm">
                        <div id="map-canvas"></div>
                    </div>
                </div>
                <div id="right-side" class="col-md-3">
                    <div class="google-adsense">
                        <div class="label-ad">
                            <span>広告</span>
                        </div>
                        <div class="adsense">
                            ※adsense で発行したタグを貼り付ける
                        </div>
                        <div class="adsense">
                            ※adsense で発行したタグを貼り付ける
                        </div>
                    </div><!-- /.google-adsense-->

                    <div class="amazon">
                        <div class="label-ad">
                            <span>GoogleMaps 関連本</span>
                        </div>
                        <span class="amazon-book">
                            ※Amazon のアフィリエイトリンクを貼り付ける
                        </span>
                        <span class="amazon-book">
                            ※Amazon のアフィリエイトリンクを貼り付ける
                        </span>
                    </div>
                </div><!-- /#right-side -->
            </div>

            <footer>
                <span>Copyright © 2014 <a href="http://tomoyamkung.net">tomoyamkung.net</a> All Rights Reserved.</span>
            </footer>

        </div><!-- /.container -->

        <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 class="well info-window">
                <div class="row">
                    <span>緯度: <%= latitude %></span>
                </div>
                <div class="row">
                    <span>経度: <%= longitude %></span>
                </div>
            </div>
        </script>
    </body>
</html>

3-3. js/script.js

Marker と InfoWindow を生成して地図上に立てる処理をまとめるために setupMarker という関数を定義しました。
Map オブジェクトと、緯度・経度を格納したオブジェクトを渡してやると、Marker と InfoWindow が表示してくれます。

/**
 * 指定の場所に InfoWindow を設定した Marker を表示する。
 * 
 * @param  {Object} map Marker を立てる GoogleMap オブジェクト
 * @param  {Object} location Marker を立てる位置
 */
function setupMarker(map, location) {
    var marker = new google.maps.Marker({map: map, position: location}); // Marker オブジェクトを生成する

    var infoWindow = createInfoWindow(location.k, location.A); // InfoWindow オブジェクトを生成し、、、
    infoWindow.open(marker.getMap(), marker); // InfoWindow を表示する
}

地図上のクリックした場所に Marker を立てたいので、クリックされたタイミングで上記の setupMarker を呼びます。
「クリックされたタイミングで」というのは、「地図がクリックされたら○○する」というイベントをリスナーに追加してやることで実現できます。
その部分のコードは次の通りです。

google.maps.event.addListener(gmap, 'click', function(event) {
    // GoogleMap 上で左クリックがあったら、、、
    setupMarker(gmap, event.latLng);
        // その場所に Marker を立てる
});

Marker を立てる位置は event オブジェクトが持っているので、setupMarker にそれを渡してやります。

InfoWindow の生成などその他の処理は v0.3.1 から変更はありません。

以下は、スクリプトの全文です。

$(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 を出力する

        setupMarker(gmap, results[0].geometry.location);
            // 初期値の住所から計算した緯度経度の位置に Marker を立てる
        google.maps.event.addListener(gmap, 'click', function(event) {
            // GoogleMap 上で左クリックがあったら、、、
            setupMarker(gmap, event.latLng);
                // その場所に Marker を立てる
        });

        adjustMapSize();
    }
}

/**
 * 指定の場所に InfoWindow を設定した Marker を表示する。
 * 
 * @param  {Object} map Marker を立てる GoogleMap オブジェクト
 * @param  {Object} location Marker を立てる位置
 */
function setupMarker(map, location) {
    var marker = new google.maps.Marker({map: map, position: location}); // Marker オブジェクトを生成する

    var infoWindow = createInfoWindow(location.k, location.A); // InfoWindow オブジェクトを生成し、、、
    infoWindow.open(marker.getMap(), marker); // InfoWindow を表示する
}


/**
 * InfoWindow オブジェクトを生成する。
 * 
 * @param  {Number} latitude 緯度
 * @param  {Number} longitude 経度
 * @return {Object} InfoWindow オブジェクト
 */
function createInfoWindow(latitude, longitude) {
    var infoWindow = new google.maps.InfoWindow({
        content: createTag(latitude, longitude), // InfoWindow に表示するコンテンツ
        // maxWidth: 1000 // width は CSS で制御するようにしたのでコメントアウト
    });
    return infoWindow;
}

/**
 * InfoWindow 内に設定する HTML を生成する。
 *
 * HTML の生成は Underscore.js を使い、テンプレートは index.html 内に定義してある。
 * 
 * @param  {Number} latitude 緯度
 * @param  {Number} longitude 経度
 * @return {Object} InfoWindow に設定するタグ
 */
function createTag(latitude, longitude) {
    var template = _.template($('#infowindow_template').text());
    var tag = template({latitude: latitude, longitude: longitude});
    return tag;
}

/**
 * GoogleMap を表示する div タグのサイズを調整する。
 * 
 */
function adjustMapSize() {
    var padding = $('#header-hollow').height(); // 住所入力欄の height を取得

    var mapCanvas = $('#map-canvas');
    mapCanvas.css("height", ($(window).height() - mapCanvas.offset().top) - padding + "px");
}

3-4. css/style.css

CSS は全然知らないので、派手なことはせずに位置を調整する程度で使ってます。

width で調整している部分があるので、もしかしたらレスポンシブではなくなってしまったおそれがあります。
CSS は難しいです。。。

@charset "utf-8";

#map-canvas {
    width: 100%;
}

#header-hollow {
    padding: 10px 0px;
}

.info-window {
    width: 250px;
    display: table-cell;
    vertical-align: middle;
}

#main {
    width: 820px;
}

#right-side {
    width: 334px;
    /*background-color: #dcdcdc;*/
}

.label-ad {
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #dcdcdc;
}

.label-ad span {
    font-weight: bold;
}

.adsense {
    width: 304px;
    height: 254px;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 1px;
    border: solid 1px;
}

.amazon-book {
    margin: 10px 15px;
}

footer {
    text-align: center;
    padding: 25px 0;
    margin-top: 10px;
    background-color: #dcdcdc;
}

4. サンプル

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

地図上をクリックすると次々に Marker が立ちます。

v0.4 が最新の間は http://labo.tomoyamkung.net/googlemap-sample/ でも同じものが表示されます。

5. まとめ

使っていただくとすぐに分かると思いますが、Marker が次々に立つのはいいのですが、InfoWindow が重なって下に隠れたものが見えなくなってしまいます。

20140313_01_01

この点を次回は改善してみます。

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

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

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

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

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

Googleアドセンス用(PC)

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

関連記事

icatch-format_mini-thumbnail

JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる

Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScrip

記事を読む

icatch-painting_mini

jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する

jQuery を使ってタグに設定されているすべてのクラスを取り除いた後に指定のクラスを設定する方法で

記事を読む

icatch-where

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

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

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-automatic_2714993937_mini-thumbnail

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

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

記事を読む

icatch-plug_8436280178_mini-thumbnail

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた

BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

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

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-checkbox-147904_640

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

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

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

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

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

Googleアドセンス用(PC)

Message

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


8 − 八 =

次の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 ↑