یک نشانگر به نقشه اضافه کنید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

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

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

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

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

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

    const { AdvancedMarkerElement } = 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',
});

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

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

برای افزودن یک نشانگر پیشرفته با استفاده از عناصر HTML سفارشی، یک عنصر فرزند gmp-advanced-marker به عنصر 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>
index.html

کد منبع کامل مثال را ببینید

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

تایپ اسکریپت 

// This example adds a map with markers, using web components.
async function initMap(): Promise<void> {
    console.log('Maps JavaScript API loaded.');
}
declare global {
    interface Window {
      initMap: () => void;
    }
  }
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;
index.js

سی‌اس‌اس 

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

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

gmp-map {
  height: 400px;
}

style.css

اچ‌تی‌ام‌ال 

<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>
index.html

نمونه را امتحان کنید

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

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

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

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

کد منبع کامل مثال را ببینید

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

تایپ اسکریپت 

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

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

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

جاوا اسکریپت 

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById('map'), {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });
    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();
index.js

سی‌اس‌اس 

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

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

style.css

اچ‌تی‌ام‌ال 

<html>
  <head>
    <title>Default Advanced Marker</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

نمونه را امتحان کنید

مراحل بعدی