ブログ
緯度経度が取得できなくなった
Google Map APIを使って緯度と経度を取得できるのが大変便利なので、テキストボックスに住所を入力したら、緯度と経度それぞれのテキストボックスに、取得した値を表示するという入力画面を作成していましたが、ある日を境にして、それができなくなっていました。
おそらくAPIキーを必須とするように、Google側でポリシー変更したものだろうと判断して対応してみます。
また特に、次項でJavascriptを使って抽出した緯度経度を表示させる関係上、下記の手順13と14は必須のポイントになります。
おそらくAPIキーを必須とするように、Google側でポリシー変更したものだろうと判断して対応してみます。
ご注意 : 本稿は、入力画面内に既に以下のようなname属性のテキストボックスがあるものとして話を進めます。
- 住所
- name="f_address"
- 緯度
- name="f_lat"
- 経度
- name="f_lng"
Google Map APIキーの取得
APIキーの取得をするにはGoogleアカウントが前提ですが、この部分については割愛します。また特に、次項でJavascriptを使って抽出した緯度経度を表示させる関係上、下記の手順13と14は必須のポイントになります。
- まずGoogle API Consoleにアクセスします。
- プロジェクトを任意の名前で作ります。
- API Manager画面の左側ペインにある認証情報をクリックします。
- 認証情報を作成をクリックします。
- APIキーをクリックします。
- キーを制限をクリックします。
- API Manager画面の右側ペインのAPIキーテキストボックスの文字列をコピーしておきます。
- 同じペイン内の名前テキストボックスに任意の名前を入力します。
- キーの制限欄の選択肢はHTTP リファラー(ウェブサイト)ラジオボタンをクリックします。
- リファラーテキストボックスにサイトのアドレスを*.(ドメイン名)/*の書式で入力します。
- 保存ボタンをクリックします。
- API Manager画面の左側ペインにあるライブラリをクリックします。
- 同画面の右側ペインからGoogle Maps JavaScript APIをクリックします。
- 同じペイン内の上部にある有効にするをクリックします。
- 再度API Manager画面の左側ペインにあるライブラリをクリックします。
- 同画面の右側ペインからGoogle Maps APIグループの中のその他をクリックします。
- 表示されたライブラリの中からGoogle Maps Geocoding API をクリックします。
- 同じペイン内の上部にある有効にするをクリックします。
ページ内への組み込み
APIキーができましたので、入力画面に組み込んでいきます。- headタグ内に以下の2行を追加します。
上記の1行目は、JQueryのプログラムを外部に接続する場合のものです。<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=(APIキー)"></script>
もちろん予めJQueryのサイトからプログラムをダウンロードしておいて、アプリケーションサーバー内の然るべきフォルダに置いておくこともできます。 - 2行目の(APIキー)部分を、前項の手順07でコピーしておいたAPIキーに置き換えます。
緯度経度取得スクリプトの作成
前項で追加した1行目によって、JQueryを使ったスクリプトを手軽に作成して実行できます。- 住所テキストボックスの値が変更されたら、緯度と経度を取得して、各々のテキストボックスに表示させるスクリプトは以下のようなもの作成し、前項で追加した2行目の次にコピペします。
<script type="text/javascript">
$(document).on('change', 'input[name="f_address"]', function(){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: this.value
},
function(data, status){
if(status == google.maps.GeocoderStatus.OK){
$('input[name="f_lat"]').val(data[0].geometry.location.lat());
$('input[name="f_lng"]').val(data[0].geometry.location.lng());
} else {
alert('緯度経度を調べましたが見つかりませんでした: ' + status);
}
});
});
</script> - 最後に入力画面を開き、住所テキストボックスに任意の住所を入力し、Tabキーを押すと、緯度、経度テキストボックスに値が表示されることを確認します。