در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در این جلسه میخایم اولین نقشه رو از ابتدا با هم دیگه در سایتمون لود کنیم و مراحل اون رو به ترتیب خدمتتون بگیم.
در ابتدا یک فایل با نام مثلا index.html بسازید و کدهای ساده زیر رو درون اون قرار بدین:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html>
<head> </head>
<body> .............. </body>
</html> |
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script> </head>
<body> .............. </body>
</html> |
همونطور که میبینید با استفاده از تگ Script این کار رو انجام دادیم و آدرس مربوطه رو وارد کردیم.
برای اینکه نقشه رو درون سایتمون قرار بدیم، در ابتدا باید جای اون رو مشخص کنیم و بگیم که کجا میخاد نمایش داده بشه. برای اینکار در ابتدا باید یک container بسازید. معلوما این Container همون تگ div هست که نقشه درونش قرار میگیره.
<div id = "sample" style = "width:900px; height:580px;"></div> |
میبینید که id اون رو برابر با sample قرار دادیم و با استفاده از ویژگی style برای اون طول و ارتفاع رو مشخص کردیم.
قبل از قرار دادن نقشه، باید یک شئ بنام mapOptions بسازیم و تنظیمات نقشه مورد نظرمون رو درون اون قرار بدیم. یک نقشه سه مورد کلی و عمده برای تنظیم کردن داره که عبارتند از:
در جلسه بعد بیشتر در مورد هر کدوم توضیح میدیم و برای هر کدوم مثالی میاریم.
حالا وقتشه که این موارد رو مقدار دهی کنیم. در ابتدا یک تابع بنام loadMap میسازیم و شئ بیان شده رو در اون قرار میدیم:
1 2 3 4 5 6 7 | function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:12, mapTypeId:google.maps.MapTypeId.ROADMAP }; } |
میبینید که سه ویژگی مورد نظر رو مقدار دهی کردیم.
برای ساخت نقشه شما باید ابتدا از شئ google.maps.Map یک نمونه با استفاده از عملگر new بسازید. برای اینکار باید دو ورودی رو به اون وارد کنید. ورودی اول همون Container هست که قرار هست نقشه درون اون قرار بگیره. ورودی دوم هم همون شئ mapOptions هست که تنظیمات نقشه رو مشخص میکنه.
var map = new google.maps.Map(document.getElementById("sample"),mapOptions); |
در پایان شما باید نقشه مورد نظرتون رو لود کنید. برای اینکار ما مشخص میکنیم که زمانی که سایتمون بصورت کامل لود شد، تابع loadMap که ساختیم اجرا بشه. برای اینکار از Event ها استفاده میکنیم:
google.maps.event.addDomListener(window, 'load', loadMap); |
میبینید که بعنوان ورودی سوم، نام همون تابعی که قصد اجرا شدنش رو داریم وارد کردیم.
کل کدها در نهایت بصورت زیر خواهد شد:
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 | <!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.609993, 83.221436), zoom:12, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("sample"),mapOptions); } google.maps.event.addDomListener(window, 'load', loadMap); </script>
</head>
<body> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر هست:
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 265