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

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

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

住所から座標(緯度・経度)を計算して地図を表示する仕組みを ジオコーディング と呼ぶらしいのですが、その方法をメモしておきます。

icatch-googlemap_3384984991_mini

photo credit: agoasi via photopin cc

目次

1. 使用したライブラリ

使用したライブラリと、そのバージョンは次の通りです。

1-1. jQuery

今回のサンプルに jQuery は必須ではないのですが、この書き方で慣れてしまっているので使いました。

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

1-2. Google Maps JavaScript API v3

GoogleMap の表示には Google Maps JavaScript API v3 を使います。

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

2. ソースコード

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

2-1. ファイル構成

今回のサンプルは次のページに載っている JavaScript をちょこちょこっと組み替えただけで、検索する住所の指定は JavaScript に直接書くというお粗末なものです。
入力欄ぐらい用意しても良かったのですがちょっと他にもやることがあったので端折ってしまいました。。。

使用したファイルは次のものになります。

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

./css:
style.css

./js:
script.js

2-2. index.html

まずは index.html です。

ここには参照する JavaScript の参照定義と、GoogleMap を表示するためのタグだけを定義しています。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=utf8>
        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/style.css" />
    </head>
    <body>
        <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="./js/script.js" charset="utf8"></script>
    </body>
</html>

id に map-canvas と指定してある div タグに GoogleMap をレンダリングします。

2-3. js/script.js

このファイルで GoogleMap をレンダリングします。

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

$(function() {
    var address = "東京都墨田区押上1−1−2";
    new google.maps.Geocoder().geocode({'address': address}, callbackRender);
        // Geocoder.geocode 関数に住所とコールバック関数を渡す
});

/**
 * ジオコーダの結果を取得したときに実行するコールバック関数。
 * 
 * この関数内で 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 を出力する
        new google.maps.Marker({map: gmap, position: results[0].geometry.location});
            // 指定の住所から計算した緯度経度の位置に Marker を立てる

        adjustMapSize();
    }
}

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

2-4. css/style.css

表示する位置を調整するための CSS です。

@charset "utf-8";

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

3. サンプル

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

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

4. まとめ

今回は GoogleMap を使って住所から地図を表示してみました。

複数箇所に Marker を立てたり、Marker に付加情報を設定することもできます。
これらについてもメモしてみたいと思っています。

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

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

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

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

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

Googleアドセンス用(PC)

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

関連記事

icatch-switch_mini

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

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

記事を読む

icatch-disappear_7186028511_mini-thumbnail

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

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

記事を読む

icatch-checklist_4439276478_mini-thumbnail

BootstrapValidator の基本的なバリデーションを試すサンプルを作成しました

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapVali

記事を読む

icatch-drill_mini

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

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

記事を読む

icatch-exception_2482521750_mini-thumbnail

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

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

記事を読む

icatch-format_mini-thumbnail

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

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

記事を読む

icatch-pointer_7269926502_mini-thumbnail

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

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

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

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

記事を読む

icatch-painting_mini

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

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

記事を読む

icatch-template_mini

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

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

記事を読む

Googleアドセンス用(PC)

Message

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


七 + 5 =

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