إضافة خريطة 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: "beta"});</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: "beta"});</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 لتحميل "خرائط Google" (لا يتم تحميل أي مكتبات حتى يتم استدعاء 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_HERE",
    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: إضافة خريطة مع محدّد موقع

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

فهم الرمز

يعمل الرمز التالي على إنشاء عنصر جديد في "خرائط 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_HERE",
    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 Console في متصفّح الويب الذي تستخدمه لاختبار الرمز وتشغيله، وقراءة تقارير الأخطاء وحلّ المشاكل باستخدام الرمز.
  • استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
    Command+Option+J (على Mac) أو Control+Shift+J (على Windows).

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

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

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