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

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

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

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

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

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

  • اگر صفحه وب شما از بارگذاری اسکریپت پویا استفاده می‌کند، کتابخانه نشانگرها را اضافه کنید و 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>

با استفاده از 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 را نشان می دهد.

TypeScript 

// 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

CSS 

/* 
 * 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 

<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

Sample را امتحان کنید

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

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

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

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

نمونه کامل کد منبع را ببینید

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

TypeScript 

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

CSS 

/* 
 * 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 

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

Sample را امتحان کنید

مراحل بعدی