خرائط جوجل الأساسية

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

هذا المثال بإنشاء خريطة جوجل تركز في لندن، إنجلترا:

مثال

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></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>

انها محاولة لنفسك »

ما تبقى من هذه الصفحة يصف المثال أعلاه، خطوة خطوة.

1. قم بتحميل API جوجل

خرائط جوجل API هي مكتبة جافا سكريبت. ويمكن أن نضيف إلى صفحة ويب مع <script> العلامة:

2. تعيين خصائص خريطة

إنشاء دالة تهيئة الخارطة:

function initialize() {
}

في وظيفة تهيئة، إنشاء كائن (mapProp) لتحديد خصائص لخريطة:

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

تحدد الخاصية المركز حيث لمركز الخريطة. إنشاء كائن خط الطول والعرض لتوسيط الخريطة على نقطة محددة. تمرير الإحداثيات بالترتيب: خطوط العرض والطول.

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

تحدد الخاصية mapTypeId نوع الخريطة لعرضهم. ويدعم أنواع الخريطة التالية:

خريطة طريق (normal, default 2D map)
قمر صناعي (photographic map)
HYBRID (photographic map + roads and city names)
التضاريس (map with mountains, rivers, etc.)

3. إنشاء حاوية خريطة

إنشاء <div> عنصر لاجراء الخريطة. استخدام CSS لحجم العنصر:

فإن خريطة دائما "inherit" حجمه من عنصر الحاوية الخاصة به.

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

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

رمز أعلاه يخلق خريطة جديدة داخل <div> عنصر مع معرف = "غوغل"، وذلك باستخدام المعلمات التي تم تمريرها (mapProp) .

5. إضافة المستمع حدث لتحميل خريطة

إضافة المستمع DOM التي ستقوم بتنفيذ initialize() الدالة على الحمل نافذة (when the page is loaded) :

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

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

ومن الممكن أيضا لتحميل API خرائط Google على الطلب.

يستخدم المثال التالي window.onload لتحميل خرائط جوجل API بعد تحميل الصفحة بالكامل.

و loadScript() وظيفة يخلق API خرائط جوجل <script> العلامة. وبالإضافة إلى ذلك، = يتم إضافة رد تهيئة معلمة إلى نهاية URL لتنفيذ initialize() وظيفة بعد API هو محملة بالكامل:

مثال

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

window.onload = loadScript;

انها محاولة لنفسك »

خرائط متعددة

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

مثال

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
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);

انها محاولة لنفسك »

مفتاح جوجل API

جوجل تتيح موقع الويب الخاص بك لاستدعاء أي API جوجل، العديد من ألف مرة في اليوم الواحد.

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

الذهاب إلى https://console.developers.google.com للحصول على مفتاح مجانا.

خرائط جوجل تتوقع العثور على مفتاح API في المعلمة الرئيسية عند تحميل أي API:

❮ السابق التالي الفصل ❯