Google지도 검색 API

Question

영어로 도시 이름을 항상 반환하려면 자신의 언어로 도시 이름을 검색 할 때 Google지도 검색 API에서 가능하면 누군가 말해 줄 수 있습니까?

그래서 당신은 러시아어에 도시 이름을 입력 말할 수 있지만, 당신은 내가 사용 사례를 이해하면 영어

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"와 "형식이 지정된"영어에 주소를 가지고 있습니다.

검색 창에 주소가 영어가 아닌 것이 염려되는 경우 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>

그리고 그것 뿐이다. 해피 코딩과 프로젝트에 대한 좋은 반응.