افزودن نشانگر به نقشه

پلاتفرم را انتخاب کنید: Android iOS JavaScript

از نشانگرها برای نمایش مکان‌های تکی روی نقشه استفاده کنید. این صفحه نشان می‌دهد که چگونه می‌توان به‌صورت برنامه‌ریزی‌شده و بااستفاده از عناصر HTML سفارشی، نشانگر به نقشه اضافه کرد.

• افزودن نشانگر بااستفاده از عناصر HTML سفارشی
• افزودن نشانگر به‌صورت برنامه‌نویسی

بار کردن کتابخانه نشانگر پیشرفته

برای افزودن نشانگر پیشرفته به نقشه، کد نقشه شما باید کتابخانه marker را بار کند که کلاس‌های AdvancedMarkerElement و PinElement را ارائه می‌دهد. این موضوع هم درصورتی‌که برنامه‌تان نشانگرها را به‌صورت برنامه‌نویسی‌شده بار کند و هم درصورتی‌که از HTML استفاده کند صدق می‌کند. برای انجام این کار، برنامه‌تان ابتدا باید میانای برنامه‌سازی کاربردی جاوا اسکریپت در Maps را بار کند.

روشی که برای بار کردن کتابخانه‌ها استفاده می‌کنید به نحوه بار کردن Maps JavaScript API توسط صفحه وب شما بستگی دارد.

• اگر صفحه وب شما از بارگیری پویای دستورگان استفاده می‌کند، کتابخانه نشانگرها را اضافه کنید و AdvancedMarkerElement (و به‌صورت اختیاری PinElement) را در زمان اجرا وارد کنید، همان‌طور که در اینجا نشان داده شده است.

  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

• اگر صفحه وب شما از برچسب بار کردن مستقیم اسکریپت استفاده می‌کند، libraries=marker را به اسکریپت بار کردن اضافه کنید، همان‌طور که در قطعه کد زیر نشان داده شده است. با انجام این کار، هم AdvancedMarkerElement و هم PinElement وارد خواهد شد.

  <script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
  defer
  ></script>

تنظیم شناسه نقشه

برای استفاده از «نشانگرهای پیشرفته» به شناسه نقشه نیاز است (می‌توان از DEMO_MAP_ID استفاده کرد). شناسه نقشه را در گزینه‌های نقشه تنظیم کنید، همان‌طور که در اینجا نشان داده شده است:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

اگر از مؤلفه‌های وب استفاده می‌کنید، می‌توانید شناسه نقشه را مستقیماً روی عنصر gmp-map تنظیم کنید:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

درباره شناسه‌های نقشه بیشتر بدانید.

افزودن نشانگر بااستفاده از عناصر HTML سفارشی

توجه: برخی چارچوب‌ها مانند React به‌طور خودکار گره‌های DOM را درطول رندر کردن اضافه و حذف می‌کنند و ممکن است با افزودن و حذف گره‌های DOM مربوط به نشانگرها به‌طور مستقل ناسازگار باشند (مثلاً هنگام استفاده از سازنده‌ها و ویژگی‌های Maps JavaScript API). در چنین چارچوب‌هایی، اگر قصد دارید از کد یا کتابخانه‌های دیگر مدیریت نشانگر استفاده کنید، ممکن است لازم باشد نشانگرها را صرفاً بااستفاده از نحو جاوا اسکریپت اضافه و حذف کنید (مثلاً new AdvancedMarker({map})).

برای افزودن نشانگر پیشرفته بااستفاده از عناصر HTML سفارشی، عنصر فرزند gmp-advanced-marker را به عنصر gmp-map اضافه کنید. قطعه کد زیر افزودن نشانگرها به صفحه وب را نشان می‌دهد:

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>
index.html

مشاهده کد منبع نمونه کامل

این نمونه ایجاد نقشه با نشانگرها را بااستفاده از HTML نشان می‌دهد.

TypeScript

// This example adds a map with markers, using web components.
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

JavaScript

// This example adds a map with markers, using web components.
index.js

CSS

/* Note: This CSS file is intentionally blank. */
style.css

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>
index.html

افزودن نشانگر به‌صورت برنامه‌نویسی‌شده

برای افزودن نشانگر پیشرفته به نقشه به‌صورت برنامه‌نویسی، یک AdvancedMarkerElement جدید ایجاد کنید و آن را به نقشه اضافه کنید، همان‌طور که در این مثال نشان داده شده است:

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.js

افزودن عناصر فقط هنگام استفاده از مؤلفه‌های وب امکان‌پذیر است. اگر از عنصر div برای بار کردن نقشه استفاده می‌شود، از ویژگی map برای مرتبط کردن نشانگر با نمونه نقشه استفاده کنید، همان‌طور که در اینجا نشان داده شده است:

myMap = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
});

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

برداشتن نشانگر

برای برداشتن نشانگر از نقشه، marker.map یا marker.position را روی null تنظیم کنید.

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

مشاهده کد منبع نمونه کامل

این مثال نحوه افزودن نشانگر به نقشه را نشان می‌دهد.

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
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>Default Advanced Marker</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>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

مراحل بعدی

• سفارشی‌سازی نشانگر پایه