Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

افزودن Google Map با نشانگر بااستفاده از جاوا اسکریپت

مقدمه

این آموزش به شما نشان می‌دهد که چگونه بااستفاده از HTML،‏ CSS، و JavaScript، یک نقشه Google با نشانگر به صفحه وب اضافه کنید. همچنین به شما نشان می‌دهد که چگونه گزینه‌های نقشه را تنظیم کنید و چگونه از جای‌گذاری کنترل برای افزودن برچسب به نقشه استفاده کنید.

در زیر نقشه‌ای را می‌بینید که بااستفاده از این آموزش خواهید ساخت. نشانگر روی اولورو (که به «صخره آیرز» نیز معروف است) در پارک ملی اولورو-کاتا جوتا قرار دارد.

درحال شروع کردن

برای ایجاد نقشه Google با نشانگر در صفحه وب خود، سه مرحله وجود دارد:

دریافت کلید میانای برنامه‌سازی کاربردی
ایجاد صفحه HTML
افزودن نقشه با نشانگر

به مرورگر وب نیاز دارید. مرورگر شناخته‌شده‌ای مثل Google Chrome (توصیه‌شده)، Firefox،‏ Safari، یا Edge را براساس پلاتفرم خود از فهرست مرورگرهای پشتیبانی‌شده انتخاب کنید.

مرحله ۱: دریافت کلید میانای API (کلید میانای برنامه‌سازی کاربردی)

این بخش توضیح می‌دهد که چگونه برنامه خود را بااستفاده از کلید API خودتان برای Maps JavaScript API اصالت‌سنجی کنید.

برای دریافت کلید میانای برنامه‌سازی کاربردی، این مراحل را دنبال کنید:

به کنسول Google Cloud بروید.
پروژه‌ای ایجاد یا انتخاب کنید.
روی ادامه کلیک کنید تا API و سرویس‌های مرتبط فعال شوند.
در صفحه اعتبارنامه، کلید میانای برنامه‌سازی کاربردی را دریافت کنید (و محدودیت‌های کلید میانای برنامه‌سازی کاربردی را تنظیم کنید). توجه: اگر کلید میانای API نامحدود موجود یا کلیدی با محدودیت‌های مرورگر دارید، می‌توانید از آن کلید استفاده کنید.
برای جلوگیری از سرقت سهمیه و ایمن کردن کلید میانای API، استفاده از کلیدهای میانای API را ببینید.
صدور صورت‌حساب را فعال کنید. برای اطلاعات بیشتر، استفاده و صورت‌حساب را ببینید.

وقتی کلید میانای API را دریافت کردید، با کلیک کردن روی «YOUR_API_KEY» آن را به قطعه کد زیر اضافه کنید. برچسب دستورگان bootloader را کپی و جای‌گذاری کنید تا در صفحه وب خودتان استفاده کنید.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

مرحله ۲: ایجاد صفحه HTML

این کد برای صفحه وب HTML پایه است:

<!DOCTYPE html>
<!--
 @license
 Copyright 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>Add a Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "YOUR_API_KEY", v: "weekly"});</script>
  </head>
  <body>

    <!-- The map, centered at Uluru, Australia. -->
    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
    </gmp-map>

  </body>
</html>

این یک صفحه HTML بسیار ساده است که از عنصر gmp-map برای نمایش نقشه در صفحه استفاده می‌کند. نقشه خالی خواهد بود چون هنوز هیچ کد جاوا اسکریپتی اضافه نکرده‌ایم.

درک کردن کد

در این مرحله از مثال، موارد زیر را داریم:

برنامه را بااستفاده از اعلان !DOCTYPE html به‌عنوان HTML5 اعلام کرده است.
«میانای برنامه‌سازی کاربردی جاوا اسکریپت در Maps» بااستفاده از بارگذار خودراه‌انداز بار شد.
عنصر gmp-map برای نگهداری نقشه ایجاد شد.

اعلام کردن برنامه به‌عنوان HTML5

توصیه می‌کنیم DOCTYPE واقعی را در برنامه وب خود اعلام کنید. در مثال‌های اینجا، برنامه‌هایمان را بااستفاده از DOCTYPE HTML5 به‌صورت HTML5 اعلام کرده‌ایم، همان‌طور که در زیر نشان داده شده است:

