Notice: Trying to access array offset on value of type bool in /home/himariweb/www/wp/wp-content/themes/luxeritas/inc/json-ld.php on line 114

GoogleMapで住所から軽度緯度を求める

2018年10月17日

GoogleMapApiで住所、地名から軽度緯度を求めるにはGeocoderを使うと取得できる
サンプルはほとんどgoogleから

サンプルコード

<input id="address">
<input id="submit" type="submit" type="button">

<div id="map"></div>

<style>
#map {
    height: 500px;
    width: 100%;
}
</style>

<script>
function initMap() {
  var tokyo = {lat: 35.681167, lng: 139.767052}
  var map = new google.maps.Map(document.getElementById('map'),{
    center: tokyo,  // 地図の中心を指定
    zoom: 19 // 地図のズームを指定
  });
  var marker = new google.maps.Marker({
    position: tokyo,
    map: map,
    title: "東京",
  });

  var geocoder = new google.maps.Geocoder();
  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder,map);
  });
}

function geocodeAddress(geocoder,map){
  var address = document.getElementById('address').value;

  // 住所を渡してコールバックで結果を取得
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === 'OK') {
      // latlng情報取得
      var latlng = results[0].geometry.location;
      map.setCenter(latlng);
      var marker = new google.maps.Marker({
        map: map,
        position: latlng
      });

      // おまけ:情報ウィンドウをマーカーに追加
      var infowindow = new google.maps.InfoWindow();
      // toString()で軽度緯度表示できる
      infowindow.setContent(address + "<br>(Lat, Lng) = " + latlng.toString());
      marker.addListener('click', function() {
        infowindow.open(map, marker)
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
</script>

参考

Geocoding Service