اعلامیه: سبک نقشه پایه جدید به زودی به پلتفرم نقشه های گوگل می آید. این به‌روزرسانی برای استایل نقشه شامل یک پالت رنگی پیش‌فرض جدید، پین‌های مدرن شده و بهبودهایی در تجربه‌ها و قابلیت استفاده از نقشه است. همه سبک‌های نقشه به‌طور خودکار در مارس 2025 به‌روزرسانی می‌شوند. برای اطلاعات بیشتر در مورد در دسترس بودن و نحوه انتخاب زودتر، به سبک نقشه جدید برای پلتفرم Google Maps مراجعه کنید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

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

با استفاده از 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 (بتا) یک نشانگر اضافه کنید

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

برای افزودن یک نشانگر پیشرفته با استفاده از 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 را امتحان کنید

JSFiddle.net Google Cloud Shell

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

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

JSFiddle.net Google Cloud Shell

مراحل بعدی

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

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

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

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

روشی که برای بارگیری کتابخانه ها استفاده می کنید بستگی به نحوه بارگیری صفحه وب شما 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 (بتا) یک نشانگر اضافه کنید

<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 را امتحان کنید

JSFiddle.net Google Cloud Shell

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

  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 را امتحان کنید

JSFiddle.net Google Cloud Shell

مراحل بعدی

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