اليوم الأربعاء 22 نوفمبر 2017 - 3:36 صباحًا
أخر تحديث : الأحد 11 سبتمبر 2011 - 1:30 مساءً

للمبتدئين : علامات الطريق .. على خرائط جووجل ( ٢ )

للمبتدئين : علامات الطريق .. على خرائط جووجل ( ٢ )
13٬353 قراءة بتاريخ 21 يونيو, 2011

خرائط غوغل 2

خرائط غوغل 2

إضافة علامة marker بالضغط على الخريطة

لضغط Click هو حدث من ضمن الأحداث Events التي يمكن للمستخدم إحداثها على الخريطة – أو أي كائن آخر – للتفاعل معه ، ومنها أيضًا تمرير مؤشر الفأرة على الخريطة أو خارجها أو الضغط مرتين متتاليتين على الخريطة …. إلخ .

لدينا كذلك الأحداث الخاصة مثل : تغيير زوم الخريطة ، ويمكنك معرفة جميع الأحداث الممكنة من هذا الرابط .

لكل حدث ردة فعل وهي الـ function التي ستؤثر على الخريطة ، وقد تحمل هذه الـ functions متغيرات مثل latLng وهي قيمة النقطة التي ضغطت عليها .

لإضافة حدث إلى الخريطة :

google.maps.event.addListener(map, 'click', function() {
// codes
});

أما العلامات على الخريطة ( البلالين :) ) فهي كائن object أحتاج عند تعريفها إلى المعلومات التالية  :

١: موقعها بالتحديد ( على خط الطول والعرض ) .

٢ : اسم الخريطة  .

ومن الممكن كذلك إضافة معلومات أخرى مثل ..

٣ : المعلومات التي ستظهر عند مرور المؤشر عليها .

٤ : صورة الأيقونة التي ستظهر بدلا من البالون .

 

var myLatlng = new google.maps.LatLng(31.25982,34.68565);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"هنا العالم العربي !",
icon : "image.png"
});

وهذا كود كامل لإضافة بالون على النقطة التي قمت بالضغط عليها في الخريطة :

function setMarker() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
google.maps.event.addListener(map, 'click', function(overlay,latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}

في حال أردت السماح للمستخدم بإضافة بالون واحد فقط يمكنك إضافة هذا السطر بداية الـ

function

map.clearOverlays();

 

وفي حال أردت حفظ قيمة الـ Lat والـ Lng في قاعدة بيانات أو ملف XML استعن بأداة مربع النص

<input type="text" id="lat" value="" />
<input type="text" id="lng" value="" />

ليصبح الكود كاملاً :

<script src=”http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=&lt;em&gt;true_or_false&lt;/em&gt;&amp;amp;key=ABQIAAAApGxVMx8Y2JXexxqlVql-PBRlP00RlZyqDBcg1q9-cyhfXS1xnBR4hbaquE1rSdO5gPZOJ6rMUczI8g” type=”text/javascript”></script>

 

شكرا عالم التقنية

أوسمة : , , , ,

إعلان :

انضم الينا