Узнать город по координатам Google maps

711
21 октября 2017, 19:22

Имею на сайте карту с поиском, Возможно ли как то вытаскивать отдельно только имя города в котором отметились координаты на карте? Пробовал вот так

  var places = searchBox.getPlaces();
  siti = places[0].address_components[3].long_name;

Если вводить примерно такой адрес "Тверская улица, 4, Москва, Россия", то срабатывает, но если адрес что то типо того "Московская область, Мытищинский район, МКАД 84 км, ТПЗ "Алтуфьево", владение 3, стр. 1"

places[0].address_components

такого свойства нет. Вот собственно моя карта с поиском.

 function init() { 
   var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: { 
       lat: 12.9715987, 
       lng: 77.59456269999998 
     }, 
     zoom: 12 
   }); 
 
 
   var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); 
   map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input')); 
   google.maps.event.addListener(searchBox, 'places_changed', function() { 
     searchBox.set('map', null); 
 
 
     var places = searchBox.getPlaces(); 
 
     var bounds = new google.maps.LatLngBounds(); 
     var i, place; 
     for (i = 0; place = places[i]; i++) { 
       (function(place) { 
         var marker = new google.maps.Marker({ 
 
           position: place.geometry.location 
         }); 
         marker.bindTo('map', searchBox, 'map'); 
         google.maps.event.addListener(marker, 'map_changed', function() { 
           if (!this.getMap()) { 
             this.unbindAll(); 
           } 
         }); 
         bounds.extend(place.geometry.location); 
 
 
       }(place)); 
 
     } 
     map.fitBounds(bounds); 
     searchBox.set('map', map); 
     map.setZoom(Math.min(map.getZoom(),12)); 
 
   }); 
 } 
 google.maps.event.addDomListener(window, 'load', init);
html, 
body, 
#map-canvas { 
  margin: 0; 
  padding: 0; 
  height: 100%; 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
<div class="container" id="map-canvas" style="height:300px;"></div>

Answer 1

В вашем вопросе вы спрашиваете:

Если вводить примерно такой адрес "Тверская улица, 4, Москва, Россия", то срабатывает, но если адрес что то типо того "Московская область, Мытищинский район, МКАД 84 км, ТПЗ "Алтуфьево", владение 3, стр. 1", такого свойства нет.

Я проверил этот адрес с инструментом Latitude and Longitude of a Point of iTouchMap. В результате я получил координаты Тойота Моторс:

Примените данный код из документации Гугл Places search box: 

<!DOCTYPE html> 
<html> 
  <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Places Searchbox</title> 
    <style> 
      /* Always set the map height explicitly to define the size of the div 
       * element that contains the map. */ 
      #map { 
        height: 100%; 
      } 
      /* Optional: Makes the sample page fill the window. */ 
      html, body { 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
      .controls { 
        margin-top: 10px; 
        border: 1px solid transparent; 
        border-radius: 2px 0 0 2px; 
        box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        height: 32px; 
        outline: none; 
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
      } 
 
      #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: 300px; 
      } 
 
      #pac-input:focus { 
        border-color: #4d90fe; 
      } 
 
      .pac-container { 
        font-family: Roboto; 
      } 
 
      #type-selector { 
        color: #fff; 
        background-color: #4d90fe; 
        padding: 5px 11px 0px 11px; 
      } 
 
      #type-selector label { 
        font-family: Roboto; 
        font-size: 13px; 
        font-weight: 300; 
      } 
      #target { 
        width: 345px; 
      } 
    </style> 
  </head> 
  <body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
    <script> 
      // 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(); 
 
          if (places.length == 0) { 
            return; 
          } 
 
          // 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); 
        }); 
      } 
 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" 
         async defer></script> 
  </body> 
</html>

Если вы внесёте в поисковое поле фразу: "Московская область, Мытищинский район, Тойота Мотор", то карта выдаст вам это место. Данная фраза является локализацией для данного и конкретного предприятия Тойота Моторс. Возможно, вам следует отказаться от указания точных почтовых адресов и указывать в содержании веб-страниц фразы, которые локализуют конкретные предприятия, и которые будут соответствовать ожиданиям пользователей, ищущих предприятие по его названию и/или по бренду, а не по почтовому адресу (это мало кто знает).

READ ALSO
Угадай число JS. Не могу понять куда копать
javascript

Угадай число JS. Не могу понять куда копать

Задача такова:

 607
Что за свойства prototype и constructor?
javascript

Что за свойства prototype и constructor?

Наблюдения я буду приводить на классе - конструкторе Object, так как отдельно о этих свойствах ничего не нашелНа Современный учебник Javascript есть...

 364
Как собрать все файлы js в один на gulp? [требует правки]
javascript

Как собрать все файлы js в один на gulp? [требует правки]

Хочу собрать мои скрипты и подключаемые библиотеки в один js файл с помощью gulpПодскажите

 233
JavaScript - пинг сервера
javascript

JavaScript - пинг сервера

Как на javascript получить пинг определенного сервера в браузере? Пробовал через XMLHttpRequest - выдает ошибку 'No-Acces-Allow-Origin' или 'No HTTPS Connection'

 514