search

mrAkito / SolutionDev

0 stars 0 forks source link

Maps Embed API #9

Open mrAkito opened 10 months ago

mrAkito commented 10 months ago

概要

URLについて

ex) https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

指定可能箇所

MAP_MODE(google transrate:2023/12/6) place: ランドマーク、ビジネス、地理的特徴、町など、特定の場所または住所にマップ ピンを表示します。 view: マーカーや道案内のない地図を返します。 directions: 地図上の 2 つ以上の指定された地点間の経路、距離および移動時間を表示します。 streetview: 指定された場所からのインタラクティブなパノラマ ビューを表示します。 search: 表示されている地図領域全体の検索結果を示します。

YOUR_API_KEY(google transrate:2023/12/6) APIを有効化設定した時に生成したAPIキーを挿入する

PARAMETERS(google transrate:2023/12/6)(必須のみ記述)

MAP_MODE=place q:マップマーカーの位置を定義します。

MAP_MODE=view center:マップビューの中心を定義します。

MAP_MODE=directions origin:ルート案内を表示する開始点を定義します。 destination:ルートの終点を定義します。

MAP_MODE=streetview 必須パラメータなし

MAP_MODE=search q:in+Seattleまたは などの地理的制限を含めることができますnear+98033。

mrAkito commented 10 months ago

Embed API

mrAkito commented 10 months ago

API利用の手順の概要

mrAkito commented 10 months ago

Go言語でのMaps Embed API利用

htmlにマップが表示されるが、拡大、縮小ボタンを押された際のAPI呼び出しは別サーバのAPIを叩く

golangソースコード

package main

import (
    "html/template"
    "net/http"
)

type TemplateData struct {
    MapURL string
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        tmpl := template.Must(template.ParseFiles("map.html"))
        data := TemplateData{
            MapURL: "https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Space+Needle,Seattle+WA",
        }
        tmpl.Execute(w, data)
    })

    http.ListenAndServe(":8080", nil)
}

フロント側ソースコード

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
</head>
<body>
    <iframe
      width="600"
      height="450"
      frameborder="0" style="border:0"
      src="{{.MapURL}}" allowfullscreen>
    </iframe>
</body>
</html>