API Google Адресов HTML и JavaScript

Первое, что вам нужно сделать, это получить ключ API для вашего проекта на вкладке учетных данных на веб-сайте Google Places. Обязательно добавьте ограничения к ключу API, чтобы с вас не взималась чрезмерная плата, если кто-то другой получил ваш ключ API и использовал его. Следующий шаг — выбрать, какой API лучше всего подходит для вашего проекта. Для меня это был Map JavaScript API. Следующим шагом после того, как вы найдете правильный API, является добавление в код тега script со ссылкой и вашим ключом API.

<script
      src="https://maps.googleapis.com/maps/api/js?key={APIkey}&callback=initMap&libraries=places&v=weekly"
      defer
    ></script>

Следующее, что вам нужно сделать, это скопировать и вставить код в ваш файл кода JavaScript. Мое следующее предложение — потратить пару минут и выяснить, что делает каждая функция в коде. Когда вы почувствуете, что хорошо разбираетесь в коде, начните вносить небольшие изменения в код и посмотрите, что произойдет. Например, в коде, который я использовал, я получал место с помощью функции findPlaceFromQuery(), а в конце я использовал функцию с именем nearSearch(). Это небольшое изменение заставило меня показать на карте более одного маркера, что было желательным изменением.

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

function centerMapOnUserLocation(position) {
  //getting user location
  userLocation = new google.maps.LatLng(
    position.coords.latitude,
    position.coords.longitude
  );

  infowindow = new google.maps.InfoWindow();
  map = new google.maps.Map(document.getElementById("map"), {
    center: userLocation,
    zoom: 15,
  });
  drawLocaationMarkers();
}

Первая часть функции — получение местоположения от пользователя с разрешения пользователя, а вторая часть — создание карты и помещение местоположения пользователя в центр карты. Функция маркеров drawLocaation
находит места для размещения на карте и размещает булавки в этих местах.

function drawLocaationMarkers() {
  const request = {
    //finding stores in a 10 kilometer radius
    location: userLocation,
    radius: '10000',
    type: ["supermarket"],
  }

  service = new google.maps.places.PlacesService(map);
  console.log(service);
  service.nearbySearch(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK && results) {
      for (let i = 0; i < results.length; i++) {
        +createMarker(results[i]);
      }

      map.setCenter(results[0].geometry.location);
    }
  });
}