使用 HTML 添加带有标记的 Google 地图
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
简介
本教程介绍了如何使用自定义 HTML 元素将带有标记的 Google 地图添加到网页中。以下便是您将在本教程的指导下创建的地图。两个标记分别位于加利福尼亚州的山景城和华盛顿州的西雅图。
开始操作
以下是使用 HTML 创建带有标记的 Google 地图的步骤:
- 获取 API 密钥
- 创建 HTML、CSS 和 JS 网页
- 添加地图
- 添加标记
您需要一个网络浏览器。请根据所用平台从受支持的浏览器列表中选择一个常见的浏览器,例如 Google Chrome(推荐)、Firefox、Safari 或 Edge。
第 1 步:获取 API 密钥
本部分介绍如何使用您的 API 密钥对应用进行身份验证,以便使用 Maps JavaScript API。
请按照下列步骤获取 API 密钥:
前往
Google Cloud 控制台。
创建或选择一个项目。
点击继续,启用 API 和任何相关服务。
在凭据页面上,获取 API 密钥(并设置 API 密钥限制)。注意:如果您已有不受限的 API 密钥或存在浏览器限制的密钥,可以使用相应密钥。
如需防止配额盗用并保护 API 密钥,请参阅使用 API 密钥。
启用结算功能。如需了解详情,请参阅用量和结算。
现在,您可以使用 API 密钥了。
第 2 步:创建 HTML、CSS 和 JS 网页
下方代码可创建一个基本的 HTML 网页:
<html>
<head>
<title>Add a Map with Markers using HTML</title>
<!-- TODO: Add bootstrap script tag. -->
</head>
<body>
<!-- TODO: Add a map with markers. -->
</body>
</html>
若要加载地图,您必须添加一个包含 Maps JavaScript API 引导加载程序的 script
标记,如以下代码段所示(添加您自己的 API 密钥):
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
defer
></script>
剧透提醒:尝试 JSFiddle 上已完成的示例。
第 3 步:添加地图
若要将 Google 地图添加到网页中,请复制 HTML 元素 gmp-map
并将其粘贴到 HTML 网页的 body
中:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>
结果会得到如下地图:
您刚刚创建的地图以圣何塞都市区为中心。
第 4 步:添加标记
如需向地图添加标记,请使用 gmp-advanced-marker
HTML 元素。
复制以下代码段,然后粘贴您在上一步中添加的整个 gmp-map
。
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
上述代码添加了两个标记,并更改了 gmp-map
上的 zoom
和 center
参数,以便更好地显示这些标记。使用高级标记需要地图 ID(可以使用 DEMO_MAP_ID
)。
提示和问题排查
完整示例代码
以下是最终的地图,以及本教程使用的完整示例代码。
<html>
<head>
<title>Add a Map with Markers using HTML</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
defer
></script>
</body>
</html>
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-12。
[null,null,["最后更新时间 (UTC):2025-08-12。"],[[["\u003cp\u003eThis tutorial demonstrates how to add a Google map with markers to a webpage using HTML and the Maps JavaScript API.\u003c/p\u003e\n"],["\u003cp\u003eYou will need to obtain an API key from the Google Cloud console and enable billing for the project.\u003c/p\u003e\n"],["\u003cp\u003eThe tutorial provides code snippets for creating the HTML structure, adding the map, and placing markers at specific locations.\u003c/p\u003e\n"],["\u003cp\u003eCustomization options are available, such as custom styling and using the Geocoding service to convert addresses into coordinates.\u003c/p\u003e\n"]]],[],null,["Introduction\n\nThis tutorial shows you how to add a Google map with a marker to a web page\nusing custom HTML elements. Here is the map you'll create using this\ntutorial. Two markers are positioned, one in Mountain View, CA, and one in\nSeattle, WA.\n\n\nGet started\n\nThese are the steps we'll cover for creating a Google map with a marker using\nHTML:\n\n1. [Get an API key](#key)\n2. [Create HTML, CSS, and JS](#step-2)\n3. [Add a map](#step-3)\n4. [Add a marker](#step-4)\n\nYou need a web browser. Choose a well-known one like Google Chrome\n(recommended), Firefox, Safari or Edge, based on your platform from the\n[list of supported browsers](/maps/documentation/javascript/browsersupport).\n\nStep 1: Get an API key\n\nThis section explains how to authenticate your app to the\nMaps JavaScript API using your own API key.\n\nFollow these steps to get an API key:\n\n1. Go to the\n [Google Cloud console](https://console.cloud.google.com/project/_/google/maps-apis/overview).\n\n2. Create or select a project.\n\n3. Click **Continue** to enable the API and any related services.\n\n4. On the **Credentials** page, get an **API key** (and set the API key\n restrictions). Note: If you have an existing unrestricted API key, or a key\n with browser restrictions, you may use that key.\n\n5. To prevent quota theft and secure your API key, see\n [Using API Keys](https://cloud.google.com/docs/authentication/api-keys).\n\n6. Enable billing. See [Usage and Billing](/maps/documentation/javascript/usage-and-billing)\n for more information.\n\n7. You are now ready to use your API key.\n\nStep 2: Create HTML, CSS, and JS\n\nHere's the code for a basic HTML web page: \n\n```javascript\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eAdd a Map with Markers using HTML\u003c/title\u003e\n\n \u003c!-- TODO: Add bootstrap script tag. --\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!-- TODO: Add a map with markers. --\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn order to load a map, you must add a `script` tag containing the\nbootstrap loader for the Maps JavaScript API, as shown in the\nfollowing snippet (add your own API key): \n\n```javascript\n\u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker\"\n defer\n\u003e\u003c/script\u003e\n```\n\nSpoiler alert: [Try the finished example on JSFiddle](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/web-components-markers/jsfiddle).\n\nStep 3: Add a map\n\nTo add a Google map to the page, copy the `gmp-map` HTML element and paste it\nwithin the `body` of the HTML page: \n\n```javascript\n\u003cgmp-map center=\"37.4220656,-122.0840897\" zoom=\"10\" map-id=\"DEMO_MAP_ID\" style=\"height: 400px\"\u003e\u003c/gmp-map\u003e\n```\n\nThis results in the following map:\n\n\nThe map you just created is centered on the San Jose metropolitan area.\n\nStep 4: Add a marker\n\nTo add a marker to the map, use the `gmp-advanced-marker` HTML element.\nCopy the following snippet, and paste over the entire `gmp-map` you added in the\nprevious step.\n\n\n```html\n\u003cgmp-map\n center=\"43.4142989,-124.2301242\"\n zoom=\"4\"\n map-id=\"DEMO_MAP_ID\"\n style=\"height: 400px\"\n\u003e\n \u003cgmp-advanced-marker\n position=\"37.4220656,-122.0840897\"\n title=\"Mountain View, CA\"\n \u003e\u003c/gmp-advanced-marker\u003e\n \u003cgmp-advanced-marker\n position=\"47.648994,-122.3503845\"\n title=\"Seattle, WA\"\n \u003e\u003c/gmp-advanced-marker\u003e\n\u003c/gmp-map\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/web-components-markers/docs/index.html#L17-L31\n```\n\n\u003cbr /\u003e\n\nThe preceding code adds two markers and changes the `zoom` and `center`\nparameters on the `gmp-map` to better show those markers. A map ID is required\nto use Advanced Markers (`DEMO_MAP_ID` is fine to use).\n\nTips and troubleshooting\n\n- You can customize the map with custom [styling](/maps/documentation/javascript/cloud-customization).\n- Use the **Developer Tools Console** in your web browser to test and run your code, read error reports and solve problems with your code.\n- Use the following keyboard shortcuts to open the console in Chrome: \n Command+Option+J (on Mac), or Control+Shift+J (on Windows).\n- Follow the steps below to get the latitude and\n longitude coordinates for a location on Google Maps.\n\n 1. Open Google Maps in a browser.\n 2. Right-click the exact location on the map for which you require coordinates.\n 3. Select **What's here** from the context menu that appears. The map displays a card at the bottom of the screen. Find the latitude and longitude coordinates in the last row of the card.\n- You can convert an address into latitude and longitude coordinates using the\n Geocoding service. The developer guides provide detailed information on\n [getting started with the Geocoding service](/maps/documentation/javascript/geocoding#GetStarted).\n\nFull example code\n\nFollowing is the final map, and full example code that was used for this\ntutorial.\n\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eAdd a Map with Markers using HTML\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cgmp-map\n center=\"43.4142989,-124.2301242\"\n zoom=\"4\"\n map-id=\"DEMO_MAP_ID\"\n style=\"height: 400px\"\n \u003e\n \u003cgmp-advanced-marker\n position=\"37.4220656,-122.0840897\"\n title=\"Mountain View, CA\"\n \u003e\u003c/gmp-advanced-marker\u003e\n \u003cgmp-advanced-marker\n position=\"47.648994,-122.3503845\"\n title=\"Seattle, WA\"\n \u003e\u003c/gmp-advanced-marker\u003e\n \u003c/gmp-map\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/web-components-markers/docs/index.html#L8-L46\n```\n\n\u003cbr /\u003e"]]