現在地を取得する。railsで動かすけど jsとgoogleを使う。

railsで現在位置を取得すための方法を書き残しておこうと思います。googleのapiと、JavaScriptを使います。rubyは使いません。下記のように、まずは、googleのapiを使えるようにしておいてください。黒で隠してあるのはapiです。

latitudeとlongitudeと、このapiキーを使って、getでcurlをします。そうすると、現在位置が取得できます。latitudeとlongitudeは、普通にJavaScriptとモダンなブラウザで実行します。下記のような感じで、許可すると、現在位置のlatitudeとlongitudeが取れます。ちなみに下記はfirefox

んで、許可してボタンを押すと、

下記のような感じでgoogleのapiが現在位置を取ってきてくれます。アプリ本体は、railsですよ。下記はjsでconsoleした結果。

実装

/app/assets/javascripts/application.jsに下記のように書きます。AIz…….はapiのキーを入力してください。

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        alert("Geolocation is not supported by this browser.");
    }
}

function showPosition(position) {

$.ajax({
  type: 'GET',
  url: `https://maps.googleapis.com/maps/api/geocode/json?latlng=${position.coords.latitude},${position.coords.longitude}&sensor=true&key=AIz.......&language=en`,
}).then(function(response){
  console.log(response);
})

}

んで、viewに下記のように入力

<button onclick="getLocation()">取得!!!</button>

これで、okです。

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

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