إشعار الأمان: نما إلى علمنا بمشكلة أمنية قد تؤثر في المواقع الإلكترونية التي تستخدم مكتبات معيّنة تابعة لجهات خارجية (بما في ذلك polyfill.io). وقد تؤدي هذه المشكلة في بعض الأحيان إلى إعادة توجيه الزائرين بعيدًا عن الموقع الإلكتروني المقصود بدون معرفة مالك الموقع أو إذنه. وفي السابق، كان يتضمّن العديد من نماذج JavaScript تعريف النص البرمجي polyfill.io. تمت إزالة هذا المحتوى من نماذجنا. إذا كنت قد استخدمت نماذج JavaScript التي تحتوي على هذا التعريف، ننصحك بإزالة التعريف.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إضافة خريطة Google مع علامة باستخدام JavaScript

مقدمة

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

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

الخطوات الأولى

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

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

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

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

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

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

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

<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

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

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <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 واحد. يمكنك إضافة أي محتوى تريده إلى صفحة الويب.

فهم الرمز البرمجي

في هذه المرحلة في المثال، لدينا ما يلي:

تم تعريف التطبيق على أنه HTML5 باستخدام تعريف !DOCTYPE html.
تم إنشاء عنصر div باسم "map" للاحتفاظ بالخريطة.
تم تحميل واجهة برمجة تطبيقات JavaScript للخرائط باستخدام برنامج الإقلاع.

تعريف تطبيقك على أنّه HTML5

ننصحك بالإفصاح عن السمة DOCTYPE الصحيحة ضمن تطبيق الويب. في الأمثلة الواردة هنا، أعلنا عن تطبيقاتنا على أنها HTML5 باستخدام DOCTYPE HTML5 بسيط كما هو موضح أدناه:

<!DOCTYPE html>

ستعرض معظم المتصفحات الحالية المحتوى الذي تم تعريفه باستخدام DOCTYPE هذا في "وضع المعايير" مما يعني أن تطبيقك يجب أن يكون أكثر عبر جميع المتصفحات. تم تصميم DOCTYPE أيضًا للتقليص بسلاسة، ستتجاهله المتصفحات التي لا تفهمها، وتستخدم "وضع Quirks" إلى لعرض محتواها.

لاحظ أن بعض CSS الذي يعمل في وضع Quirks غير صالح في وضع المعايير. وبشكل خاص، يجب أن تكتسب جميع الأحجام المستندة إلى النسبة المئوية من عناصر الكتلة الأصلية، وإذا فشل أي من تلك الكيانات الأصل في لتحديد حجم، يُفترض أن يكون حجمها 0 × 0 بكسل. بالنسبة لهذا السبب، ندرج بيان style التالي:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

إنشاء عنصر div

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

يحدد الرمز أدناه منطقة من الصفحة لخريطة 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% لعرضه بعرض صفحة الويب يُرجى ملاحظة أنّ عنصر div يأخذ عرضه عادةً من العنصر الذي يحتوي عليها، وعادةً ما يكون ارتفاع divs الفارغة 0. لهذا الغرض السبب، يجب دائمًا ضبط الارتفاع على div بشكل واضح.

تحميل واجهة برمجة تطبيقات 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: إضافة خريطة باستخدام محدِّد

يوضح هذا القسم كيفية تحميل واجهة برمجة تطبيقات JavaScript للخرائط في صفحة ويب، وكيفية كتابة لغة 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().

فهم الرمز البرمجي

في هذه المرحلة من البرنامج التعليمي، لدينا:

تم تحديد دالة JavaScript تنشئ خريطة في div.
تم إنشاء AdvancedMarkerElement لإضافة محدِّد موقع إلى الخريطة.

إضافة خريطة

تُنشئ التعليمة البرمجية أدناه كائن خرائط 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

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

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

يتطلب تقديم خريطة للأرض بالكامل كصورة واحدة أو خريطة ضخمة، أو خريطة صغيرة ذات دقة منخفضة للغاية. نتيجةً لذلك، تسمح صور الخريطة ضمن خرائط Google وواجهة برمجة تطبيقات JavaScript للخرائط إلى "مربعات" للخرائط و"مستويات التكبير". في مستويات التكبير/التصغير المنخفضة، تغطي مجموعة صغيرة من مربعات الخرائط خريطة المنطقة؛ مع مستويات تكبير/تصغير أعلى، تكون المربعات ذات دقة أعلى وتغطي مساحة أصغر. تعرض القائمة التالية مستوى التفاصيل التقريبي الذي يمكنك. نتوقع أن تراها في كل مستوى تكبير/تصغير:

1: العالم
5: مساحة اليابسة أو القارة
10: المدينة
15: الشوارع
20: مبانٍ

تعكس الصور الثلاث التالية نفس موقع طوكيو بمستويات التكبير 0، 7 و18.

إضافة علامة

يضع الرمز أدناه علامة على الخريطة. تحدد السمة 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

إكمال نموذج الرمز البرمجي

انظر مثال التعليمة البرمجية الكامل هنا:

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>

    <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

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

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

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

مزيد من المعلومات حول الحصول على خطوط الطول/العرض أو تحويل عنوان إلى إحداثيات جغرافية.
يمكنك تعديل خيارات مثل النمط والخصائص لتخصيص الخريطة. بالنسبة مزيد من المعلومات حول تخصيص الخرائط، واقرأ الأدلة التصميم، الرسم على الخريطة.
استخدم وحدة تحكم أدوات المطوّرين في متصفح الويب لاختبار التعليمات البرمجية وقراءة تقارير الأخطاء وحل المشكلات المتعلقة بالتعليمات البرمجية.
استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
Command Option J (على نظام التشغيل Mac)، أو Control Shift J (على نظام التشغيل Windows).
اتبع الخطوات أدناه للحصول على خط العرض إحداثيات خط الطول لموقع ما على خرائط Google.
1. افتح "خرائط Google" في متصفّح.
2. انقر بزر الماوس الأيمن على الموقع الدقيق على الخريطة الذي تحتاج إليه الإحداثيات.
3. اختَر ماذا هنا من قائمة السياقات التي تظهر. تعرض الخريطة بطاقة في أسفل الشاشة. البحث عن خط العرض وإحداثيات خطوط الطول والعرض في الصف الأخير من البطاقة.
يمكنك تحويل عنوان إلى إحداثيات خطي العرض والطول باستخدام خدمة ترميز جغرافي. توفر أدلة المطوِّرين معلومات مفصلة عن بدء استخدام خدمة الترميز الجغرافي.