GoogleMapsでクリックした市の名前を取得する

Question

JavaScriptでGoogleMaps APIを使用して、マップ上でクリックした都市の名前（および場所）を取得しようとしています。

まず、exampleで説明したようにPointOfInterest Event機能を使用することはできましたが、都市ではplaceIdが必須ではありません。

第二に、私は逆ジオコーディング・メカニズムを使用しようとしたが、場所の完全なアドレスを取得するためにhereを説明し、そしてここから、都市（地域）の名前を抽出します。

this.map.addListener('click', (event) => { 
    this.geocoder.geocode({ 
     location: event.latLng, 
    }, (results, status) => { 
     if(status === 'OK') 
     { 
      if(results && results.length) 
      { 
       const addressResult = results[0]; 

       if(addressResult.address_components) 
       { 
        addressResult.address_components.forEach((component) => { 
         if(component.types.includes('locality')) 
         { 
          console.log(component.long_name); 
         } 
        }); 
       } 
      } 
     } 
    }); 
}); 

この方法は私を与えましたそれはジオコーダから返されたアドレスに表示されて、私はまだ都市の名前を取得していますenにマップのロケールを設定するにもかかわらず

• ：かなり良い結果がしかし、それはまた、いくつかの問題を示しました。 は、例えば、私はジュネーブ代わりのジュネーブ（ジュネーブのフランス語の名前）を得た、私はAをクリックミュンヘン代わりの

• を ミュンヘン（ミュンヘンのドイツ語名）を得ました都市をクリックした場所が別の地域に属していると、別の都市があることがあります。

クリックした都市の名前を取得するためのアドバイスは非常に高く評価されます。

Answer 1

逆ジオコーディングを実行すると、サービスは異なるタイプの結果を返します。最初は一般的に最寄りの番地ですが、その後は近所、POI、地方、行政区域、国などの他の結果が表示されます。

コードでは、最初の結果（最寄りの番地）を選択して都市名を取得します。この場合、ジオコーディングサービスは、Maps JavaScript APIの初期化で指定した言語ではなく、ローカル言語の通りや地方の名前を返します。あなたはこのブログ記事では、このポリシーについて読むことができます。政治的なエンティティの場合

https://maps-apis.googleblog.com/2014/11/localization-of-street-addresses-in.html

をこのルールが適用されていないので、あなたがあなたのJavaScript APIの初期化で指定した言語でタイプの局所性や行政区域のアイテムを取得します。

ローカリティの名前を英語で取得するには、タイプlocalityで結果をフィルタリングし、そのアドレスコンポーネントを読み取って地域名を取得する必要があります。

ローカリティを英語で取得するようにコードを少し修正しましたが、変数filtered_arrayには注意が必要です。私はこれが役に立てば幸い

var map; 
 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: {lat: 47.295077, lng: 9.211874}, 
 
     zoom: 8 
 
    }); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    map.addListener('click', (event) => { 
 
     geocoder.geocode({ 
 
     location: event.latLng, 
 
     }, (results, status) => { 
 
     if(status === 'OK') { 
 
      if(results && results.length) { 
 
       var filtered_array = results.filter(result => result.types.includes("locality")); 
 
       var addressResult = filtered_array.length ? filtered_array[0]: results[0]; 
 

 
       if(addressResult.address_components) { 
 
        addressResult.address_components.forEach((component) => { 
 
         if(component.types.includes('locality')) { 
 
          console.log(component.long_name); 
 
         } 
 
        }); 
 
       } 
 
      } 
 
     } 
 
    }); 
 
    }); 
 
}

#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&language=en&callback=initMap" 
 
    async defer></script>

！