GoogleMap を使って住所から緯度・経度を計算する

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

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も GoogleMap に関してになります。

ユーザが入力した住所からその場所の緯度・経度を計算する要件がありまして、そこでジオコーディングを使いました。
簡単にメモしておきます。

icatch-googlemap_3384995399_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. ファイル構成

やってることは 先日の内容 とほぼ同じで、変更点は次の通りです。

  • 住所を入力する input タグを追加した
  • 住所から計算した緯度・経度を表示するようにした

使用したファイルも先日の内容に付け加えただけなので変更ありません。

  • 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

まずは 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" />
            <span>
                緯度:<span id="latitude" ></span>  経度:<span id="longitude" ></span>  <span id="failure"></span>
            </span>
        </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="./js/script.js" charset="utf8"></script>
    </body>
</html>

“#address” の input タグが住所入力欄。
その下にある span タグは緯度・経度を表示するためのものです。

“#map-canvas” の div タグに GoogleMap をレンダリングします。
ここは先日の内容と同じです。

2-3. js/script.js

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

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

var latitude; // 計算した緯度を表示する span タグ
var longitude; // 計算した経度を表示する span タグ
var failure; // 該当する緯度・経度が見つからなかった場合に表示する span タグ

$(function() {
    latitude = $('#latitude');
    longitude = $('#longitude');
    failure = $('#failure');
    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) {
        latitude.text(results[0].geometry.location.d);
        longitude.text(results[0].geometry.location.e);
        failure.text('');

        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();
    } else {
        latitude.text('');
        longitude.text('');
        failure.text('指定した住所に該当する緯度・経度は見つかりませんでした。');
    }
}

/**
 * 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 がほぼ全画面で表示されるはずです。

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

4. まとめ

やっぱり住所を入力できないと自分で使ってても不便だったので、機能追加しました。

まだまだ GoogleMap を使っていろいろ試したので、これをベースに機能追加してみようと思います。

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

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

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

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

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

Googleアドセンス用(PC)

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

関連記事

icatch-plug_8436280178_mini-thumbnail

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

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

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

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

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

記事を読む

icatch-twins_7039449789_mini

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

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

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

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

記事を読む

icatch-mist_mini

jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる

仕事で HTML を使ってコンテンツをいくつか作成しました。 その際に他でも使い回しが効くスニペット

記事を読む

icatch-where

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

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

記事を読む

icatch-pointer_7269926502_mini-thumbnail

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

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

記事を読む

icatch-format_mini-thumbnail

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

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

記事を読む

icatch-checklist_4439276478_mini-thumbnail

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

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

記事を読む

icatch-darts_1543970905_mini-thumbnail

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

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

記事を読む

Googleアドセンス用(PC)

Message

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


− 一 = 2

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