تصميم الخرائط المستنِد إلى السحابة الإلكترونية

تقدّم "منصة خرائط Google" ميزات لتصميم الخرائط المستنِدة إلى السحابة الإلكترونية التي تسهّل تصميم الخرائط وتخصيصها وإدارتها باستخدام Google Cloud Console، ما يسمح لك بإنشاء تجربة خريطة مخصّصة للمستخدمين بدون الحاجة إلى تعديل رمز تطبيقاتك في كل مرة تُجري فيها تغييرًا على النمط.

لن تعرض الأنماط التي تم إنشاؤها قبل 15 أيلول (سبتمبر) 2020 الميزات الطبيعية المحسّنة في "خرائط Google". لاستخدام توافق الميزات الطبيعية المحسّنة في "خرائط Google" مع نمط الخريطة، يجب إنشاء نمط خريطة.

يتيح لك تصميم الخرائط المستندة إلى السحابة الإلكترونية إنشاء وتعديل أنماط الخرائط لأي من تطبيقاتك التي تستخدم "خرائط Google"، بدون الحاجة إلى إجراء أي تغييرات على الرمز بعد إعداد معرّف الخريطة. يمكن إجراء جميع تغييرات النمط في Cloud Console، بدون الحاجة إلى مهارات ترميز. يمكنك تغيير مظهر ولون العديد من عناصر الخريطة، مثل الطرق والمباني والبحيرات المائية ونقاط الاهتمام ومسارات النقل العام.

وتشمل هذه الميزات ما يلي:

• تصميم الخرائط المستنِد إلى السحابة الإلكترونية: بدلاً من تصميم الخريطة في رمز باستخدام JSON، يمكنك إدارة وتصميم الخرائط الديناميكية أو الثابتة في Cloud Console باستخدام أرقام تعريف الخرائط وأنماط الخرائط.
• خريطة موجّهة: يمكن لمطوّري برامج JavaScript اختيار استخدام الخريطة نفسها المستندة إلى متّجه WebGL المتاحة على maps.google.com مباشرةً في تطبيقات الويب الخاصة بهم.
• فلترة نقاط الاهتمام للنشاط التجاري: يمكن إزالة خمس فئات من نقاط النشاط التجاري محل الاهتمام بشكل اختياري من عرض الخريطة.
• التحكّم في كثافة نقاط الاهتمام: يمكن تعديل كثافة نقاط الاهتمام المعروضة على الخريطة الأساسية بحيث تعرض نقاط اهتمام أكبر أو أقل بشكل تلقائي.

على الرغم من توفّر تصميم الخرائط المستنِد إلى السحابة الإلكترونية على حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع Android¹، و"خرائط Google" لحزمة تطوير البرامج (SDK) لنظام التشغيل iOS وJavaScript وواجهة برمجة التطبيقات الثابتة لتطبيق "خرائط Google"، لن تظهر جميع الميزات على جميع الأنظمة الأساسية.

قبل البدء

• إنشاء رقم تعريف خريطة
  لاستخدام تصميم الخرائط المستندة إلى السحابة الإلكترونية، يجب تحميل خريطتك باستخدام رقم تعريف الخريطة.
• نقل البيانات من النمط غير المرمَّز
  قبل إضافة رقم تعريف خريطة لاستخدام تصميم الخرائط المستنِد إلى السحابة الإلكترونية على خريطة حالية يتم تخصيصها بأنماط غير قابلة للتغيير، مثل معلَمات طلب البحث بتنسيق JSON أو عنوان URL، ننصحك بإزالة النمط غير المرمَّز لتجنُّب أي تعارض محتمل مع الوظائف المستقبلية. يمكنك استيراد نمط JSON إلى نمط خريطة جديد.
  • على جهاز Android، يجب تحديث تطبيق MapStyleOptions.
  • على جهاز iOS، يجب تعديل صف واحد (GMSMapStyle).
  • في JavaScript، عليك إزالة النمط MapTypeStyle.
  • في "خرائط Google" الثابتة، أزِل المعلَمة style.

الإذن بالوصول إلى الفوترة

يتطلب استخدام تصميم الخرائط المستندة إلى السحابة الإلكترونية رقم تعريف الخريطة. في حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع Android وحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع iOS وJavaScript، يتم فرض رسوم على رمز التخزين التعريفي لتطبيق "خرائط Google". في واجهة برمجة التطبيقات الثابتة للخرائط، يؤدي استخدام رقم تعريف الخريطة إلى فرض رسوم على رمز التخزين التعريفيالخرائط الثابتة.

أمثلة

Android

