مقدمة
يشرح لك هذا البرنامج التعليمي كيفية إضافة خريطة 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>style="height: 400px"
الخطوة 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>
لاحظ أن هذه صفحة أساسية للغاية بعنوان من المستوى الثالث (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: إضافة خريطة باستخدام محدِّد
يوضح هذا القسم كيفية تحميل واجهة برمجة تطبيقات 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();
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();
في الرمز أعلاه، يتم تحميل المكتبتَين 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',
}
);
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",
});
في الرمز أعلاه، ينشئ new Map() عنصرًا جديدًا في "خرائط Google". تشير رسالة الأشكال البيانية
تطلب السمة center لواجهة برمجة التطبيقات تحديد مركز الخريطة.
معرفة المزيد حول الحصول على إحداثيات خطوط الطول/العرض، أو تحويل عنوان إلى إحداثيات جغرافية
تحدّد السمة zoom مستوى التكبير/التصغير للخريطة. تكبير/تصغير: 0 هو أدنى قيمة
والتكبير/التصغير ويعرض الأرض بأكملها. اضبط قيمة التكبير/التصغير على مستوى أعلى للتكبير إلى
الأرض بدرجات دقة أعلى.
يضع الرمز أدناه علامة على الخريطة. تحدد السمة position
موضع العلامة.
TypeScript
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
JavaScript
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
إكمال نموذج الرمز البرمجي
انظر مثال التعليمة البرمجية الكامل هنا:
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();
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();
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;
}
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>
تجربة "عيّنة"
مزيد من المعلومات عن العلامات:
النصائح وتحديد المشاكل وحلّها
- يمكنك تعديل خيارات مثل النمط والخصائص لتخصيص الخريطة. بالنسبة مزيد من المعلومات حول تخصيص الخرائط، واقرأ الأدلّة من أجل التصميم، الرسم على الخريطة.
- استخدم وحدة التحكم في أدوات المطوّرين في متصفح الويب لاختبار التعليمات البرمجية وقراءة تقارير الأخطاء وحل المشكلات المتعلقة بالتعليمات البرمجية.
- استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
Command+Option+J (على نظام التشغيل Mac)، أو Control+Shift+J (على نظام التشغيل Windows). اتبع الخطوات أدناه للحصول على خط العرض إحداثيات خط الطول لموقع ما على خرائط Google.
- افتح "خرائط Google" في متصفّح.
- انقر بزر الماوس الأيمن على الموقع الدقيق على الخريطة الذي تحتاج إليه الإحداثيات.
- اختَر ماذا هنا من قائمة السياقات التي تظهر. تعرض الخريطة بطاقة في أسفل الشاشة. البحث عن خط العرض وإحداثيات خطوط الطول والعرض في الصف الأخير من البطاقة.
يمكنك تحويل عنوان إلى إحداثيات خطي العرض والطول باستخدام خدمة ترميز جغرافي. توفر أدلة المطوِّرين معلومات مفصلة عن بدء استخدام خدمة الترميز الجغرافي.