تمت ترجمة هذه الصفحة بواسطة 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 مخصّصة

لإضافة علامة متقدّمة باستخدام عناصر 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

JavaScript

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

تجربة عيّنة

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

JavaScript

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

تجربة عيّنة

JSFiddle.net

الخطوات التالية

تخصيص العلامات الأساسية

إضافة علامة إلى خريطة تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تحميل مكتبة العلامات المتقدّمة

إضافة علامة باستخدام عناصر HTML مخصّصة

الاطّلاع على رمز المصدر الكامل للمثال

TypeScript

JavaScript

CSS

HTML

تجربة عيّنة

إضافة علامة برمجيًا

الاطّلاع على رمز المصدر الكامل للمثال

TypeScript

JavaScript

CSS

HTML

تجربة عيّنة

الخطوات التالية

إضافة علامة إلى خريطة