地圖嵌入網頁- Google My Map


Posted by mijouhsieh on 2023-06-29

Google My Map

透過 Google My Map 搜尋店家加入清單,
...選單 / 嵌入我的網站 / 顯示 <iframe src="...." width="..." height="..."> <iframe>
可調整寬高,但呈現在網頁上的黑色navigation好像無法去除。
地圖樣式只有9種選項。
快速方便但無法客制化調整。

Laptop-Friendly Cafes in London: Map
googlemap-file.png
googleMyMap-code.png


https://www.mapbox.com/install/

Install the Maps SDK: Web / CDN / Include the GL JS files / Add the map to your site

Add the map to your site

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11'
  });
</script>

'YOUR_MAPBOX_ACCESS_TOKEN' => 試用 Default public token










Related Posts

Airflow 動手玩:(五)Airflow 設定檔

Airflow 動手玩:(五)Airflow 設定檔

Command Line note

Command Line note

[#007] 151. Reverse Words in a String

[#007] 151. Reverse Words in a String


Comments