إضافة "خريطة Google" باستخدام علامة إلى موقعك الإلكتروني

المقدّمة

يوضح لك هذا البرنامج التعليمي كيفية إضافة خريطة Google بسيطة باستخدام علامة إلى صفحة ويب. يناسب الأشخاص ذوي المعرفة المبتدئين أو المتوسطين في HTML وCSS، ومعرفة قليلة بJavaScript. للحصول على دليل متقدم حول إنشاء الخرائط، اقرأ دليل المطوّر.

يوجد أدناه الخريطة التي ستنشئها باستخدام هذا البرنامج التعليمي. يتم وضع العلامة في أولورو (المعروفة أيضًا باسم صخرة أيرز) في المنتزه الوطني أولورو كاتا تجوتا.


TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

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>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <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

تجربة النموذج

البدء

هناك ثلاث خطوات لإنشاء خريطة Google باستخدام علامة على صفحة الويب:

  1. إنشاء صفحة HTML
  2. إضافة خريطة باستخدام محدِّد
  3. الحصول على مفتاح واجهة برمجة التطبيقات

يجب أن يكون لديك متصفح ويب. عليك اختيار متصفّح معروف مثل Google Chrome (ننصح به) أو Firefox أو Safari أو Edge، حسب نظامك الأساسي، وذلك من قائمة المتصفّحات المتوافقة.

الخطوة 1: إنشاء صفحة HTML

في ما يلي رمز صفحة ويب HTML أساسي:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <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

لاحظ أن هذه صفحة أساسية للغاية تحتوي على مستوى عنوان ثالث (h3) وعنصر div واحد. يمكنك إضافة أي محتوى تريده إلى صفحة الويب.

فهم الرمز

تنشئ التعليمة البرمجية أدناه صفحة HTML تتكون من رأس ونص. 

<html>
 <head>
 </head>
 <body>
 </body>
</html>

يمكنك إضافة عنوان من المستوى الثالث أعلى الخريطة باستخدام الكود أدناه.

<h3>My Google Maps Demo</h3>

يحدد الرمز أدناه منطقة من الصفحة لخريطة Google الخاصة بك.

<!--The div element for the map -->
<div id="map"></div>

في هذه المرحلة من البرنامج التعليمي، تظهر div ككتلة رمادية فقط، لأنك لم تضف خريطة بعد. يصف الرمز أدناه خدمة CSS التي تحدّد حجم ولون div.

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

في الرمز أعلاه، يضبط العنصر style حجم div لخريطتك. اضبط div العرض والارتفاع على أكبر من 0 بكسل لكي تكون الخريطة مرئية. في هذه الحالة، يتم ضبط div على ارتفاع 400 بكسل وعرض 100% لعرض كامل صفحة الويب الخاصة بك.

يعمل برنامج الإقلاع على تحضير واجهة برمجة التطبيقات JavaScript JavaScript للتحميل (لا يتم تحميل أي مكتبات حتى يتم استدعاء importLibrary()).

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

يُرجى الاطّلاع على الخطوة 3: الحصول على مفتاح واجهة برمجة التطبيقات للحصول على تعليمات حول الحصول على مفتاح واجهة برمجة التطبيقات الخاص بك.

الخطوة 2: إضافة خريطة باستخدام محدِّد

يوضح لك هذا القسم طريقة تحميل Maps JavaScript API إلى صفحة الويب، وكيفية كتابة JavaScript باستخدام واجهة برمجة التطبيقات لإضافة خريطة عليها علامة.

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

في الرمز أعلاه، يتم تحميل مكتبتَي Map وAdvancedMarkerView عند استدعاء الدالة initMap().

فهم الرمز

تُنشئ التعليمة البرمجية أدناه كائن خرائط Google جديدًا، ويضيف خصائص إلى الخريطة بما في ذلك المركز ومستوى التكبير/التصغير. راجِع المستندات للتعرّف على الخيارات الأخرى للمواقع.

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

