Около пятой части всех запросов к Google относятся к службам определения местоположения. Для мобильных устройств это число увеличивается до трети. Их Maps API генерирует около 2 миллиардов карт в день. Google предлагает невероятную коллекцию услуг определения местоположения всем, кто переходит на их сайт, включая указания, информацию, карты и многое другое. Разработчики также могут использовать свою обширную базу данных для создания пользовательских карт и многого другого. Хотя многие из сервисов бесплатны, первым шагом является генерация ключа API, который предоставляется вместе с кредитом в размере 300 долларов США.

Простая карта

Начнем с простой карты. На данный момент единственные решения, которые нужно принять, — это уровень масштабирования (число от 0 до 21, где 0 — это весь земной шар, а 21 — вид отдельного здания) и центральная точка, определяемая координатами широты и долготы.

<div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -90.071478, lng: 29.951052},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

Тег div указывает, где в теле HTML будет отображена карта, функция initMap, создающая карту, вызывается при запуске скрипта и вызове API в Google. Свойства центра и масштабирования объекта карты указывают положение и границы карты. Если координаты широты и долготы неизвестны, может пригодиться API геокодирования. Если все сделано правильно, у нас должна получиться интерактивная карта, которая выглядит примерно так.

Здорово! Но это не особо интересно, так что давайте добавим немного кастомизации. Допустим, мы создаем сайт для компании, которая хочет показать пользователям все местоположения в их районе, сначала мы собираемся сделать запрос к API мест.

Места запроса

Мы собираемся использовать конечную точку nearbysearch для получения местоположений Brother’s Chicken в окрестностях Нового Орлеана. Чтобы сделать такой запрос, требуется несколько параметров, включая key (наш ключ API), location (широта и долгота) и radius (указывается в метрах, максимум 50 000). Мы также используем keyword для возврата результатов, соответствующих «Brother’s Chicken». Мы будем использовать axios для генерации нашего запроса с сервера Express.

Объект ответа содержит немного больше информации, чем мы хотим, каждый результат выглядит так.

{
        "geometry": {
            "location": {
                "lat": 29.9565436,
                "lng": -90.1044093
            },
            "viewport": {
                "northeast": {
                    "lat": 29.95789342989273,
                    "lng": -90.10305947010728
                },
                "southwest": {
                    "lat": 29.95519377010729,
                    "lng": -90.10575912989273
                }
            }
        },
        "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
        "id": "a220b35c24605e04651150bea6299b1ace6cd7ab",
        "name": "Brother's Food Mart",
        "opening_hours": {
            "open_now": true
        },
        "place_id": "ChIJdZM81ZulIIYRjec5ZXbCPoY",
        "plus_code": {
            "compound_code": "XV4W+J6 New Orleans, Louisiana",
            "global_code": "76XFXV4W+J6"
        },
        "rating": 4.1,
        "reference": "ChIJdZM81ZulIIYRjec5ZXbCPoY",
        "scope": "GOOGLE",
        "types": [
            "restaurant",
            "point_of_interest",
            "food",
            "establishment"
        ],
        "vicinity": "New Orleans"
    },

Чтобы сузить круг, мы используем функцию карты, которая возвращает массив координат.

let geo = response.map(loc=>{
return {lat: loc.geometry.location.lat, lng: loc.geometry.location.lng}
})

И теперь мы получаем массив координат, который мы будем использовать для создания пользовательской карты.

[ { lat: 29.9565436, lng: -90.1044093 },
  { lat: 29.9527463, lng: -90.07071909999999 },
  { lat: 29.8944563, lng: -90.01822729999999 },
  { lat: 29.93785, lng: -90.07592299999999 },
  { lat: 29.95149, lng: -90.07025999999999 },
  { lat: 29.8775019, lng: -90.04843249999999 },
  { lat: 30.0063073, lng: -90.2519013 },
  { lat: 29.9970293, lng: -90.161163 },
  { lat: 29.990542, lng: -90.05786959999999 },
  { lat: 29.8532921, lng: -90.10894599999999 },
  { lat: 29.9488105, lng: -90.2324234 },
  { lat: 29.9201635, lng: -90.03392319999999 },
  { lat: 29.9076809, lng: -90.1600689 },
  { lat: 29.945432, lng: -90.03711960000001 },
  { lat: 29.9344245, lng: -90.0806708 },
  { lat: 29.9979549, lng: -90.1800343 },
  { lat: 29.9242826, lng: -90.01818469999999 },
  { lat: 29.962082, lng: -90.02080590000001 },
  { lat: 29.8910133, lng: -90.05855489999999 },
  { lat: 30.0099729, lng: -90.26704439999999 } ]

Обратите внимание, что у нас есть 20 результатов. Это максимальное количество результатов, возвращаемых поиском Google Palace, поскольку в районе Нового Орлеана находится более 20 офисов Brother.

Создание карты

Итак, теперь нам нужно взять эту информацию и отобразить ее в пользовательском интерфейсе. На этом большая часть нашей работы сделана. Мы собираемся включить наши географические точки из запроса API Places и превратить их в маркеры на картах, используя объект конструктора маркеров Google Maps.

В данном случае geo — это массив объектов широты и долготы сверху. Включив эту функцию в функцию initMap() выше, мы должны визуализировать интерактивную карту, которая выглядит следующим образом.

Хотя Google предлагает массу полезных сервисов через свои API, они не единственные такие сервисы. Обязательно ознакомьтесь с Mapbox AP, который основан на Проекте маршрутизирующей машины с открытым исходным кодом. С ними не так просто работать, и они не возвращают столько информации о местоположении, хотя их карты красивы и загружаются немного быстрее, чем у Google.

А теперь иди и возьми жареного цыпленка Brother’s Fried Chicken.