<!DOCTYPE html>

اکثر مرورگرهای فعلی محتوایی را که با این DOCTYPE اعلام شده است در «حالت استاندارد» ارائه می‌دهند، به این معنی که برنامه شما باید بیشتر با مرورگرهای مختلف سازگار باشد. ‫DOCTYPE همچنین به‌گونه‌ای طراحی شده است که به‌تدریج و به‌طور مناسب تنزل یابد؛ مرورگرهایی که آن را درک نمی‌کنند، آن را نادیده می‌گیرند و از «حالت غیراستاندارد» برای نمایش محتوای خود استفاده می‌کنند.

توجه داشته باشید که برخی‌از CSS که در حالت غیراستاندارد کار می‌کند در حالت استاندارد معتبر نیست. به‌طور خاص، همه اندازه‌های درصدی باید از عناصر بلوک والد به ارث برده شوند، و اگر هرکدام از آن اجداد نتوانند اندازه‌ای را مشخص کنند، فرض می‌شود که اندازه آن‌ها ۰ × ۰ پیکسل است. به همین دلیل، اظهارنامه style زیر را اضافه می‌کنیم:

<style>
  gmp-map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

بار کردن Maps JavaScript API

بارگذار خودراه‌انداز Maps JavaScript API را برای بار کردن آماده می‌کند (تا زمانی‌که importLibrary() فراخوانی نشود، هیچ کتابخانه‌ای بار نمی‌شود).

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

برای دریافت دستورالعمل‌های مربوط به دریافت کلید میانای برنامه‌سازی کاربردی خودتان، به مرحله ۳: دریافت کلید میانای برنامه‌سازی کاربردی مراجعه کنید.

در این مرحله از آموزش، پنجره‌ای خالی ظاهر می‌شود که فقط نوشتار برچسب قالب‌بندی‌نشده را نشان می‌دهد. دلیلش این است که هنوز هیچ کد جاوا اسکریپتی اضافه نکرده‌ایم.

ایجاد عنصر `gmp-map`

برای اینکه نقشه در صفحه وب نمایش داده شود، باید جایی را برای آن رزرو کنیم. معمولاً این کار را با ایجاد عنصر gmp-map و دریافت مرجع این عنصر در مدل شیء سند (DOM) مرورگر انجام می‌دهیم. همچنین می‌توانید از عنصر div برای انجام این کار استفاده کنید (بیشتر بدانید)، اما توصیه می‌شود از عنصر gmp-map استفاده کنید.

کد زیر عنصر gmp-map را تعریف می‌کند و پارامترهای center، zoom، و map-id را تنظیم می‌کند.

<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
</gmp-map>

گزینه‌های center و zoom همیشه الزامی هستند. در کد بالا، ویژگی center به میانای برنامه‌سازی کاربردی می‌گوید که نقشه را کجا متمرکز کند و ویژگی zoom سطح بزرگ‌نمایی نقشه را مشخص می‌کند. بزرگ‌نمایی: ۰ کمترین بزرگ‌نمایی است و کل زمین را نمایش می‌دهد. مقدار بزرگ‌نمایی را بیشتر کنید تا با وضوح بالاتر روی زمین بزرگ‌نمایی کنید.

سطوح بزرگ‌نمایی

ارائه نقشه کل زمین به‌عنوان یک تصویر واحد یا به نقشه بسیار بزرگی نیاز دارد یا به نقشه کوچکی با وضوح بسیار پایین. درنتیجه، تصاویر نقشه در Google Maps و Maps JavaScript API به «کاشی‌های» نقشه و «سطوح بزرگ‌نمایی» تقسیم می‌شوند. در سطوح بزرگ‌نمایی پایین، مجموعه کوچکی از کاشی‌های نقشه منطقه وسیعی را پوشش می‌دهد؛ در سطوح بزرگ‌نمایی بالاتر، کاشی‌ها وضوح بالاتری دارند و منطقه کوچک‌تری را پوشش می‌دهند. فهرست زیر سطح تقریبی جزئیاتی را نشان می‌دهد که می‌توانید انتظار داشته باشید در هر سطح بزرگ‌نمایی ببینید:

