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

المقدمة

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

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

يعرض القسم أدناه الشفرة الكاملة التي تحتاجها لإنشاء الخريطة في هذا البرنامج التعليمي.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;
index.js

CSS

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

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></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>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></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.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 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% لعرض ذلك في عرض صفحة الويب.

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

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

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;
index.js

CSS

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

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

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

فهم الشفرة

في الرمز أدناه، يحمّل script واجهة برمجة التطبيقات من عنوان URL المحدّد.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

في الرمز أعلاه، تنفّذ المعلمة callback الدالة initMap بعد تحميل واجهة برمجة التطبيقات. تتيح السمة async للمتصفّح الاستمرار في تحليل ما تبقى من صفحتك أثناء تحميل واجهة برمجة التطبيقات. بعد الانتهاء من التحميل، سيتوقف المتصفح مؤقتًا وينفذ النص البرمجي على الفور. تحتوي المعلمة key على مفتاح واجهة برمجة التطبيقات.

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

يحتوي الرمز أدناه على الدالة initMap التي تهيئ الخريطة وتضيفها عند تحميل صفحة الويب. استخدِم علامة script لتضمين JavaScript الخاص بك الذي يحتوي على الوظيفة initMap.

  function initMap() {}

أضف الدالة document.getElementById() للعثور على الخريطة div في صفحة الويب.

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

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);
index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});
index.js

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

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

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

يضع الرمز التالي محددًا على الخريطة. تحدد الخاصية position موضع محدّد الموقع.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});
index.js

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

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

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

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

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

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

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

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

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

  6. تمكين الفوترة. راجع الاستخدام والفوترة لمزيد من المعلومات.

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

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

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

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

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

النصائح وتحرّي الخلل وإصلاحه

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

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

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

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