マメな人はバカであれ

バカなりに考えて、バカなりに行動します

技術的なことや、趣味的なことや、私生活的なことを書いてきます

JavascriptsでGoogleMapsを使って住所から座標を取得する

web

お久しぶりです

以前の投稿からだいぶ経ってしまいました。
以前の投稿↓

【カメラ】Fujifilmのカスタム設定2回目（撮影編）【X-Pro2】 - マメな人はバカであれ

最近は仕事も忙しいのも相まって自宅にWindowsタワーPCを購入して、
APEX LegendsとかMinecraftなどゲームや動画制作などを進めていて
ブログの更新をできていませんでした。
そのうち、こういった趣味もブログの記事にしていきたいですね。

www.ea.com

minecraft.net

本題に戻って

いわゆるジオコーディングするっていうことです。

GoogleMapsAPIを使って住所から座標を取得するということですが、
本来、Javascripts(以降JS)を使用したGoogleMapsAPIはマップの表示に
緯度経度を入力する必要がありました。
（実際この方が正確なのでこっちの方が良いと思いますが…）

しかし、場合によっては緯度経度の座標ではなく、住所などから座標を取得したい。 というような要望がありそうですよね。実際過去にそんな経験がありました…

実際のコードは以下です。

$(function(){
    var $gmap = $("#js-gmap");
    var gmapLat;
    var gmapLng;
    var gmapAddress = $gmap.attr("data-address");

  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'address': gmapAddress}, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {
      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();
      // 小数点第六位以下を四捨五入した値を緯度経度にセット、小数点以下の値が第六位に満たない場合は0埋め
      gmapLat = (Math.round(lat * 1000000) / 1000000).toFixed(6);
      gmapLng = (Math.round(lng * 1000000) / 1000000).toFixed(6);
    }

  initMap(gmapLat, gmapLng)
  });
});

/* -----------------------------------------------
 * GoogleMap init
 * ----------------------------------------------- */

function initMap($gmapLat, $gmapLng) {
    var gmapLat = Number($gmapLat);
    var gmapLng = Number($gmapLng);

    var gmap_pos = {lat: gmapLat, lng: gmapLng};
    var gmap = new google.maps.Map(document.getElementById('js-gmap'), {
        zoom: 16,
        center: gmap_pos,
        disableDefaultUI: true
    });
    var gmap_marker = new google.maps.Marker({
        position: gmap_pos,
        map: gmap
    });

}

これのどこで住所から座標に変えているのかわからない人はもう少し頑張って読んでみてください。

住所から座標に変換しまジオコーディング

念のため、その箇所を少し説明すると

    var $gmap = $("#js-gmap");
    var gmapLat;
    var gmapLng;
    var gmapAddress = $gmap.attr("data-address");

  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'address': gmapAddress}, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {
      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();
      gmapLat = (Math.round(lat * 1000000) / 1000000).toFixed(6);
      gmapLng = (Math.round(lng * 1000000) / 1000000).toFixed(6);
    }
  initMap(gmapLat, gmapLng)
  });

上記のコード箇所がその部分ですね。
gmapAddressというのが今回住所を登録されているものですね。
ここでattrで取得しているのには意味はありませんが、
htmlから住所を変更するだけで座標が変えられるなら楽ですよねって。それだけ。

Geocoderを使う

ここで取得したgmapAddressはどう使うのか。

google.maps.Geocoder()と呼ばれるGoogleMapsAPIで用意されているのがあるのでこれを使いましょう。 developers.google.com 読める人は読んで、読めない人は「そういうもんだ」で進みましょう。
理解を深めるのは時間がある時でいいんです。

このgeocoder.geocode({'address': gmapAddress}で住所を読み込んでくれます。 次の以下のif文で読み込めたか条件を受け取ります。 変な住所文言じゃない限りはちゃんと読み込んでくれるはずです。
これが通れば住所から座標への変換が完了しています。

function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {

座標を整理しましょ

座標に変換が完了したからといってもこれで終わりにはできません。
緯度経度の座標に変換されたデータを整理します。

      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();
      // 小数点第六位以下を四捨五入した値を緯度経度にセット、小数点以下の値が第六位に満たない場合は0埋め
      gmapLat = (Math.round(lat * 1000000) / 1000000).toFixed(6);
      gmapLng = (Math.round(lng * 1000000) / 1000000).toFixed(6);

データをそれぞれ変数などに入れていきます。
取得した緯度経度のデータの小数点を整理したり、
色々ここで処理してから変数に登録してあげるのがいい感じです。
他にも引数のresultsに色々データがあるので、console.log()とかで色々みてください。

あとはinitMap(gmapLat, gmapLng)であらかじめ用意していたGoogleMapを生成する関数に引数で座標データを渡してあげればGoogleMapを表示できますね。

この辺りは皆さんのやりやすいやり方がいいと思います。

最近のGoogleMapsは有料？

最近はどのwebサービスもセキュリティやプライバシーなどに厳しく取り締まりし始めていますね。
TwitterやFacebookも同様で、Googleもその筆頭ですね。

実はGoogleMapsAPIもGoogleMapsPlatformという名前に代わり、
2018年6月11日からサービスの移行が始まりました。

今までGoogleMapAPIでも無料プランと有料プランがありました。
基本的な機能は無料プランで行えていましたが、その機能の一部もGoogleMapsPlatformからは有料対象になりかねないものになってます。

と、有料有料といっても全てにお金を払わなければいけないわけではないです。
有料になるのは、アクセス数が基準となるようです。
例えば、ルートを表示する機能を使用した場合には40,000アクセスまでは無料。
それ以降は有料になりますよ。といった感じです。
詳しい料金体制は以下のURLから。
cloud.google.com

とある機能を使って、その機能がある一定数以上の呼び出しを受けるとお金を払ってもらいますよ、というものですね。
GoogleもGoogleMapの作成更新にお金もかかるはずですから、この有料体制も仕方ないかもしれませんね…

ある一定数以上の呼び出しを受けるとお金を払うと説明しましたが、
もちろんその一定数以下であれば無料のままです。
「無料なら今までと変わらないのでは？」と思いますが、
ここでめんどくさいのが一定数超過した際の対応です。
無料とはいえど使用して一定数超過した際にどう対応すればいいのかという問題ですが、
「無料であってもクレジットカードの登録を必須」になりました。

これ、意外とめんどくさい仕様なんですよね。
クライアントにこれを登録してとか色々手配して設定してトークンもらってとか…ほんとめんd
でもクレジットカードを登録さえしてしまえば、今までと同じようにGoogleMapsAPIを使用することができます。
ただ、サイトがバズってアクセス数がめっちゃ増えたりすると一定数超過することもあります。

毎月200ドル分の使用は無料(2019/03/01現在)とはいっても、
ここら辺だけでも注意した方がいいですね。

最後

最後のGoogleMapsPlatformの説明で長くなっちゃいましたが、
こういったサービスは便利ですが今後の動きに気をつけないといけませんね。

住所から座標を取得する方法も実は呼び出しの使用量が決まっています。
（最大40,000まで無料）
こういうのも調べてから使用しないといけませんね。

webも自由にできなくて少し肩身狭いですね…