أمثلة قديمة

Android

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

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

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

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

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

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

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

iOS

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

لتشغيل نموذج تطبيق ApiDemos، يمكنك الاطّلاع على نموذج GitHub نموذج تطبيق "خرائط Google" والاطّلاع على مشروع CloudBasedMapStylingViewController (نموذج GitHub لـ Swift | Objective-C).

عرض توضيحي اختياري لنمط السحابة الإلكترونية من CocoaPod أو GitHub

بدلاً من البدء من الصفر، يمكنك تجربة نموذج Objective-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 لتعديله، اختَر Unlock (فتح القفل).

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

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

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

عرض توضيحي لخريطة تصميم السحابة الإلكترونية

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

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

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

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

JavaScript

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

TypeScript

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

JavaScript

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. لإضافة معرّف خريطة إلى خريطة جديدة أو حالية تستخدِم إحدى واجهات برمجة تطبيقات الويب التابعة لنا، ألحِق معلَمة map_id لعنوان URL واضبطها على معرّف الخريطة. يوضح هذا المثال إضافة معرف خريطة إلى خريطة باستخدام واجهة برمجة تطبيقات الخرائط الثابتة.

    <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" />