‫۱: جهان
۵: خشکی یا قاره
‫۱۰: شهر
‫۱۵: خیابان‌ها
‫۲۰: ساختمان‌ها

سه تصویر زیر همان مکان توکیو را در سطوح بزرگ‌نمایی ۰، ۷، و ۱۸ نشان می‌دهد.

کد زیر CSS را توصیف می‌کند که اندازه عنصر gmp-map را تنظیم می‌کند.

/* Set the size of the gmp-map element that contains the map */
gmp-map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

در کد بالا، عنصر style اندازه gmp-map را تنظیم می‌کند. برای اینکه نقشه قابل‌مشاهده باشد، عرض و ارتفاع را بیشتر از ۰ پیکسل تنظیم کنید. در این مورد، gmp-map روی ارتفاع ۴۰۰ پیکسل و عرض ۱۰۰٪ تنظیم شده است تا در سراسر عرض صفحه وب نمایش داده شود. توصیه می‌شود همیشه سبک‌های ارتفاع و عرض را به‌طور صریح تنظیم کنید.

جانمایی کنترل‌ها

می‌توانید از جای‌گذاری کنترل برای افزودن کنترل‌های فرم HTML به نقشه‌تان استفاده کنید. جایگاه موقعیتی ازپیش‌تعریف‌شده در نقشه است؛ از مشخصه slot برای تنظیم موقعیت موردنیاز برای عنصر استفاده کنید و عناصر را در عنصر gmp-map قرار دهید. قطعه کد زیر افزودن برچسب HTML به گوشه بالا سمت چپ نقشه را نشان می‌دهد.

<!-- The map, centered at Uluru, Australia. -->
<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
  <div id="controls" slot="control-inline-start-block-start">
    <h3>My Google Maps Demo</h3>
  </div>
</gmp-map>

مرحله ۳: افزودن کد جاوا اسکریپت

این بخش به شما نشان می‌دهد که چگونه Maps JavaScript API را در یک صفحه وب بارگیری کنید و چگونه جاوا اسکریپت خود را بنویسید که از API برای افزودن نقشه با نشانگر روی آن استفاده می‌کند.

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js

کد بالا هنگام فراخوانی initMap() کارهای زیر را انجام می‌دهد:

کتابخانه‌های maps و marker را بار می‌کند.
عنصر نقشه را از DOM دریافت می‌کند.
گزینه‌های نقشه اضافی را در نقشه داخلی تنظیم می‌کند.
نشانگری به نقشه اضافه می‌کند.

دریافت شیء نقشه و تنظیم گزینه‌ها

innerMap نمونه‌ای از کلاس Map را نشان می‌دهد. برای تنظیم گزینه‌های نقشه، نمونه innerMap را از عنصر نقشه دریافت کنید و setOptions را فراخوانی کنید. قطعه کد زیر دریافت نمونه innerMap از DOM و سپس فراخوانی setOptions را نشان می‌دهد:

// Get the gmp-map element.
const mapElement = document.querySelector(
  "gmp-map"
) as google.maps.MapElement;

// Get the inner map.
const innerMap = mapElement.innerMap;

// Set map options.
innerMap.setOptions({
  mapTypeControl: false,
});

منتظر بمانید تا نقشه بار شود

هنگام استفاده از عنصر gmp-map، نقشه به‌صورت ناهمگام بار می‌شود. اگر درخواست‌های دیگری در زمان مقداردهی اولیه انجام شود (برای مثال، درخواست موقعیت جغرافیایی یا جزئیات «مکان»)، این امر می‌تواند منجر به شرایط رقابتی شود. برای اطمینان از اینکه کد شما فقط پس‌از بار شدن کامل نقشه اجرا می‌شود، از یک addListenerOnce کنترل‌کننده رویداد غیرفعال در تابع مقداردهی اولیه خود استفاده کنید، همان‌طور که در اینجا نشان داده شده است:

// Do things once the map has loaded.
google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    // Run this code only after the map has loaded.
    console.log("The map is now ready!");
});

