ادراج controll خاص بعرض خريطه في الموقع

Google maps

+

Google APIs

للتعامل مع مكتبات google

اخي الكريم ممكن اعرف الطريقه الي نضيف هذي الخريطه الى الموقع

سأعطيك طريقة لإضافة الخرائط إلى مشروع الويب بكل سهولة. ويمكن استخدام هذا الطريقة لأي تقنية لصناعة الويب. كون هذه الطريقة تعتمد على [Java Script] و

، فهي بالتالي مستقلة عن أي تقنية اخرى [ASP.NET] أو [php] مثلاً.

[بالمرفقات يوجد صفحة ويب [html] بسيطة، يمكنك تشغيلها مباشرة ورؤية الخريطة]

وهذه الصفحة تحوي على التالي:

لكن سأوضح بعض النقاط المهمة:

1. في السطرين [4-5] قمنا بتحميل ملف [JavaScript]، من [google]، وهي التي ستزودنا ب [Google APIs].

2. في السطر [23]، قمنا بتعريف عنصر [div]. لنعرض الخريطة بداخلة، واعطيناه الإسم [map_canvas].

3. في السطر التاسع قمنا بتعريف دالة [function] تسمى [initialize]، لتهئية الخريطة وعرضها على العنصر السابق.

4. في السطر [10]، قمنا بتعريف خطوط الطول وخطوط العرض التي ستبدأ منها الخريطة، في المثال وضعت [37، 34]، وهي خطوط الطول والعرض لسوريا، بإمكانك البحث عن خطوط طول وعرض مكان معين ووضعها في هذا المكان.

5. الأسطر الباقية عبارة عن تحديد خصائص للخريطة واسنادها للعنصر [map_canvas].

6. ملاحظة: في اخر ملف [JavaScript] الذي استوردناه من [Google]. هناك الخاصية [sensor = false]، إذا وضعناها إلى [true]، سيقوم بالبحث عن إعدادات أخرى للخريطة [GPS] مثلاً.

ونلاحظ أيضاً استدعاء الميثود [initialize] ضمن < body >.

بالتوفيق.

UsingGoogleMaps.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google maps. Syria position</title>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
    </script>

    <script type="text/javascript">
        function initialize() {
            var latitude_longitude = new google.maps.LatLng(34, 37)
            var mapOptions = {
                center: latitude_longitude,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                marker: true
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        }
    </script>
</head>
<body onload="initialize()">
    <form id="form1" runat="server">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
    </form>
</body>
</html>