سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

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

إضافة "خريطة 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

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

JSFiddle.net Google Cloud Shell

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

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

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

تحتاج إلى متصفح ويب. اختَر متصفّحًا معروفًا مثل 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 للخرائط" للتحميل (لا يتم تحميل مكتبات حتى يتم استدعاء 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 باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.

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

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

استبدِل قيمة المعلَمة 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>

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

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

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