JavaScript Rails

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

2018年10月20日

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です。

Pocket
LinkedIn にシェア

-JavaScript, Rails

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.