تشغيل نموذج تطبيق ApiDemos

لتشغيل نموذج تطبيق ApiDemos، يمكنك الاطّلاع على نموذج GitHub (Java | Kotlin) وعرض العرض التوضيحي CloudBasedMapStylingDemoActivity (Java | Kotlin).

يمكنك العثور على تطبيق نموذجي Java وKotlin يشرح كيفية تصميم خريطة Android من السحابة الإلكترونية.

المشاكل المعروفة

بعد أن يتم تسليم تطبيقك للعملاء، يمكن تعديل الأنماط المخصّصة للخرائط التي تحتوي على أرقام تعريف الخرائط من Google Cloud Console. ستظهر الأنماط الجديدة في تطبيقك خلال بضع ساعات.

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

تجدر الإشارة إلى أنّ الإعدادات قد تختلف حسب الهاتف. للمزيد من المعلومات، يُرجى التواصل مع الشركة المصنِّعة لجهازك.

iOS

تشغيل نموذج تطبيق ApiDemos

لتشغيل نموذج تطبيق ApiDemos، اطّلِع على نموذج نموذج GitHub تطبيق نموذج GoogleMap واعرض مشروع CloudBasedMapStylingViewController (نموذج GitHub لـ Swift | GOAL-C).

إصدار تجريبي اختياري لنمط Cloud CocoaPod أو GitHub

بدلاً من البدء من نقطة الصفر، يمكنك تجربة نموذج تطبيق GOAL-C الذي يوضّح كيفية تصميم خريطة iOS من السحابة الإلكترونية هنا.

إنشاء تطبيق تجريبي

في Xcode، اضغط على الزر "تجميع" لإنشاء المخطط الحالي ثم تشغيله. ينتج عن الإصدار خطأ يطلب منك إدخال مفتاح واجهة برمجة التطبيقات في ملف SDKDemoAPIKey.h.

إذا لم يكن لديك مفتاح واجهة برمجة تطبيقات، اتّبِع هذه التعليمات لإعداد مشروع على Cloud Console والحصول على مفتاح لواجهة برمجة التطبيقات. عند ضبط المفتاح في Cloud Console، يمكنك تحديد معرِّف حزمة تطبيقك لضمان استخدام التطبيق فقط للمفتاح. ويكون معرّف الحزمة التلقائي لتطبيق حزمة تطوير البرامج (SDK) هو com.example.GoogleMapsDemos.

عدِّل ملف SDKDemoAPIKey.h والصِق مفتاح واجهة برمجة التطبيقات في تعريف ثابت kAPIKey الثابت:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

إذا طلب منك Xcode فتح قفل ملف SDKDemoAPIKey.h للتعديل، اختَر فتح القفل.

أزِل السطر التالي:

```
#error Register for API Key and insert here.
```

إنشاء المشروع وإدارته

إصدار تجريبي لخريطة الأنماط المستندة إلى السحابة الإلكترونية

يوضّح العرض التوضيحي CloudStyling كيفية تعديل الخريطة باستخدام نمط تم ضبطه على Google Cloud Console.

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

انقر على خريطة الأنماط لمعرفة تأثير تحميل أرقام تعريف الخرائط المختلفة.

يمكنك محاولة إضافة نمطك أيضًا ("خريطة النمط" > "إضافة رقم تعريف خريطة جديد")، والاطّلاع على تحديث الخريطة باستخدام خريطتك ذات التصميم المخصّص.

JavaScript

هذا مثال أساسي على تحميل خريطة بتصميم مخصّص باستخدام رقم تعريف خريطة. في هذه الحالة، يشير رمز JavaScript في "خرائط Google" إلى رقم تعريف الخريطة 8e0a97af9386fef عند تحميل الخريطة، ويطبّق تلقائيًا نمط الخريطة المرتبط حاليًا برقم تعريف الخريطة هذا.

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

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

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js

Maps Static API

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

1. إذا كنت تستخدم تصميم الخرائط المستندة إلى السحابة الإلكترونية مع خريطة حالية يتم تخصيصها باستخدام المعلَمة style، احرص على إزالتها لتجنّب أي تعارض محتمل مع الوظائف المستقبلية.

2. لإضافة رقم تعريف خريطة إلى خريطة جديدة أو حالية تستخدم إحدى واجهات برمجة تطبيقات الويب، أضِف معلّمة عنوان URL map_id واضبطها على رقم تعريف الخريطة. يوضح هذا المثال إضافة رقم تعريف خريطة إلى خريطة باستخدام واجهة برمجة التطبيقات الثابتة في "خرائط Google".

   <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />