GoogleはGoogleマップの検索APIで可能であるならば、あなたが自分自身の言語の都市名を検索するときに、誰かが英語で常に都市名を返すために、私に言うことはできますか？検索API

Question

をマップ

だからあなたはロシア語で都市名を入力言うことができますが、あなたは英語の言語で都市名を返すようにしたい

Answer 1

私が正しくあなたのユースケースを理解していれば、私はこの回避策を使用してなんとかだと思います。たとえば、「サンクトペテルブルク」（ロシアの都市）を探しています。その都市のロシアの名前はGoogle Translateあたりとして「Санкт-Петербург」になります。 Google Maps Javascript API Places search boxを使用して

、あなたは変数場所の値をログに記録することができます。これで、「places_changed」というイベントが発生すると、返された結果が表示されるようになりました。

ここではサンプルの結果です：

"result" : { 
     "address_components" : [ 
     { 
      "long_name" : "Saint Petersburg", 
      "short_name" : "Saint Petersburg", 
      "types" : [ "administrative_area_level_1", "political" ] 
     }, 
     { 
      "long_name" : "Saint Petersburg", 
      "short_name" : "Saint Petersburg", 
      "types" : [ "administrative_area_level_2", "political" ] 
     }, 
     { 
      "long_name" : "Russia", 
      "short_name" : "RU", 
      "types" : [ "country", "political" ] 
     } 
     ], 
     "adr_address" : "\u003cspan class=\"region\"\u003eSaint Petersburg\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eRussia\u003c/span\u003e", 
     "formatted_address" : "Saint Petersburg, Russia" 
... 
} 

は、あなたがこれらのプロパティに気づくでしょう：「address_components」と「formatted_address」は英語であるアドレスを持っています。

あなたの検索ボックスのアドレスが英語ではない場合は、address_componentsのキー/値を解析するか、formatted_addressを解析してsearchboxの値として設定して変更することができます。

サンプル実装：以下

document.getElementById('pac-input').value = places[0].formatted_address; 

の作業のデモ：

 // This example adds a search box to a map, using the Google Place Autocomplete 
 
     // feature. People can enter geographical searches. The search box will return a 
 
     // pick list containing a mix of places and predicted search terms. 
 

 
     // This example requires the Places library. Include the libraries=places 
 
     // parameter when you first load the API. For example: 
 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
 

 
     function initAutocomplete() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -33.8688, lng: 151.2195}, 
 
      zoom: 13, 
 
      mapTypeId: 'roadmap' 
 
     }); 
 

 
     // Create the search box and link it to the UI element. 
 
     var input = document.getElementById('pac-input'); 
 
     var searchBox = new google.maps.places.SearchBox(input); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
     // Bias the SearchBox results towards current map's viewport. 
 
     map.addListener('bounds_changed', function() { 
 
      searchBox.setBounds(map.getBounds()); 
 
     }); 
 

 
     var markers = []; 
 
     // Listen for the event fired when the user selects a prediction and retrieve 
 
     // more details for that place. 
 
     searchBox.addListener('places_changed', function() { 
 
      var places = searchBox.getPlaces(); 
 
      console.log(places); 
 
      if (places.length == 0) { 
 
      return; 
 
      } 
 
      document.getElementById('pac-input').value = places[0].formatted_address; 
 
      // Clear out the old markers. 
 
      markers.forEach(function(marker) { 
 
      marker.setMap(null); 
 
      }); 
 
      markers = []; 
 

 
      // For each place, get the icon, name and location. 
 
      var bounds = new google.maps.LatLngBounds(); 
 
      places.forEach(function(place) { 
 
      if (!place.geometry) { 
 
       console.log("Returned place contains no geometry"); 
 
       return; 
 
      } 
 
      var icon = { 
 
       url: place.icon, 
 
       size: new google.maps.Size(71, 71), 
 
       origin: new google.maps.Point(0, 0), 
 
       anchor: new google.maps.Point(17, 34), 
 
       scaledSize: new google.maps.Size(25, 25) 
 
      }; 
 

 
      // Create a marker for each place. 
 
      markers.push(new google.maps.Marker({ 
 
       map: map, 
 
       icon: icon, 
 
       title: place.name, 
 
       position: place.geometry.location 
 
      })); 
 

 
      if (place.geometry.viewport) { 
 
       // Only geocodes have viewport. 
 
       bounds.union(place.geometry.viewport); 
 
      } else { 
 
       bounds.extend(place.geometry.location); 
 
      } 
 
      }); 
 
      map.fitBounds(bounds); 
 
     }); 
 
     }

#map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #description { 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 300; 
 
     } 
 

 
     #infowindow-content .title { 
 
     font-weight: bold; 
 
     } 
 

 
     #infowindow-content { 
 
     display: none; 
 
     } 
 

 
     #map #infowindow-content { 
 
     display: inline; 
 
     } 
 

 
     .pac-card { 
 
     margin: 10px 10px 0 0; 
 
     border-radius: 2px 0 0 2px; 
 
     box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     outline: none; 
 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
     background-color: #fff; 
 
     font-family: Roboto; 
 
     } 
 

 
     #pac-container { 
 
     padding-bottom: 12px; 
 
     margin-right: 12px; 
 
     } 
 

 
     .pac-controls { 
 
     display: inline-block; 
 
     padding: 5px 11px; 
 
     } 
 

 
     .pac-controls label { 
 
     font-family: Roboto; 
 
     font-size: 13px; 
 
     font-weight: 300; 
 
     } 
 

 
     #pac-input { 
 
     background-color: #fff; 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 300; 
 
     margin-left: 12px; 
 
     padding: 0 11px 0 13px; 
 
     text-overflow: ellipsis; 
 
     width: 400px; 
 
     } 
 

 
     #pac-input:focus { 
 
     border-color: #4d90fe; 
 
     } 
 

 
     #title { 
 
     color: #fff; 
 
     background-color: #4d90fe; 
 
     font-size: 25px; 
 
     font-weight: 500; 
 
     padding: 6px 12px; 
 
     } 
 
     #target { 
 
     width: 345px; 
 
     }

<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
<div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&language=en&callback=initAutocomplete" 
 
     async defer></script>

そして、それはそれです。あなたのプロジェクトに幸せなコーディングと良いことを。