Latest web development tutorials

قاعدة خرائط جوجل

إنشاء خرائط جوجل بسيطة

الآن دعونا إنشاء خرائط جوجل بسيطة.

وفيما يلي رسم بياني يوضح خرائط جوجل لندن:

أمثلة

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

محاولة »

أمثلة تحليلية

في المثال أعلاه يمكننا خلق عملية لحل خريطة جوجل.

لماذا يجب أن يعلن HTML5 التطبيق؟

<!DOCTYPE html>

معظم المتصفحات استخدام "النموذج القياسي" من HTML5 تقديم المستند صفحة، وهو ما يعني أن التطبيق الخاص بك متوافق مع جميع المتصفحات الرئيسية.

وبالإضافة إلى ذلك، إذا كان هناك أي علامة DOCTYPE، والمتصفح الذي تستخدمه وضع مختلط (وضع المراوغات) لتقديم محتوى الصفحة.

نصيحة: وتجدر الإشارة إلىأن بعض "وضع غير شرعي" في CSS ولا يمكنك استخدام الوضع العادي. في تطبيق معين، كل شيء يجب أن ترث من عناصر كتلة الوالدين على أساس نسبة مئوية من حجم. إذا لم تقم بتحديد حجم وحدة في الأصل، القيمة الافتراضية 0 س 0 بكسل. إذا كنت تريد استخدام النسب المئوية، ويمكن تعريفها في <نمط> العلامة، على النحو التالي:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

وينبغي أن تكون هذه الخريطة تظهر وحدة إعلان النمط (غوغل) ارتفاع أتش تي أم أل 100٪.

إضافة خرائط جوجل API الرئيسية

في المثال التالي أولا <script> يجب تضمين علامة في API خرائط جوجل:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

مفتاح API ولدت جوجل-وضعت في المعاييرالأساسية(مفتاح= YOUR_API_KEY).

مطلوبالمعلمة الاستشعار، ويتم استخدام المعلمة للإشارة إلى ما إذا كان التطبيق يستخدم جهاز استشعار (على غرار الملاحة GPS) لتحديد موقع المستخدم.يمكن تعيين قيم المعلمة إلى صواب أو خطأ.

HTTPS

إذا كان التطبيق الخاص بك هو آمن HTTP: تطبيق (HTTPS HTTP آمن)، يمكنك استخدام HTTPS لتحميل API خرائط جوجل:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

التحميل غير المتزامن

وبالمثل، فإننا يمكن أيضا تحميل خرائط جوجل API بعد تحميل الصفحة بالكامل.

يستخدم المثال التالي window.onload لتنفيذ محملة بالكامل عندما يتم تحميل الصفحة خرائط جوجل. loadScript () بإنشاء وظيفة تحميل خرائط جوجل API العلامة <script>. أيضا في نهاية التسمية إلى رد = تهيئة المعلمات، تهيئة () سيتم تنفيذها بعد تحميل API تماما عن وظيفة رد:

أمثلة

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

محاولة »

خصائص خريطة مخصصة

قبل تهيئة الخريطة، نحن بحاجة إلى إنشاء كائن خريطة لتحديد خصائص الخريطة الملكية:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

المركز (الوسط)

تحدد سمة مركزية وسط الخريطة، والتي من الإحداثيات (خطوط الطول والعرض) لإنشاء نقطة مركزية على الخريطة.

التكبير (زووم سلسلة)

تحدد الخاصية التكبير خريطة التكبير في عدد من المراحل. التكبير: 0 مشاهدة الحجم الكامل الخريطة بأكملها من الأرض.

MapTypeId (الأولية نوع خريطة)

تحدد mapTypeId سمة نوع الخريطة الأولية.

يشمل mapTypeId الأنواع الأربعة التالية:

  • google.maps.MapTypeId.HYBRID: صور الأقمار الصناعية تظهر في الشارع الرئيسي للطبقة شفافة
  • google.maps.MapTypeId.ROADMAP: عرض خريطة الشارع العادي
  • google.maps.MapTypeId.SATELLITE: الصورة مشاهدة القنوات الفضائية
  • google.maps.MapTypeId.TERRAIN: يعرض خرائط مع الخصائص الفيزيائية (مثل التضاريس والغطاء النباتي) من

حيث لعرض خرائط جوجل

تستخدم عادة في خرائط Google العنصر <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

ملاحظة: سيتم حجمالخريطة الدرجة المقرر أن تظهر الحجم من الخريطة، ولذا فإننا يمكن أن يحدد حجم الخريطة في <div> العنصر.

إنشاء كائن خريطة

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

يستخدم رمز أعلاه المعلمة (mapProp) في العنصر <div> (هو معرف غوغل) بإنشاء خريطة جديدة.

نصيحة: إذا كنتترغب في إنشاء صفحات خريطة متعددة، تحتاج فقط إلى إضافة أشياء خريطة جديدة يمكن أن يكون.

يحدد المثال التالي أربع خرائط سبيل المثال (خرائط باستخدام أربعة أنواع خريطة مختلفة):

أمثلة

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

محاولة »

تحميل الخريطة

خريطة نافذة تهيئة الكائن بعد التحميل بواسطة تنفيذ دالة تهيئة ()، والذي يضمن أن تحمل الصفحة بالكامل قبل تحميل خرائط جوجل:

google.maps.event.addDomListener(window, 'load', initialize);