最简单的 Google Maps 嵌入方式 | 专案实作

工具有许多种,不过随着专案大小与需求不同,搭配适合的实作方式才能达到最佳效益,常见的 Google Maps 优缺点比较看这里。此次的需求只要在地图上呈现座标地点,因此选择使用 Google Maps Embed API,做法最简单,网页呈现的地图可以缩放、查看地标资讯。

申请金钥

使用地图 API 都需要先申请一组金钥,过程虽然需要填写信用卡资料,根据不同 API 的请求方式收费也会不同
https://ithelp.ithome.com.tw/upload/images/20220105/20144231suVkgs9Eyp.png

担心的话也可以在 Google Platform 上面查看到使用次数和费用报表。
https://ithelp.ithome.com.tw/upload/images/20220105/201442315OXSfnaZyk.png

使用方式

仅需要在网页上嵌入 iframe 的网页程序码就可以完成了,根据选择的地图模式,可以加上个别的参数设定,此范例为搜寻模式。

<iframe loading="lazy" src="https://www.google.com/maps/embed/v1/place?key=金钥&q=%27%27&center=纬度,经度&zoom=15"></iframe>

常用参数

  • q 必带参数 想搜寻的条件
    例如: in+Seattle or near+98033 (地标附近)

  • center 地图中心点位置
    例如: 37.4218,-122.0840

  • zoom 预设可见范围大小
    范围:0(全世界)-21(地标本体)

  • maptype 地图模式
    两种选择:roadmap (预设道路模式) or satellite (卫星模式)

参考来源:
https://developers.google.com/maps/documentation/embed/embedding-map
https://developers.google.com/maps/billing/gmp-billing?hl=zh-tw


<<:  Mikrotik RouterOS从入门到实战系列-Mikrotik入门第十课

>>:  2021法遵科技与电脑稽核专题竞赛-贺云科大、逢甲、北商大、中正、致理科大、亚洲科大等学校队伍获奖,培育智慧法遵与AI稽核人才迈向国际~

iOS Developer Learning Flutter. Lesson26 Biometric

生物辨识使用local_auth Today Preview 1. 安装好後第一步首先还是加权限 i...

[Day15]PHP Class 类别02

PHP Class 类别 1. class属性 类的变量成员叫做“属性”,或者叫“字段”、“特徵”,...

Day-18 EditText

EditText为提供使用者输入之元件, 而其中包括许多属性提供不同之用途, 下面列举出EditTe...

[D09] OpenCV 应用范围

我们现在已经知道 OpenCV 可以拿来处理影像,这样的成效又适用在什麽领域? 或是能对生活有什麽帮...