Create Simple V3 Google Map اصنع خريطة جوجل في ثلاث ثوانٍ

مقالة متجددة ستتعلمون من خلالها كيفية صنع خريطة جوجل للدلالة على مقر الشركة او العمل أو غيره باستخدام خطوط الطول و العرض واستخدامها في الموقع الإلكتروني الخاص بك أو بشركتك .

الشكل النهائي لهذا الدرس

Down Town Dubai function initialize() { var mapDiv = document.getElementById(‘map-canvas’); var map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(25.196512, 55.278053), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); } google.maps.event.addDomListener(window, ‘load’, initialize);

المرحلة الأولى:-
1- الذهاب لموقع http://itouchmap.com/latlong.html .
2- في قائمة Address كتابة المنطقة أو المقر ومن ثم الضغط على Go .
3- بعد الانتهاء من اختيار المنطقة بالضغط بزر الفأره الايمن لتحديد المنطقة على الخريطة .
4- الضغط مره أخرى على منطقة التحديد لمعرفة خط الطول و العرض كما في المثال .

سنحتاج إلى هذا الرقم Latitude (خط العرض) و Longitude (خط الطول).

المرحلة الثانية:-
5- احفظ الملف هذا على جهازك .
6- قم بفك الضغط على الملف المضغوط بعد التحميل .
7- اضغط بزر الفأره الأيمن Open With >> واختيار Notepad .
8- بعد فتح المحرر قم بالضغط على الكيبورد بمفتاحي ctrl+f وابحث بكلمة LatLng واضغط على Fined Text .
9- قم بتغيير خطي الطول و العرض بما تم اختياره في المرحلة الأولى بما يتناسب معك.
10- بعد التغيير اضغط من لوحة الكيبورد على ctrl+s للحفظ ومن ثم اضغط على ملف المشروع لرؤيته .

– مثال لأحد المواقع التي تستخدم الخرائط في موقعها الإلكتروني من هنا .

Advertisements

Create Google Animated Dashboard اصنع لوحة التحكم الخاصة بك من جوجل

شرح كيفية استخدام الملفات المفتوحة من “جوجل” والمسماه بـ Google Charts Tool بإمكانكم التوجه لصفحة مطوري جوجل واستخدام المزيد, الطريقة جداً بسيطة ولا تحتاج إلى خبره كبيره في عالم البرمجيات لتطبيقها , ما سنقوم به اليوم هو استخدام مثال بسيط وحي لكيفية عمل لوحة تحكم ديناميكية باستخدام ملفات جوجل المفتوحة والمتوفره عبر الانترنت مجاناً.
قمت بتعريب بعض المصطلحات في اللغة البرمجية للتناسب مع مظهر لوحة التحكم التي سنقوم بشرحها اليوم في المثال.
ان تطوير صفحات ديناميكية تفاعلية لها اثر كبير في اعطاء صورة توضيحية مبسطه لكمية البيانات الهائله والمستخدمة في التصاميم و الرسوم البيانية ,ومنها نستطيع تحديد أو اتخاذ قرار بناء على تلك الرسوم البيانية.
ما تحتاج إليه فقط هو مجرد برنامج محرر لغات برمجية كـ FrontPage أو EditPlus أو NotePad. بإمكانكم تحميل نسخه من اللغة البرمجية إلى جهازكم بصيغة TXT او بالنقر على المثال بزر فأره واختيار View Page Source  وحفظ اللغة البرمجية لديكم.

التعديل في اللغة البرمجية :-
1- <title> هنا بإمكانكم كتابة عنوان لصفحة لوحة التحكم </title> 

2-      [‘الاسم‘, ‘الجنس‘, ‘العمر‘, ‘العدد‘],
          [‘أ‘ , ‘ذكر‘, 12, 5],
          [‘ب’, ‘انثى’, 20, 7],
          [‘ت’, ‘ذكر’, 7, 3],
          [‘ث’, ‘ذكر’, 54, 2],
          [‘ج’, ‘انثى’, 22, 6],
          [‘ح’, ‘ذكر’, 3, 1],
          [‘خ’, ‘انثى’, 42, 8],
          [‘د’, ‘انثى’, 33, 6]

بإمكانكم التعديل في الاسم أو الجنس أو العمر أو العدد واتباع العناصر الملونه بالترتيب لتتم عملية ادخال البيانات باسلوب صحيح في الرسم التفاعلي.

3- ‘filterColumnLabel’: ‘العمر‘, 
اذا تم تغيير بند العمر اعلاه يتوجب عليك تغيير اللغة بما يتناسب معكم , علماً اذا لم يتم التغيير لن يعمل الرسم التفاعلي.

4- ‘filterColumnLabel’: ‘الجنس‘, 
اذا تم تغيير بند الجنس اعلاه يتوجب عليك تغيير اللغة بما يتناسب معكم , علماً اذا لم يتم التغيير لن يعمل الرسم التفاعلي.

5- ‘title’: ‘العدد لكل شخص بالنسبه المئوية‘,
هنا عنوان للرسم البياني الدائري بإمكانكم تغيير المسمى بما يناسب معكم.

نظرة شامله مصوره اجزاء عن المشروع.

شكل رقم 1 جدول ديناميكي بناء على التعديل رقم 2
شكل رقم 2 رسم بياني توضيحي بناء على البيانات المدخله في التعديل رقم 2
التحكم بالرسوم البيانية و الجدول المنشأ باسلوب ديناميكي والاختيار بناء على الجنس أو العمر

 النظرة النهائية الشامله بعد التصفح.

لوحة التحكم النهائية التفاعلية حسب الجنس و العمر