JavaScriptで住所から経度緯度を取得する

2014/06/27 2014/07/02

やりたかった事はformに住所を入れてsubmitする際に、javascriptで経度緯度を取得してtype=hiddenのフォームに値を入れたかった。

下記ソースでいける。

function getLatLng () { //住所から経度緯度取得
 var address = $('#address').val();
 var geocoder = new google.maps.Geocoder();

 geocoder.geocode({
 address: address
 }, function( results, status ){
 if( status == google.maps.GeocoderStatus.OK ){
 $('#x').val(results[0].geometry.location.lat());
 $('#y').val(results[0].geometry.location.lng());
 validateForm();
 } else {
 alert('住所が正常に取得できませんでした。');
 return false;
 }
 });
}

function getLatLng () { //住所から経度緯度取得

var address = $('#address').val();

var geocoder = new google.maps.Geocoder();

geocoder.geocode({

address: address

}, function( results, status ){

if( status == google.maps.GeocoderStatus.OK ){

$('#x').val(results[0].geometry.location.lat());

$('#y').val(results[0].geometry.location.lng());

validateForm();

} else {

alert('住所が正常に取得できませんでした。');

return false;

}

});

}

あとはPHPで受け取ってMySQLとかに突っ込むなりなんなりすると良い。

google map apiとPHPを組み合わせて複数マーカーとウィンドウを連携させる

↑↑と組み合わせて使うと、フォームで入力した地図情報をMapで表示させるとかが簡単に作られる。

- JavaScript

: 画像をドラッグ&ドロップでアップロード

■2015/04/15追記以下記事の方が新しくて詳しい。 http://tai ...

: JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、年月日からすぐUNIXタイムスタンプを出した ...

: テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムでプレビューする機能が必要となり、教 ...

: javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に ...

: JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を行っているものがあり、使いそうなので ...

: マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

: javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

: jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な処理を行えそうな点があったので ...

: jQueryで年月日と時間のピッカー(datetimepicker)

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

: ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの要望があって色々あった ...

PREV: pdfからjpg/jpegへ出来るだけ劣化させずに変換
NEXT: Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

JavaScriptで住所から経度緯度を取得する

関連記事