Как создать несколько простых проектов с помощью API Google Карт
Как создать несколько простых проектов с помощью API Google Карт

Как создать несколько простых проектов с помощью API Google Карт

  • 178 просмотров
  • 2 минута чтения
В этой статье вы узнаете, как создавать интерактивные карты, оптимизировать маршруты и анализировать данные о местоположении с помощью API Google Карт на платформе GCP.
админ
  • 27 октября 2025 г.
0 Акции
0
0
0
0
0
Акции
0
0
0
0

Проект 1: Веб-сервис «Поиск магазинов» с поиском местоположения + автозаполнением

Приложение: Показать все филиалы/представительства на карте, быстрый поиск ближайших адресов/местоположений.
API: Maps JavaScript API + Места (автозаполнение/подробности). Google для разработчиков

Простой скелет (HTML + JS)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Store Locator</title>
<style>#map{height:70vh} .panel{padding:8px}</style>
<script>
let map, marker, autocomplete, sessionToken;

async function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6892, lng: 51.3890 }, zoom: 12, mapId: "YOUR_MAP_ID"
});

// Autocomplete با Session Token برای صورت‌حساب درست
sessionToken = new google.maps.places.AutocompleteSessionToken();
const input = document.getElementById("search");
autocomplete = new google.maps.places.Autocomplete(input, { fields: ["place_id","geometry","name"] });
autocomplete.setOptions({ sessionToken });

autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) return;
const loc = place.geometry.location;
map.panTo(loc); map.setZoom(15);
if (marker) marker.setMap(null);
marker = new google.maps.Marker({ position: loc, map, title: place.name });
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
</head>
<body>
<div class="panel">
<input id="search" placeholder="کافه / فروشگاه نزدیک من..." size="40" />
</div>
<div id="map"></div>
</body>
</html>

  • Важный момент: Токен сеанса В Autocomplete корректно группируются поисковые запросы в сеанс и биллинг. При использовании готового виджета управление сеансами происходит автоматически; при использовании необработанного сервиса необходимо AutocompleteSessionToken Сборка (как указано выше). Google для разработчиков+2Google для разработчиков+2

  • Если вы используете облачный стиль, mapId Установите его в соответствии с идентификатором вашей карты. Google для разработчиков+1

  • Ограничить ключ. (HTTP-рефереры + ограничение API для Places/Maps JS).

Проект 2: «Многоостановочный маршрут с оптимизированным порядком остановок»

Приложение: Легкая курьерская доставка/логистика, маркетинговые продажи, быстрая маршрутизация с учетом оптимального порядка остановок.
API: API маршрутов (computeRoutes С optimizeWaypointOrder). Google для разработчиков+1

Пример запроса (cURL – REST)

curl -X POST "https://routes.googleapis.com/directions/v2:computeRoutes" \
-H "Content-Type: application/json" \
-H "X-Goog-Api-Key: $API_KEY" \
-H "X-Goog-FieldMask: routes.optimizedIntermediateWaypointIndex,routes.distanceMeters,routes.duration" \
-d '{
"origin": {"address": "Tehran"},
"destination": {"address": "Tehran"},
"travelMode": "DRIVE",
"optimizeWaypointOrder": true,
"intermediates": [
{"address": "Karaj"},
{"address": "Qom"},
{"address": "Varamin"},
{"address": "Ekbatan, Tehran"}
]
}'

  • Ответ включает в себя routes.optimizedIntermediateWaypointIndex что дает оптимальный порядок промежуточных остановок. Google для разработчиков

  • Для матрицы времени/расстояния с несколькими пунктами отправления и назначения вы также можете использовать computeRouteMatrix Использование (в том же наборе API маршрутов) Google для разработчиков

  • Снова Ограничьте ключ IP-адресом сервера. Если запрос сделан из бэкэнда. Google для разработчиков

Проект 3: «Проверка адреса на лицевой и оборотной стороне заказа»

Приложение: Оформление заказов в интернет-магазине, предотвращение ошибок при возврате/доставке посылок.
API: API проверки адресов. Google для разработчиков+1

Простой пример (cURL – REST)

curl -X POST "https://addressvalidation.googleapis.com/v1:validateAddress?key=$API_KEY" \
-H "Content-Type: application/json" \
-d '{
"address": { "regionCode": "IR", "locality": "Tehran", "addressLines": ["Valiasr St, No. 123"] }
}'

  • Результат включает качество/стандартизацию компонентов адреса и наилучший геокод; вы можете предложить пользователю улучшения. Google для разработчиков

Пример бэкенда Python (официальный клиент)

from google.maps import addressvalidation_v1 as av
client = av.AddressValidationClient()
req = av.ValidateAddressRequest(
address=av.PostalAddress(region_code="IR", locality="Tehran", address_lines=["Valiasr St, No. 123"])
)
resp = client.validate_address(request=req)
print(resp.result.verdict, resp.result.address.formatted_address)

  • Существует официальная библиотека Python для проверки адресов. Google Cloud

(Необязательно) Стиль облака и идентификатор карты

Если вам нужен фирменный пользовательский интерфейс, в консольном режиме Стиль облачной карты Создайте, получите идентификатор карты и установите его в клиенте (поддерживаются как Web JS, так и Static/Android/iOS). Вы можете обновить стиль из консоли, не изменяя код. Для быстрого вдохновения, Мастер стиля Видеть.

В этой статье:
,,
Автор поста:
Следовать
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая статья
Следующая статья
Вам также может понравиться