نویسنده: علی سادات طلب
Google Maps یکی از سرویس های پرطرفدار گوگل در میان کاربران خود است، شما می توانید به راحتی با مراجعه به آدرس اینترنتی maps.google.com و وارد نمودن آدرس مورد نظر خود البته به صورت استاندارد یعنی وارد نمودن خیابان شهر و کشور با جداکننده سمی کالن محدوده مورد نظر خود را پیدا کنید.
گوگل نقشه ها را به چند صورت برای کاربران فراهم می کند که شامل تصاویر ماهواره ای،نقشه راه های شهری،ترکیب تصاویر ماهواره ای نقشه راه های شهری و در نهایت عوارض زمین می باشد.
شاید متوجه شده باشید که اطلاعات راه ها در نقشه های گوگل داری نواقص و بعضا اشتباهاتی هستند که البته این قضیه در ایران بغرنج تر است. زیرا بخش اعظمی از اطلاعات نقشه گوگل از طریق مشارکت کاربران تامین می شود و این به علت نا آگاهی از چگونگی تکمیل نقشه گوگل(در پست های بعدی به چگونگی مشارکت و تکمیل نقشه گوگل اشاره خواهم نمود) و در مواردی عدم تمایل کاربران ایرانی به مشارکت در تکمیل این نقشه باز می گردد.
البته این نکته را خاطر نشان می کنم که هم اکنون در شهر های بزرگ ایران مانند تهران و اصفهان و مشهد بخش قابل توجهی از نقاط شهری در نقشه گوگل تکمیل شده که این خود بسیار ارزشمند است.
موضوع اصلی که در این پست قصد اشاره به آن را داشتم چگونگی بکارگیری و فراخوانی آسان نقشه گوگل در یک سایت دیگر است.
برای این کار باید دست به کار شوید و کمی از کدهای جاوا اسکریپتی در صفحتان استفاده نمایید.
برای استفاده از نقشه گوگل شما باید از Google Maps API کمک بگیرید.
Google Map API مجموعه ابزارهایی را برای کار کردن و استفاده کردن از قابلیت های نقشه های گوگل فراهم می کند.
در حال حاضر آخرین نسخه از این API ورژن ۳ آن است که برای مرورگرهای دستگاه های موبایل بهینه شده است
در ذیل لیستی از مرورگر های پشتیبانی شده توسط نسخه های ۲ و ۳ آورده شده است:
Google Maps JS API v2: • IE 6.0+ (Windows) • Firefox 2.0+ (Windows|Mac|Linux) • Safari 3.1+ (Mac|iPhone) • Chrome (Windows)
Google Maps JS API v3: • IE 7.0+ (Windows) • Firefox 3.0+ (Windows|Mac|Linux) • Safari 4+ (Mac|iPhone) • Chrome (Windows|Mac|Linux) • Android
ما در اینجا از نسخه ۳ استفاده می کنیم چون نسخه ۲ برای راه اندازی نیاز به دریافت API KEY از سایت گوگل دارد.
در ذیل گام به گام با هم یک نقشه گوگل در صفحه سایت خود ایجاد می کنیم.
گام اول:
ایجاد یک تگ در صفحه با یک ID مشخص مثلا myMap با طول و عرض از تایین شده
<div id="myMap" style="width:300px; height:300px"> </div>
گام دوم:
افزودن تگ اسکریپت در میان تگ برای دریافت هسته جاوا اسکریپتی نقشه گوگل در صفحه
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
گام سوم: ایجاد یک تابع جاوا اسکریپتی برای ایجاد و تنظیم شیء نقشه گوگل از هسته فرآخوانی شده در اینجا بسته به اینکه ما بخواهیم چه کاری انجام دهیم تنظیمات و دستورات متفاوت خواهد بود.
<script type="text/javascript">
function initMap() {
var latlng = new google.maps.LatLng(35.749873, 51.387241);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("myMap"),
myOptions);
}
</script>
یکسری از پارامترهای نقشه که در اکثر مواقع باید لحاظ شود مواردی چون موقعیت طول و عرض جغرافیایی که نقشه در ابتدا نشان خواهد داد، میزان زوم روی تصویر نقشه و نوع نقشه مورد نظر(مثل ماهواره ای یا شهری) می باشد.
خط اول تابع جاوا اسکریپتی initMap متغیری با نام latlng تعریف می کند که در آن نمونه از شی موقعیت طول و عرض جغرافیایی نقشه گوگل ایجاد می نماید.
خط دوم تابع شیی به نام myOptions تعریف می کند که مشخصاتی پیش فرض از نقشه گوگل مورد نظر ما را در خود نگه می دارد.
بخش پایانی تابع نمونه ای از شی اصلی نقشه گوگل ایجاد کرده و پارامترهای عنصر نگه دارنده نقشه(تگ با ای دی myMap) و مشخصات نقشه(myOptions) را به عنوان پارامتر به کلاس سازنده شی نقشه گوگل ارسال می کند.
گام چهارم:
تنها کافیست برای فرآخوانی تابع initMap در صفحه آن را در فرآخوان رویداد onload تگ body در صفحه قرار دهید.
<body onload="initMap()">
گام پنجم:
کافیست صفحتان را در مرورگر خود باز کنید تا نقشه شگفتی ساز گوگل را با چشم ببینید!
نقشه شهری تهران با استفاده از گوگل مپ
به همین سادگی
کد کامل شده:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initMap() {
var latlng = new google.maps.LatLng(35.749873, 51.387241);
var myOptions = {
zoom : 12,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("myMap"), myOptions);
}
</script>
</head>
<body onload="initMap()">
<div id="myMap" style="width:300px; height:300px"></div>
</body>
</html>
برچسب ها: نقشه گوگل
من این برنامه رو در notepad اجرا کردم اما فقط فضای داده شده رو نشون داد و گوگل ارث لود نشد
لطفا راهنمایی کنید
دوست عزیز نجمه،
در کد قرار داده شده یک پرانتز از قلم افتاده بود که باعث ایجاد مشکل در لود نقشه می شد.
شما می توانید از کد کامل شده این بخش استفاده کنید.
از اینکه به این مطلب توجه کردید بسیار سپاسگذاریم.
khaste nabashi khyli khub bud
salam…..matlabe besyar jalebi bud….merci…..khoshhal mishim be site ma ham sari bezanid…
سلام.من دارم رو یه سخت افزار جی پی اس برای نصب رو رباتم کار می کنم که هر چند سانیه یک بار مختصات محل ربات رو به یه پایگاه اینترنتی ارسال می کنه.این مطلب شما خیلی بهم کمک کرد که ایده اولیه پایگاه اینترنتی تو ذهنم به وجود بیاد.لطفا می شه راهنمایی کنید چجوری میتونم یه علامت ، نقطه یا عکس رو مثلا یه عکس gif چشمکزن رو تو اون مختصاتی که واسه نمایش تنظیم کردیم دقیقا تو اون نقطه نمایش بدم که محل کنونی ربات رو نمایش بده ؟ آیا هر بار که مختصات جدید ارسال میشه لازمه که صفحه رفرش بشه ؟ من زیاد برنامه نویسی بلد نیستم.اگه ممکنه یه مثال عملی واسم بزنید
سلام
دوست عزیز من نمی دونم شما تا چه حد با مسایل تکنیکی وب آشنا هستید
راه حال مشکل شما با چند خط کد جاوا اسکریپت و ای جکس حل خواهد شد مثلا شما باید هر ۵ ثاتیه یکبار یک درخواست ای جکس به سرور خود بزنید و آخرین مختصات را از آن دریافت نمایید سپس از طریق توابع گوگل پین نقشه را بدون رفرش کردن صفحه جابجانمایید.
ممنون میشه یه مثال عملی بزنید.مثلا شما می تونید مختصات رو از یه تکست باکس بگیرید فقط بگید چجوری مختصات رو با یه نشانگر بدون رفرش نمایش بدم.بخش ارسال و دریافت مختصات رو خودم ردیف می کنم.
سلام
ظاهرا پیوندها فایل های js گوگل مپ رو فیلتر کرده راه حلی دارین که این مشکل رو حل کرد؟
مثلا این لینک رو تو مرورگرتون بزنید
http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/14/main.js
می بینید که فیلتر هست
این فایل جاوا اسکریپت اصلی گوگل مپ هست
اگه راهی پیدا کردین به ایمیل من خبر بدین ممنون
sepehr.sy@gmail.com
اینکه فیلتر نیست !
راهی پیدا نمیشه برای فیلتر بودن ؟
می تونید به صورت سرور ساید فایل js گوگل مپ رو دریافت کنید و اون رو برای کلاینت خودتون فراهم کنید
اقا دمت گرم
سلام داداش جون
خیلی عالیه. فقط یه سوال: چطور میشه این نقشه را fullscreen کرد و بعد با login شدن بشه این رو دیدی. البته مدیر یه سری جاها رو مشخص کرده باشه، مثلا سامانه کتابفروشیهای عضو رو به مشتری ها در یک صفحه کامل نشون بده!!!!
سلام،
شما به راحتی می تونی از نقشه به صورت فول اسکرین استفاده کنی کافیه که با جاوا اسکریپت ابعاد اسکرین کاربر رو دریافت کنی و اون رو قبل از اینیشیالایز کردن مپ به المنت مپ بدی
در مورد نقاط روی نقشه هم می تونی تمامی نقاط مد نظرت رو که مختصات جغرافیایی اون ها رو قبلا ذخیره کردی از طریق ای پی آی گوکل و متد مورد نظر روی نقشه نمایش بدی
میشه در مورد این که چطور میشه مکانهای خاصی رو روی نقشه ای که توی سایتمون هست اضافه کنیم، بیشتر توضیح بدین، من میخوام چند تا مکان خاص رو روی نقشه نشون بدم.
در ضمن میخواستم بدونم میشه افلاین هم از نقشه ای که روش این تغییرات رو دادم استفاده کرد.ممنونم
شما می تونید به هر تعداد موقعیت دلخواه خودتون رو به نقشه به صورت پین های رنگی (مارکر) اضافه کنید،
برای این کار باید هر پین رو به صورت جداگانه با دادن مختصات جغرافیایی اون بسازید و اون ها رو از طریق متد مربوطه به نقشه بدید
مثال
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
[...] شما می توانید نظرات این مطلب را با استفاده از خوراک RSS 2.0 دنبال [...]
با سلام ..ببخشید .. خیلی عالی بود ..فقط ..
چه جوری میشه مکان اولیرو اعلام کرد مثلا میخام کل ایران اول نشون داده بشه و آیا میشه مثلا رو شهر کاشمر یه علامت گذاشت که لینک دارم باشه ….میشه یا نه ممنون
سلام،
دوست گرامی شما به راختی می تونید این کار رو انجام بدید بهتره که نگاهی به API گوگل بندازید
https://developers.google.com/maps
شما می تونید به نقشه بگید که موقعیت ایران رو لود کنه و در اون مپ لود شده مختصات طول و عرض جغرافیاییه مثلا کاشمر رو که قبلا در آوردید از طریق متدهای آبجکت مپ گوگل برای ساختن پین نقشه در موقیت کاشمر استفاده کنید
با سلام و تشکر از مطلب خیلی ساده و مفید
لطفا در مورد افزودن مکان در نقشه توضیح بدین .
من در گوگل میکر تونستم چند تا تغییر در نقشه بدم البته هنوز در حالت انتظار هست نمیدونم بر چه مبنایی چک میشه !!
دوست عزیز گوگل مپ میکر در شهرها و کشورهای مختلف یکسری ادمین داره که با اون محدوده آشنا هستند و از طریق نقشه های شهری تغییرات رو approve می کنند ولی این کار در برخی مواقع کمی طول می کشه
با سلام متشکرم از مطلب مفیدی که قرار دادین خیلی خوب بود واقعا لذت بردم