読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 地名や住所から緯度、経度を求める

この記事では以下の画面を作成する。

f:id:kosumoro:20160929233526j:plain

地名や住所から緯度、経度を求める。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Practice JavaScript</title>
</head>
<body>
  <div>
    <input id="address" class="address">
    
    <button id="search" class="search">Search!</button>
  </div>
  
  <script src="./scripts/script.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBAVKOgsqfbsINYt2qjoLMziacVp6N8zBY&callback=initMap"></script>
</body>
</html>

入力用のインプットエリアと決定用のボタンを設置し、google maps api用のライブラリを読み込んでいるだけ。

scripts/script.js

function initMap() {
  var addressField = document.getElementById("address");
  var searchButton = document.getElementById("search");
  
  searchButton.addEventListener("click", function() {
    getLocationFromAddress(addressField.value);
  });
  
  function getLocationFromAddress(address) {
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode({"address": address}, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        alert(
            results[0].formatted_address + "\n" +
            results[0].geometry.location.lat() + ", " +
            results[0].geometry.location.lng()
        );
      }
      else {
        alert("Failed to get location: " + status);
      }
    });
  }
}

geocoder クラス( new google.maps.Geocoder() で初期化する)の geocode メソッドを使用する。

引数にはリクエスト用オブジェクトとコールバック関数を渡す。

コールバック関数内に緯度、経度算出後の処理を書いていく。今回はアラートで出力しているだけ。