Как установить дефолтные точки на гугл карте api?

Чтобы установить дефолтные точки на карту Google Maps с помощью API React, вам потребуется следовать нескольким шагам.

1. Установите пакет @react-google-maps/api, который предоставляет компоненты для работы с Google Maps API в приложении React. Выполните следующую команду в терминале вашего проекта:

npm install @react-google-maps/api

2. Создайте компонент, который будет содержать карту Google Maps. Импортируйте необходимые компоненты:

import { GoogleMap, Marker } from '@react-google-maps/api';

3. Внутри компонента определите необходимые параметры для карты, включая начальные координаты и уровень масштабирования:

const mapContainerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: 51.5074,
  lng: -0.1278
};

const zoom = 10;

4. Определите массив точек, которые вы хотите отобразить на карте. Каждая точка будет иметь свои координаты:

const markers = [
  { lat: 51.5074, lng: -0.1278 },
  { lat: 51.5189, lng: -0.0864 },
  // Другие точки
];

5. Внутри компонента отобразите карту Google Maps с помощью компонента GoogleMap. Укажите параметры карты, включая center и zoom. Используйте компонент Marker, чтобы отобразить каждую точку на карте:

<GoogleMap
  mapContainerStyle={mapContainerStyle}
  center={center}
  zoom={zoom}
>
  {markers.map((marker, index) => (
    <Marker
      key={index}
      position={marker}
    />
  ))}
</GoogleMap>

6. Возможно, потребуется добавить ключ API в компонент GoogleMap, чтобы использовать Google Maps API. Вы можете получить ключ API, следуя инструкциям на официальном сайте Google Maps.

<GoogleMap
  mapContainerStyle={mapContainerStyle}
  center={center}
  zoom={zoom}
  apiKey="Ваш ключ API"
>
  {markers.map((marker, index) => (
    <Marker
      key={index}
      position={marker}
    />
  ))}
</GoogleMap>

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