چگونگی استفاده از نقشه‌های گوگل در سایت؟
در انتهای این اموزش شما باید بتوانید چنین صفحاتی را به راحتی بسازید
نقشه های گوگل (google maps) از قابلیت های جالبی است که گوگل به رایگان در اختیار کاربران قرار میدهد
با استفاده از این قابلیت شما میتوانید عوارض طبیعی جاده ها عکس های هوایی راه ها میزان ترافیک و… را مشاهده کنید
یک نمونه را با هم میسازیم و در ادامه خواص و توانایی های این سیستم را برسی میکنی
در صورتی که کمی جاوا اسکریپت بدانید سریع تر میتوانید این بخش را یاد بگیرید اما اگر هم نمیدانیم همراه با اموزش قدم قدم پیش روید
تا مطالب را کامل بیاموزید کد را بزنید که در ادامه نوشته شده و خروجی بگیرید بعد توضیحات ادامه را بخوانید
تا در صورت مشکل یا عدم درک بتوانید مشکل را حل کنید و به شکلی که میخواهید کد را بهبود دهید
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(32.5848, 56.515777),
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions)
}
google.maps.event.addDomListener(window, 'load', loadMap)
</script>
</head>
<body>
<div id = "mymap" style = "width:500px; height:400px;"></div>
</body>
</html>
خروجی مانند عکس بالا خواهد بود
توضیح کد
اول باید api جاوا اسکریپتی مربوط به گوگل را وارد کنید
<script src = "http://maps.googleapis.com/maps/api/js"></script>
درگام بعد یک مخزن در قسمت body برای نمایش نقشه ی گوگل ایجاد میکنیم
<div id = "mymap" style = "width:500px; height:400px;"></div>
قدم بعد تنظیمات نقشه است که در ادامه توضیح داده میشود
function loadMap() {;
var mapOptions = {
center:new google.maps.LatLng(32.5848, 56.515777),
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);
}
یک تابع با نام loadMap تعریف کردید
که در ان شی با نام mapOptions که این نام دلخواه است تعریف کردید
و یک شی دیگر با نام map تعریف کردید
در قسمت mapoptions
این 3 خاصیت اصلی نقشه را معرفی و مقدار دهی کردید
1-center : برای این ویيکی باید مختصات مکانی را که میخواهید در نقشه نمایش داده شود را وارد کنید برای وارد کردن مختصات مکان مورد نظرمون باید یک شی از نوع latlan بسازیم و عرض و طول چقرافیایی را برای ان مشخص کنیم
2- zoom : میزان بزرگنمایی نقشه را در این بخش مشخص میکنیم
3- maptupeld: برای این ویژگی باید نوع نقشه ای که باید در سایتمان قرار بگیرد را مشخص کنیم که بصورت پیش فرض ROADMAP است که نمایی از جاده ها و خیابان ها را نمایش میدهد
در ادامه مثالهایی از هر کدام خواهیم داشت که با استفاده از انها بیشتر اشنا شودید
در قسمت تعریف شی map
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions)
برای ساخت نقشه باید یک شی از کلاس google.maps.map بسازیم که 2 مقدار ورودی میگیرد یکی همان مخزن نمایش دهنده ی نقشه (یعنی همان div که میخواهیم نقشه در ان نمایش داده شود) و دومی همان شی mapoptions که تنظیمات نقشه را در ان مشخص کرده ایم
در گام آخر باید نقشه را لود کنید
که مشخص میکنیم زمانی که سایتمان لود شد تابع loadmap که ساختیم اجرا شود و همان طور که میبینید ورودی سوم نام تابعی است که میخواهیم اجرا شود
google.maps.event.addDomListener(window, 'load', loadMap)
چه نوع نقشه هایی را میتوان به کاربر نمایش داد؟
4 دسته ی اصلی نقشه ها که میتوان به کاربران نمایش داد را در زیر برای شما همراه با توضیح قرار داده ا
1-SATELLITE :گزینه ی مورد علاقه ی من نمای ماهواره ای است که تمام موارد در محیط بصورت عکس هوایی و ماهواره ای قابل دسترس است اگر قبلا با نرم افزار گوگل ارث کار کرده باشید دقیقا مشابه ان نرم افزار خروجی خواهید داشت
2-ROADMAP : گزینه ی پیش فرض است که نمایشی از راه ها خیابان ها کوچه ها و.. را به شما میدهد
3-HYBRID : این گزینه ترکیب 2 گزینه ی قبل است یعنی روی نقشه های ماهواره ای جاده ها و راه های اصلی را مشخص میکند روش جالبیست البته اگر به نقشه محل اشنا نباشید شاید کمی گیج کننده باشد این ترکیب اما بسیار جذاب است
4-TERRAIN :در صورتی که بخواهید نقشه ای مربوط به پوشش گیاهی عوارض زمین رودخانه ها و… را مشاهده کنید از این نقشه استفاده کنید
روش استفاده از این نقشه ها به چه صورت است ؟
درصورتی که بخواهید از این نقشه ها در نرم افزارتان استفاده کنید باید فقط یک خط از کد را ویرایش کنید
mapTypeId:google.maps.MapTypeId.ROADMAP
در مثال زده شده از نوع نقشه ی ROADMAP استفاده شده در صورتی که بخواهید از نقشه ی دیگری استفاده کنید باید اخر این خط را تغییر دهید به عنوان مثال میخواهید نقشه را از نوع ماهواره ای تعریف کنید کافیست اخر این خط را به جای ROADMAP به SATELLITE تغییر دهید به این صورت
mapTypeId:google.maps.MapTypeId.SATELLITE
برای TERRAIN
mapTypeId:google.maps.MapTypeId.TERRAIN
و برای HYBRID هم به همین شکل
mapTypeId:google.maps.MapTypeId.HYBRID
ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود
[member]
نمای کلی از کد
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(32.5848, 56.515777),
zoom:4
mapTypeId:google.maps.MapTypeId.SATELLITE
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions)
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "mymap" style = "width:100%; height:500px;"></div>
</body>
</html>
چگونه میتوانیم زبان این نقشه را به فارسی تغییر دهیم؟
میتوانیم به راحتی زبان پیش فرض این نقشه را به فارسی تغییر دهیم فقط کافیست که api جاوااسکریپتی این کد را به شکل زیر تغییر دهیم
یعنی از این شکل
<script src = "http://maps.googleapis.com/maps/api/js"></script>
به این شکل تغییر دهیم
<script src = "https://maps.googleapis.com/maps/api/js?language=fa"></script>
لیست زبانهایی که میتوانیم از انها استفاده کنیم برای فارسی fa است پس به شکل بالا language را برابر با fa قرار میدهیم
برطرف کردن مشکل نقشه ها در سایت
این کدها بر روی لوکال بدون هیچ مشکلی اجرا میشوند اما زمانی که کد را بر روی سرور اپلود کردید با مشکل مواحه میشوید برای انکه مدتی است گوگل اجازه نمیدهد که بدون داشتن api key از این سرویس در سایت ها استفاده کنید خوشبختانه گرفتن این کلید رایگان است ولی بدلیل تحریم ها پیشنهاد میشود ای پی خود را تغییر دهید تا در زمان گرفتن کد دچار مشکل نشوید بعد از گرفتن API کد دیگر هیچ گاه با مشکل برای استفاده از این نقشه های مواجه نخواهید شد
به این ادرس در سایت گوگل بروید
https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key
روی دکمه ی get a key کلیک کنید
در کادر به نمایش در امده یک نام دلخواه وارد کنید و روی دکمه ی enable API کلیک کنید
درپنجره ی بعد کد api به شما داده میشود
چگونه کد api را به کد های خو اضافه کنیم ؟
فقط کافیست
<script src = "https://maps.googleapis.com/maps/api/js?language=fa"></script>
را به کد زیر تغییر شکل دهید
<script src = "https://maps.googleapis.com/maps/api/js?language=fa&key=AIzaSyAKefvkV0v696yGIlPgh2fzLw3ohN982U0"></script>
یعنی کافیست به این شکل عمل کنید کد دریافتی = key میبینید که خواص را با & از هم جدا کردیم
و هم زبان را به فارسی تغییر دادیم و هم API KEY را مشخص کردیم حال فقط کافیست کد را اپلود کنید و به راحتی از ان استفاده کنید
مانند این صفحه باید مثال قبل شده باشد
کد به شکل زیر باید تغییر کرده باشد
<!DOCTYPE html>
<html>
<head>
<script src = " https://maps.googleapis.com/maps/api/js?language=fa&key=AIzaSyAKefvkV0v696yGIlPgh2fzLw3ohN982U0"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(32.5848, 56.515777)
zoom:5
mapTypeId:google.maps.MapTypeId.HYBRID 
fullscreenControl: true
}
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions)
}
google.maps.event.addDomListener(window, 'load', loadMap)
</script>
</head>
<body>
<div id = "mymap" style = "width:100%; height:700px;"></div>
</body>
</html>
افزودن خواص به google map چگونه است؟
به عنوان مثال خاصیت فول اسکرین فقط کافیست fullscreenControl: true را در کد اضافه کنید به این صورت
<script>
function loadMap() {;
var mapOptions = {
center:new google.maps.LatLng(32.5848, 56.515777),
zoom:5
mapTypeId:google.maps.MapTypeId.HYBRID,
fullscreenControl: true
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
چگونه مختصات نقطه ای را که میخواهم نقشه ی گوگل نمایش دهد را پیدا کنم ؟
کافیست به ادرس
maps.google.com
و روی نقشه به ادرسی که میخواهید بروید و روی انجا راست کلیک کنید گزینه ی what’s Here را انتخاب کنید و طول و عرض جغرافیایی به شما داده میشود
حال همین مقادیر را وارد کد میکنم با زوم 20 که باید میدان ازادی را نمایش دهد
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js?language=fa&key=AIzaSyAKefvkV0v696yGIlPgh2fzLw3ohN982U0"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(35.699698, 51.336909),
zoom:20
mapTypeId:google.maps.MapTypeId.HYBRID;
fullscreenControl: true
var map = new google.maps.Map(document.getElementById("mymap"),mapOptions)
google.maps.event.addDomListener(window, 'load', loadMap)
</script>
</head>
<body>
<div id = "mymap" style = "width:100%; height:700px;"></div>
</body>
</html>
[/member]
مطالب زیر را حتما مطالعه کنید
دوره های آموزشی مرتبط
9 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.
اموزش های بیان شده کاربردی زیاد در خصوص زندگی روزمره دارند و می تواند موفقیت کار را بیشتر و بهتر از قبل نماید