TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

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

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。
意外と簡単に扱うことができるので、「こんなことできるのかな」ってことを試す日々を送ってます。

で、今回も懲りずに GoogleMap ネタです。
現在、次の URL などで GoogleMap のサンプルを公開してます。

サンプル作って公開するのはいいんですが、見た目がアレなのが気になってまして。
少しでも見栄えを良くするために Twitter Bootstrap3 をデザインのベースに適用してみました。

上記の URL のサンプルは Twitter Bootstrap3 を適用したものです。

icatch-bootstrap3

目次

1. v0.3 からの変更点

v0.3 は GitHub に登録してあります。

1-1. Twitter Bootstrap3 をデザインのベースに適用

次のスクリーンショットが v0.3 のもの。
とても質素です。

20140307_01_02

こちらが v0.3.1。
glyphicons を使ってみたり、全体的に丸い感じなりました。
まぁ、自己満足の世界ですが。

20140307_01_01

2. ソースコード(デザインに関する部分のみ

機能的には v0.3 と変わらないので、今回はデザインに関する部分のみソースコードを載せます。

2-1. ファイル構成

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

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

./css:
style.css

./js:
script.js
</script>

2-2. index.html

CSS の参照定義

head タグ内で CSS の参照定義を書いてます。

<!-- 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" />

上2つが Bootstrap3 に関する定義です。
CSS はローカルにダウンロードしたものを参照するのではなく CDN 経由で参照しています。

上記では href に “https://” とプロトコルを書いてますが、↓のようにプロトコルは書かなくても動きます。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

http で通信するのか、それとも https で通信するのかはブラウザに任せるのが最近の考え方らしいので、プロトコルは省略したほうが良いようです。

3番目の “./css/style.css” は、表示を整えるために定義したスタイルです。

glyphicons の定義

次のように書くと、GoogleMap の Marker アイコンが表示されるようになります。

<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>

定義は Bootstrap3 のサイトにある例を参考にしました。

グリッドの定義

.row やら col-md-5 を使ってグリッドを定義しています。
デザインのことは疎いので Bootstrap3 はとても助かるのですが、あっという間にインデントが深くなるのがちょっとアレです。

body タグ内のコードは次の通りです。

<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 class="well well-sm">
                <div id="map-canvas"></div>
            </div>
        </div>
    </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>

あと、GoogleMap をドラッグするとより分かりますが、Map を囲むように .well を使っています。
何となく殺風景だったので使ってみましたが、これはどういう用途で使用するものなのでしょうか。

2-3. js/script.js

JavaScript の変更点は次の2箇所です。

InfoWindow の width を CSS で定義した

JavaScript で InfoWindow の width を定義していましたが、CSS で指定するように変更しました。

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

GoogleMap を表示する高さを調整

v0.3 までは調整する値をスクリプト内に定義していました。
これだとデザイン調整が入るたびにこの値も変更する必要があります。

v0.3.1 では次のように jQuery を使って取得した値を使って調整するようにしました。

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

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

height を取得したのに格納する変数名が “padding” なのは、試行錯誤した名残です。

2-4. css/style.css

以下は全文です。

@charset "utf-8";

#map-canvas {
    width: 100%;
}

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

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

#map-canvas は GoogleMap を表示する横幅を定義しています。

#header-hollow は、住所入力フォームの上下に隙間を作りたかったので padding を付けています。

.info-window は InfoWindow 用の定義です。
横幅と、緯度・経度を表示する位置を上下中央にしたかったので、このように定義してあります。

3. サンプル

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

4. まとめ

デザインは自己満足の世界ですが、ちょっとだけそれっぽくなった気がします。

Bootstrap は難しいことをしなければいいヤツです。

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

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

tomoyamkung/googlemap-sample at v0.3.1

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

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

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

Googleアドセンス用(PC)

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

関連記事

icatch-googlemap_3384984991_mini-thumbnail

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

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

記事を読む

icatch-drill_mini

Underscore.js の template を使ってドリルダウンを実装するスニペット

先日、Underscore.js の template と each を使って JSON から se

記事を読む

icatch-checkbox-147904_640

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

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

記事を読む

icatch-darts_1543970905_mini-thumbnail

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

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

記事を読む

icatch-browser_3376956889_mini-thumbnail

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

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

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

最近 JavaScript を使う機会が増えてきて、快適にコードが書けるように環境を少しずつ整えてき

記事を読む

icatch-template_mini

Underscore.js の template と each を使って JSON から select タグを生成する

Underscore.js を使って、都道府県名を定義してある JSON から select タグを

記事を読む

icatch-disappear_7186028511_mini-thumbnail

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

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

記事を読む

icatch-twins_7039449789_mini

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

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

記事を読む

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 ↑