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

公開日： 2014/03/13 : 最終更新日：2014/05/05 JavaScript Github, GoogleMap, JavaScript, jQuery, TwitterBootstrap, Underscore.js

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

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

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

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

Google Map サンプル v0.4

photo credit: OlivierJD via photopin cc

1. v0.3.1 からの変更点

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

Google Map サンプル 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="東京都墨田区押上１−１−２" />
                    </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;
}