في الرمز أعلاه، ينشئ new Map() عنصر "خرائط Google" جديدًا. تُخبر السمة center واجهة برمجة التطبيقات بمكان تحديد مركز الخريطة.

تعرف على المزيد من المعلومات عن الحصول على إحداثيات خطوط العرض/الطول أو تحويل عنوان إلى إحداثيات جغرافية.

تحدّد السمة zoom مستوى التكبير أو التصغير للخريطة. تكبير/تصغير: 0 هو أقل تكبير، ويعرض الأرض بالكامل. عيّن قيمة التكبير/التصغير أعلى للتكبير على الأرض بدرجات دقة أعلى.

يضع الرمز أدناه علامة على الخريطة. تحدّد السمة position موضع العلامة.

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

مزيد من المعلومات حول محدّدات المواقع:

الخطوة 3: الحصول على مفتاح واجهة برمجة التطبيقات

يشرح هذا القسم كيفية مصادقة تطبيقك على Maps JavaScript API باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.

اتبع الخطوات التالية للحصول على مفتاح واجهة برمجة التطبيقات:

  1. انتقِل إلى Google Cloud Console.

  2. إنشاء مشروع أو اختياره

  3. انقر على متابعة لتفعيل واجهة برمجة التطبيقات وأي خدمات ذات صلة.

  4. في صفحة بيانات الاعتماد، الحصول على مفتاح واجهة برمجة التطبيقات (وضبط قيود مفتاح واجهة برمجة التطبيقات). ملاحظة: إذا كان لديك مفتاح واجهة برمجة تطبيقات حالي غير مشروط أو مفتاح يفرض قيود على المتصفّح، يمكنك استخدام هذا المفتاح.

  5. لمنع سرقة الحصة وتأمين مفتاح واجهة برمجة التطبيقات، يُرجى الاطّلاع على استخدام مفاتيح واجهة برمجة التطبيقات.

  6. تفعيل الفوترة. يمكنك الاطّلاع على الاستخدام والفوترة للحصول على مزيد من المعلومات.

  7. انسخ الرمز الكامل لهذا البرنامج التعليمي من هذه الصفحة إلى محرر النصوص.

  8. استبدِل قيمة المعلَمة key في عنوان URL بمفتاح واجهة برمجة التطبيقات الخاص بك (وهو مفتاح واجهة برمجة التطبيقات الذي حصلت عليه للتو).

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

  9. احفظ هذا الملف باسم ينتهي بـ .html، مثل index.html.

  10. حمِّل ملف HTML في متصفح ويب بسحبه من سطح المكتب إلى المتصفح. بدلاً من ذلك، يعمل النقر المزدوج على الملف على معظم أنظمة التشغيل.

نصائح وتحديد المشاكل وحلّها

  • يمكنك تعديل الخيارات مثل النمط والخصائص لتخصيص الخريطة. لمزيد من المعلومات حول تخصيص الخرائط، يُرجى قراءة أدلة التصميم والرسم على الخريطة.
  • استخدم Play Tools Console في متصفح الويب لاختبار الرمز وتشغيله، وقراءة تقارير الأخطاء وحل المشاكل المتعلقة بالرمز.
  • استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
    Command+Option+J (على نظام التشغيل Mac) أو Control+Shift+J (على نظام التشغيل Windows).

  • اتبع الخطوات أدناه للحصول على إحداثيات خطي العرض والطول لموقع على خرائط Google.

    1. افتح "خرائط Google" في متصفّح.
    2. انقر بزر الماوس الأيمن فوق الموقع بالضبط على الخريطة الذي تريد معرفة الإحداثيات له.
    3. اختَر ماذا هنا من قائمة السياقات التي تظهر. تعرض الخريطة بطاقة في أسفل الشاشة. ابحث عن إحداثيات خطوط الطول والعرض في الصف الأخير من البطاقة.

  • يمكنك تحويل عنوان إلى إحداثيات خطي الطول والعرض باستخدام خدمة الترميز الجغرافي. توفر أدلة مطوّري البرامج معلومات تفصيلية عن بدء استخدام خدمة الترميز الجغرافي.