با استفاده از HTML یک نقشه گوگل با نشانگرها اضافه کنید
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
مقدمه
این آموزش به شما نشان می دهد که چگونه با استفاده از عناصر HTML سفارشی، یک نقشه گوگل را با یک نشانگر به یک صفحه وب اضافه کنید. در اینجا نقشه ای است که با استفاده از این آموزش ایجاد خواهید کرد. دو نشانگر قرار دارند، یکی در Mountain View، CA، و دیگری در Seattle، WA.
شروع کنید
این مراحلی است که برای ایجاد نقشه گوگل با نشانگر با استفاده از HTML پوشش خواهیم داد:
شما به یک مرورگر وب نیاز دارید. بر اساس پلتفرم خود از لیست مرورگرهای پشتیبانی شده ، یکی از شناخته شده‌ها مانند Google Chrome (توصیه‌شده)، فایرفاکس، سافاری یا Edge را انتخاب کنید.
مرحله 1: یک کلید API دریافت کنید
این بخش نحوه احراز هویت برنامه خود را در Maps JavaScript API با استفاده از کلید API خود توضیح می دهد.
برای فعال کردن API و هر سرویس مرتبط، روی Continue کلیک کنید.
در صفحه اعتبارنامه ، یک کلید API دریافت کنید (و محدودیت های کلید API را تنظیم کنید). توجه: اگر یک کلید API نامحدود یا کلیدی با محدودیت های مرورگر دارید، می توانید از آن کلید استفاده کنید.
برای بارگیری نقشه، باید یک تگ script حاوی بارکننده بوت استرپ برای Maps JavaScript API اضافه کنید، همانطور که در قطعه زیر نشان داده شده است (کلید API خود را اضافه کنید):
نقشه ای که شما ایجاد کردید در مرکز شهر سن خوزه قرار دارد.
مرحله 4: یک نشانگر اضافه کنید
برای افزودن نشانگر به نقشه، از عنصر HTML gmp-advanced-marker استفاده کنید. قطعه زیر را کپی کنید و روی کل gmp-map که در مرحله قبل اضافه کردید، جای‌گذاری کنید.
کد قبلی دو نشانگر اضافه می کند و پارامترهای zoom و center را در gmp-map تغییر می دهد تا آن نشانگرها را بهتر نشان دهد. برای استفاده از نشانگرهای پیشرفته، شناسه نقشه لازم است (استفاده از DEMO_MAP_ID خوب است).
از Developer Tools Console در مرورگر وب خود برای آزمایش و اجرای کد، خواندن گزارش های خطا و حل مشکلات کد خود استفاده کنید.
برای باز کردن کنسول در کروم از میانبرهای صفحه کلید زیر استفاده کنید: Command+Option+J (در مک)، یا Control+Shift+J (در ویندوز).
مراحل زیر را برای دریافت مختصات طول و عرض جغرافیایی برای یک مکان در Google Maps دنبال کنید.
Google Maps را در مرورگر باز کنید.
روی مکان دقیقی که برای آن مختصات نیاز دارید کلیک راست کنید.
از منوی زمینه ای که ظاهر می شود، What's here را انتخاب کنید. نقشه یک کارت را در پایین صفحه نمایش می دهد. مختصات طول و عرض جغرافیایی را در ردیف آخر کارت بیابید.
با استفاده از سرویس Geocoding می توانید یک آدرس را به مختصات طول و عرض جغرافیایی تبدیل کنید. راهنماهای توسعه دهنده اطلاعات دقیقی را در مورد شروع به کار با سرویس Geocoding ارائه می دهند.
کد نمونه کامل
در ادامه نقشه نهایی و کد نمونه کاملی که برای این آموزش استفاده شده است آورده شده است.
<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>
تاریخ آخرین بهروزرسانی 2025-09-04 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-09-04 بهوقت ساعت هماهنگ جهانی."],[[["\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"]]
