تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
مقدمة
يوضّح لك هذا الدليل التوجيهي كيفية إضافة خريطة Google مع علامة إلى صفحة ويب
باستخدام عناصر HTML مخصّصة. في ما يلي الخريطة التي ستنشئها باستخدام هذا البرنامج التعليمي. تم وضع علامتَين، إحداهما في ماونتن فيو، كاليفورنيا، والأخرى في سياتل، واشنطن.
البدء
في ما يلي الخطوات التي سنتناولها لإنشاء خريطة Google تتضمّن علامة باستخدام HTML:
يجب أن يتوفّر لديك متصفّح ويب. اختَر متصفّحًا معروفًا، مثل Google Chrome (ننصحك به) أو Firefox أو Safari أو Edge، استنادًا إلى نظام التشغيل الذي تستخدمه من قائمة المتصفّحات المتوافقة.
الخطوة 1: الحصول على مفتاح واجهة برمجة التطبيقات
يوضّح هذا القسم كيفية مصادقة تطبيقك على Maps JavaScript API باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.
اتّبِع الخطوات التالية للحصول على مفتاح واجهة برمجة التطبيقات:
انقر على متابعة لتفعيل واجهة برمجة التطبيقات وأي خدمات ذات صلة.
في صفحة بيانات الاعتماد، احصل على مفتاح واجهة برمجة التطبيقات (واضبط قيود مفتاح واجهة برمجة التطبيقات). ملاحظة: إذا كان لديك مفتاح حالي غير مقيّد أو مفتاح يتضمّن قيودًا على المتصفّح، يمكنك استخدام هذا المفتاح.
لتحميل خريطة، عليك إضافة علامة script تحتوي على أداة تحميل التمهيد لواجهة برمجة تطبيقات JavaScript الخاصة بخرائط Google، كما هو موضّح في المقتطف التالي (أضِف مفتاح واجهة برمجة التطبيقات الخاص بك):
يضيف الرمز السابق علامتَين ويغيّر المَعلمتَين zoom وcenter
في gmp-map لعرض هاتين العلامتَين بشكل أفضل. يجب توفير رقم تعريف خريطة
لاستخدام "محدّدات المواقع المتقدّمة" (يمكن استخدام DEMO_MAP_ID).
استخدِم وحدة تحكّم أدوات المطوّرين في متصفّح الويب لاختبار الرمز وتشغيله، وقراءة تقارير الأخطاء وحلّ المشاكل المتعلّقة بالرمز.
استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
Command+Option+J (على جهاز Mac) أو Control+Shift+J (على جهاز Windows).
اتّبِع الخطوات التالية للحصول على إحداثيات خط العرض وخط الطول لموقع جغرافي على "خرائط Google".
افتح "خرائط Google" في متصفّح.
انقر بزر الماوس الأيمن على الموقع الجغرافي الدقيق الذي تريد الحصول على إحداثياته على الخريطة.
انقر على ما هو موجود هنا؟ من قائمة السياق التي تظهر.
تعرض الخريطة بطاقة في أسفل الشاشة. ابحث عن إحداثيات خط العرض وخط الطول في الصف الأخير من البطاقة.
يمكنك تحويل عنوان إلى إحداثيات خطوط الطول والعرض باستخدام خدمة الترميز الجغرافي. تقدّم أدلة المطوّرين معلومات مفصّلة حول
كيفية بدء استخدام خدمة الترميز الجغرافي.
مثال كامل على الرمز
في ما يلي الخريطة النهائية والرمز الكامل للمثال الذي تم استخدامه في هذا البرنامج التعليمي.
<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-08-12 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-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"]]