با انجام این کار مطمئن می‌شوید که کدتان فقط پس‌از بار شدن نقشه اجرا می‌شود؛ گرداننده فقط یک‌بار درطول چرخه حیات برنامه فعال می‌شود.

نکته‌ای درباره بهینه‌سازی عملکرد داخلی:

برای بهبود سرعت بار کردن صفحه، Maps JavaScript API ممکن است بار کردن محتوای تعاملی را به‌طور داخلی تا زمانی که عنصر یا ظرف به نمای دید نزدیک شود به‌تأخیر بیندازد. این بهینه‌سازی‌های داخلی ممکن است در هر زمانی بدون اطلاع قبلی تغییر کنند. این ویژگی‌ها برای بهبود عملکرد طراحی شده‌اند و نباید به‌عنوان مکانیزمی برای مدیریت صورت‌حساب استفاده شوند. برای اطمینان از اینکه تا زمانی که عنصر قابل‌مشاهده نباشد، صورت‌حساب ایجاد نمی‌شود، ایجاد آن را در کد برنامه خود به تعویق بیندازید.

کد نمونه کامل

کد نمونه کامل را اینجا ببینید:

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
gmp-map {
    height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}style.css

HTML

<html>
    <head>
        <title>Add a Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <!-- The map, centered at Uluru, Australia. -->
        <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
            <div id="controls" slot="control-inline-start-block-start">
                <h3>My Google Maps Demo</h3>
            </div>
        </gmp-map>
    </body>
</html>index.html

درباره نشانگرها بیشتر بدانید:

نکات و عیب‌یابی

درباره دریافت مختصات طول/عرض جغرافیایی، یا تبدیل نشانی به مختصات جغرافیایی بیشتر بدانید.
می‌توانید گزینه‌هایی مثل سبک و ویژگی‌ها را برای سفارشی‌سازی نقشه تغییر دهید. برای کسب اطلاعات بیشتر درباره سفارشی‌سازی نقشه‌ها، راهنماهای سبک‌بندی و ترسیم روی نقشه را بخوانید.
از کنسول ابزارهای توسعه‌دهنده در مرورگر وب خود برای آزمایش و اجرای کدتان، خواندن گزارش‌های خطا، و حل مشکلات کدتان استفاده کنید.
از میان‌برهای صفحه‌کلید زیر برای باز کردن کنسول در Chrome استفاده کنید:
Command+Option+J (در Mac)، یا Control+Shift+J (در Windows).
مراحل زیر را دنبال کنید تا مختصات طول و عرض جغرافیایی مکانی را در Google Maps دریافت کنید.
1. Google Maps را در مرورگر باز کنید.
2. روی مکان دقیقی در نقشه که مختصات آن را می‌خواهید کلیک راست کنید.
3. مختصات طول و عرض جغرافیایی را از منو انتخاب کنید.
بااستفاده از سرویس «زمین‌کدیابی» می‌توانید نشانی را به مختصات عرض جغرافیایی و طول جغرافیایی تبدیل کنید. راهنماهای توسعه‌دهنده اطلاعات دقیقی درباره شروع به کار با سرویس «زمین‌کدیابی» ارائه می‌دهند.

افزودن Google Map با نشانگر بااستفاده از جاوا اسکریپت با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

مقدمه

درحال شروع کردن

مرحله ۱: دریافت کلید میانای API (کلید میانای برنامه‌سازی کاربردی)

مرحله ۲: ایجاد صفحه HTML

درک کردن کد

اعلام کردن برنامه به‌عنوان HTML5

بار کردن Maps JavaScript API

ایجاد عنصر gmp-map

سطوح بزرگ‌نمایی

جانمایی کنترل‌ها

مرحله ۳: افزودن کد جاوا اسکریپت

TypeScript

JavaScript

دریافت شیء نقشه و تنظیم گزینه‌ها

منتظر بمانید تا نقشه بار شود

کد نمونه کامل

TypeScript

JavaScript

CSS

HTML

درباره نشانگرها بیشتر بدانید:

نکات و عیب‌یابی

افزودن Google Map با نشانگر بااستفاده از جاوا اسکریپت

ایجاد عنصر `gmp-map`