آخرین مطالب
امکانات وب
در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
علاوه بر marker یا نشانه، چند ضلعی، دایره، مستطیل و بقیه اشکال موجود، ما همچنین میتونیم باکسها یا پنجره های اطلاعاتی یا Info Windows رو بر روی نقشه نمایش بدیم و با استفاده از اون، متنی رو به کاربر نمایش بدیم. این مطلب به شما آموزش میده که چطور از Info Windows استفاده کنید و نقشتون رو پیشرفته تر کنید.
اضافه کردن یک Window
Info Windows برای افزودن هر گونه متن و اطلاعاتی به نقشه مورد استفاده قرار میگیره. برای مثال، اگر شما بخواید اطلاعاتی در مورد یک نقطه خاص بر روی نقشه قرار بدید، شما میتونین از Info Window استفاده کنید. بطور معمول و عمدتا Info Window به نشانه یا Marker متصل و ربط داده میشه. شما میتونین برای ساختن یک Info Window یک نمونه جدید از شئ google.maps.InfoWindow رو بسازید. این مورد ویژگی های زیر رو پوشش میده:
- Content : با استفاده از این ویژگی میتونین رشته متنی که قصد دارید در Window نمایش داده بشه رو مشخص کنید.
- position : با استفاده از این ویژگی میتونین مختصات جغرافیایی نقطه ای که میخاید Window در اونجا نمایش داده بشه رو مشخص کنید.
- maxWidth : بصورت پیش فرض Widnow به اندازه ای طولش زیاد میشه که تمام محتویاتش رو نمایش بده، اما شما میتونین برای اون یک ماکزیمم مشخص کنید که از اون بیشتر نشه.
مثال زیر رو ببینید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var infowindow = new google.maps.InfoWindow({ content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033", position: new google.maps.LatLng(20.433053, 78.412172), maxWidth: 200 });
infowindow.open(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی:
همچنین شما میتونین یک Info Window رو به یک نشانه یا Marker نسبت بدین و هر کاری که با Marker صورت بگیره، Info Window هم رفتار متناسب با اون نمایش میده. برای مثال کد زیر رو ببینید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.433053, 78.412172), map: map, draggable:true });
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content:"Mohammad Esfandiari, <a href='http://farsial.com'>Farsial</a>" });
infowindow.open(map,marker); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر هست:
همونطور که دیدید با درگ کردن نشانه، Window نیز همراه با اون جابجا میشه. همونطور که دیدید در ویژگی content میتونیم کدهای HTML هم وارد کنیم و درون Window نمایش بدیم. شما میتونین خودتون کد CSS هم قرار بدین و به این کدها استایل بدین. در نهایت با استفاده از کد زیر Window را به Marker متصل کردیم:
infowindow.open(map,marker); |
همونطور که دیدید با استفاده از open، باکس infoWindow ساخته شده رو به نشانه موجود بر روی نقشه نسبت دادیم. چون که این کار رو انجام دادیم و اون نشانه خودش مختصات داره، دیگه لازم نیس که برای Window خودمون از ویژگی position استفاده کنیم.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 313
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403