إضافة "خرائط Google" إلى صفحة ويب

يمكنك إضافة خريطة Google إلى صفحة ويب باستخدام رموز HTML وCSS وJavaScript. توضّح هذه الصفحة طريقتَين لإضافة خريطة إلى صفحة ويب: باستخدام عنصر HTML المخصّص gmp-map، وباستخدام عنصر div.

نظرة عامة

لتحميل خريطة، يجب أن تنفّذ صفحة الويب الإجراءات التالية:

  • تحميل Maps JavaScript API باستخدام أداة تحميل bootstrap هذا هو المكان الذي يتم فيه تمرير مفتاح واجهة برمجة التطبيقات، ويمكن إضافته إلى ملفات المصدر بتنسيق HTML أو JavaScript.
  • أضِف الخريطة إلى صفحة HTML، وأضِف أنماط CSS اللازمة.
  • حمِّل مكتبة maps وأعِد ضبط الخريطة.

إضافة خريطة باستخدام عنصر gmp-map

العنصر gmp-map هو عنصر HTML مخصّص تم إنشاؤه باستخدام مكوّنات الويب. لإضافة خريطة إلى صفحة ويب باستخدام عنصر gmp-map، اتّبِع الخطوات التالية.

  1. في صفحة HTML، أضِف عنصر script يحتوي على عملية الإعداد الأوّلي التي تم ضبطها باستخدام مفتاح واجهة برمجة التطبيقات وأي خيارات أخرى. في مثال bootstrap التالي، تم حذف المَعلمة callback لأنّها غير مطلوبة.

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer>
</script>

  2. في صفحة HTML، أضِف عنصر gmp-map. حدِّد إحداثيات خطوط الطول والعرض center، وقيمة التكبير/التصغير zoom. في هذا المثال، تم أيضًا تحديد سمة النمط height.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

مثال كامل على الرمز البرمجي

<html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></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&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

إضافة خريطة باستخدام عنصر div وJavaScript

لإضافة خريطة إلى صفحة ويب باستخدام عنصر div، اتّبِع الخطوات التالية.

  1. في صفحة HTML، أضِف عنصر script يحتوي على أداة تحميل bootstrap تم ضبطها باستخدام مفتاح واجهة برمجة التطبيقات وأي خيارات أخرى. بدلاً من ذلك، يمكنك إضافة رمز أداة تحميل Bootstrap مباشرةً إلى ملف TypeScript أو JavaScript، بدون علامات script.

    <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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

  2. في صفحة HTML، أضِف عنصر div لاحتواء الخريطة.

    <div id="map"></div>

  3. في CSS، اضبط ارتفاع الخريطة على %100.

    #map {
  height: 100%;
}

  4. في ملف JavaScript، أنشئ دالة لتحميل مكتبة maps وتهيئة الخريطة. حدِّد إحداثيات خط العرض وخط الطول لـ center، ومستوى التكبير أو التصغير الذي سيتم استخدامه لـ zoom.

    let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();
    index.js

مثال كامل على الرمز البرمجي

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

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

تجربة عيّنة