Google Maps API を使って簡単なプロジェクトを構築する方法
Google Maps API を使って簡単なプロジェクトを構築する方法

Google Maps API を使って簡単なプロジェクトを構築する方法

  • 178 ビュー
  • 2分の読み物
この記事では、GCP 上の Google Maps API を使用してインタラクティブ マップを作成し、ルートを最適化し、位置データを分析する方法を学びます。.
管理者
  • 2025年10月27日
0 株式
0
0
0
0
0
株式
0
0
0
0

プロジェクト 1: 場所検索 + オートコンプリート機能を備えた Web「店舗検索」

応用： 地図上にすべての支店/担当者を表示し、近くの住所/場所をすばやく検索します。.
API: Maps JavaScript API + Places (オートコンプリート/詳細)。. 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>

  • 重要な点: セッショントークン オートコンプリートでは、検索をセッションと課金にグループ化するのが正しい方法です。レディウィジェットを使用する場合はセッション管理は自動的に行われますが、Rawサービスを使用する場合は、 オートコンプリートセッショントークン ビルドします（上記のとおり）。. Google 開発者向け+2Google 開発者向け+2

  • クラウドスタイルを使用する場合は、 マップID マップ ID に設定します。. Google 開発者向け+1

  • キーを制限します。 (HTTP リファラー + Places/Maps JS の API 制限)。.

プロジェクト2：「停車順序を最適化したマルチストップルート」«

応用： 軽量宅配便/物流、マーケティング販売、最適な停車順序を考慮した高速ルーティング。.
API: ルートAPI（ルート計算 と ウェイポイント順序を最適化する). 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"}
]
}'

  • 答えには以下が含まれます ルート.最適化された中間ウェイポイントインデックス これにより、中間停止の最適な順序が示されます。. Google 開発者向け

  • 複数出発地複数目的地の時間/距離マトリックスでは、以下も使用できます。 ルート行列の計算 使用（同じルート 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クラウド

（オプション）クラウドスタイルとマップID

ブランド化されたUIが必要な場合は、コンソールで クラウドベースのマップスタイル マップIDを作成し、取得してクライアントに設定します（Web JSと静的/Android/iOSの両方に対応）。コードを変更せずに、コンソールからスタイルを更新できます。簡単なヒントとして、 スタイリングウィザード 見る。.

この記事の内容:
,,
投稿者:
フォローする
コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
次の記事
あなたも気に入るかもしれない