خیلی از ما با سرویس نقشه های گوگل (Google Maps) آشنا هستیم. این سرویس در ویکی پدیا اینگونه تعریف شده است:
گوگل مپس (به انگلیسی: Google Maps، به معنی: نقشه‌های گوگل) یک محصول وب از شرکت گوگل است. در گوگل مپس، نقشه‌های دقیق و کاملی از زمین ارائه می‌گردد. گوگل مپس از فن‌آوری‌هایی چون Tele Atlas استفاده می‌کند.
گوگل مپس این امکان را برای مدیران و برنامه نویسان وب سایت ها فراهم کرده است تا با استفاده از API آن، نقشه های موجود را به دلخواه در وب سایت خود نمایش دهند. در حال حاضر، گوگل رابط های زیر را ارائه می کند:
در ادامه شروع کار با Google Maps JavaScript API V3 را با هم بررسی می کنیم.
برای استفاده از این سرویس در وب سایت یا وبلاگ خود، قبل از هر چیز باید کلید لازم برای ارتباط دامنه خود با گوگل را بدست بیاورید. البته این کلید فقط در برخی مواقع ضروری است. دریافت این key با ثبت نام در Google Maps API براحتی از طرف گوگل برای شما نمایش داده می شود.
ساده ترین نوع پیاده سازی (برنامه Hello, World)
[html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%
}
</style>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(35.695964, 51.417704);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
[/html]
کدهای بالا خیلی گویا هستند ولی چند نکته برای توجه وجود دارد:
• با استفاده از <!DOCTYPE html> مشخص کردیم که مرورگر این صفحه را با استانداردهای html5 پردازش کند.
• کدهای مربوط به API را در داخل تگ script قرار دادیم.
• یک div با شناسه "map_canvas" برای نشان دادن نقشه در نظر گرفتیم.
• با استفاده از اتریبیوت onload تگ body، نقشه را initialize یا مقداردهی اولیه کردیم.
اطلاعات بیشتر در Google Maps Javascript API V3 Tutorial ارائه شده است.
همین مراحل برای نمایش نقشه زیر کافیست:
یکی از کارهایی که در حال انجام آن هستم، پیاده سازی مراکز پوشش اینترنت توسط یکی از شرکت های ارائه دهنده خدمات اینترنتیست. نمونه اولیه این کار را در زیر مشاهده می فرمایید:
پیوندها
- Google Maps
- Google Maps API Family
- Sign Up for the Google Maps API
- Google Maps Javascript API V3 Basics
- Google Maps Javascript API V3 Tutorial
- Google Maps Javascript API V3 Demo Gallery
پی نوشت
در صورتی که موفق به دیدن نقشه ها نشدید، از فیلترشکن برای دیدن آنها استفاده کنید. به دلیل تحریم، بعضی از خدمات گوگل بر روی کاربران ساکن ایران، محدود می باشد.
همیشه شاد، و موفق باشید ;)
سلام
پاسخحذفبه دنبال نقشه های گوگل و استفاده بدون سرور گوگل هستم.
سایتی راه اندازی کردم به نشانی www.iran-gard.ir که می خوام اطلاعات بسیاری و درونش قرار بدم و برای راحتی استفاده کاربر ها از نقشه ها استفاده کنم ولی از اونجایی که شرکت گوگل تمام این اطلاعات و از ما میگیره و در نهایت کاربران ایرانی و تحریم میکنه، برنامه هاش و در دسترسمون نمیذاره و با پررویی نام خلیج فارس و از نقشه حذف می کنه و ... نمی خوام این اطلاعاتی که با تلاش بسیار جمع آوری کردم در اختیار گوگل قرار بگیره.
در صورت امکان راهنمایی کنید که چگونه باید این کار و انجام بدم؟ اونچه که احتیاج دارم قرار دادن نقشه ها در سایت، امکان اضافه کردن مشخصات مورد نیاز برای نقطه های مختلفه. چیزی که در نهایت ایران گردی و برای همه آسان کنه تا حدی که به راحتی از تمامی مناطق و چگونگی رسیدن به اون ها هر کاربری به راحتی مطلع بشه.
پیشاپیش از توجه شما تشکر می کنم
شاد باشی
چیزی شبیه به سایت http://map.tehran.ir/fa البته با امکاناتی بیشتر
پاسخحذفسلام،
پاسخحذفمی تونین از سرویس‌های آزاد استفاده کنین:
http://www.openstreetmap.org/
ممکنه اطلاعاتش کمتر از گوگل باشه ولی آزاد و رایگان بودنش خیلی خوبه.
دست گلت درد نکنه :)
پاسخحذفسلام.من دارم رو یه سخت افزار جی پی اس برای نصب رو رباتم کار می کنم که هر چند سانیه یک بار مختصات محل ربات رو به یه پایگاه اینترنتی ارسال می کنه.این مطلب شما خیلی بهم کمک کرد که ایده اولیه پایگاه اینترنتی تو ذهنم به وجود بیاد.لطفا می شه راهنمایی کنید چجوری میتونم یه علامت ، نقطه یا عکس رو مثلا یه عکس gif چشمکزن رو تو اون مختصاتی که واسه نمایش تنظیم کردیم دقیقا تو اون نقطه نمایش بدم که محل کنونی ربات رو نمایش بده ؟ آیا هر بار که مختصات جدید ارسال میشه لازمه که صفحه رفرش بشه ؟ من زیاد برنامه نویسی بلد نیستم.اگه ممکنه یه مثال عملی واسم بزنید
پاسخحذفسلام،
پاسخحذفبرای گذاشتن عکس در یک مختصات خاص، به راهنماهای زیر از مستندات گوگل و لینک های مرتبط در آنها مراجعه کنین:
https://developers.google.com/maps/documentation/javascript/overlays?hl=en#drawing_tools
https://developers.google.com/maps/documentation/javascript
به جای رفرش کردن کل صفحه، میتونین از تکنولوژی ای‌جکس (AJAX) استفاده کنین.
ممنون از پاسختون.من چند خط برنامه خیلی ساده نوشتم که بعد از لود صفحه یه باکس ظاهر می شه و از کاربر مختصات رو می خواد و بعد از تایید نمایش داده می شه.اما جواب نمیده اگه ممکنه بگید ایراد کار از کجاس ؟
پاسخحذفhttp://flickfa.com/i/upload/1/1352304212.zip
سلام،
پاسخحذفپیشنهاد میکنم قبل از ارسال سوالاتی از این قبیل مطلب زیر رو مطالعه کنین:
چگونه هوشمندانه سوال کنیم:
http://wiki.ubuntu-ir.org/SmartQuestions
سلام من دارم یک سایت طراحی میکنم که باید اطلاعات کامل رو از یک gps بگیره و در سایت نمایش بده هیچ آشنایی قبلی با طراحی این جور سایت ها ندارم میشه یه کم من رو راهنمایی کنید که چطور باید از google maps استفاده کنم.
پاسخحذفسلام لطفا جواب بدید نیاز فوری دارم
پاسخحذفسلام،
پاسخحذفمتاسفانه من در این زمینه تجربه ای ندارم.
منم علاقمند به طراحی چنین سایتیم.با ایمیل من تماس بگیرید.sina.vadodi@gmail.com
پاسخحذففقط علاقمند هستیدیا تا حالا طراحی هم کردید؟ یعنی من میتونم همین جا ازتون راهنمایی بخوام؟ آقای زبردست که هیچ جوابی ندادن!
پاسخحذفسلام،
پاسخحذفشما اگه دقت میکردین میدین که من جواب دادم و نوشتم:
متاسفانه من در این زمینه تجربه ای ندارم.
بله ببخشید من دقت نکردم
پاسخحذفسلام میشه بگید چطور سایتتون رو این قدر خوب دو زبانه کردید که اصلا فونتش به هم نمی ریزه؟
پاسخحذفسلام،
پاسخحذفکدوم بخش سایت منظورتونه؟ سایت تمام انگلیسم یا متون انگلیسی که در همین وبلاگ هستند؟
سایت تمام انگلیسی
پاسخحذفالبته سایت تمام انگلیسی که بالای همین وبلاگ لینکش رو گذاشتید
پاسخحذفسلام،
پاسخحذفاون سایت قالب و محتواش کاملا از این وبلاگ فارسی جدا هست. در نتیجه فونت‌ها و تنظیمات برای زبان انگلیسی صورت گرفتن.
سلام,
پاسخحذفممنون از جوابتون.میشه یه توضیح بدید برای اینکه سایتم با دو تا قالب load بشه باید چیکار کنم؟
در اصل اینها دو تا نرم افزار هستن که در آدرس های مختلف نصب شدن.
پاسخحذفWonderful beat ! I would like to apprentice while you amend your web site, how could i
پاسخحذفsubscribe for a blog website? The account aided me a acceptable deal.
I had been tiny bit acquainted of this your broadcast provided bright clear idea
My blog obama health care plan explained
سلام و درود بر شما
پاسخحذفمن قصد دارم از سامانه هواشناسی openlayer برای سایتم استفاده کنم و علاقمند هستم در صفحه اول نمایش داده بشه!
کدها و اسکریپت ها رو دارم ولی نمی دونم در کجا باید قرارشون بدم، منظورم در وردپرس در کدوم بخش ویرایشگر باید قرار بگیرن !
میشن اظهار لطف کنید و به من توضیح بدید.
خیلی ممنون از شما
سلام ، من می خواستم سایتی شبیه سایز نذری یاب طراحی کنم اگر می شه راحنمایی فرمایید
پاسخحذفhttp://nazriyab.ir/?tehran
سلام، آقای زبردست چگونه می توانیم برای ورود به سایت (sign in) از google استفاده کنیم؟
پاسخحذفچیزی شبیه به این sign in with google
به این شکل کاربر وارد اکانت گوگل (جیمیل) خود بشود و از این طریق بتوان کاربر را شناسایی کرد(Authorization)
مانند سایت هایی مثل stackoverflow.com که در آنها کاربر می تواند برای ورود به پروفایل خود از اکانت های google ، facebook ،yahoo و... استفاده کند
سلام،
پاسخحذفدر صفحه زیر، از سایت گوگل، راهنمای لازم برای پیاده‌سازی این سیستم مشخص شده:
https://developers.google.com/accounts
سلام
پاسخحذفمن برای انجام پایان نامم که توسعه ی یک وب سرویس مکانی هست می خوام از google map api استفاده کنم. API key رو که می ذارم در کد html ، گوگل مپ میاد بالا اما بعد چند ثانیه این خطا رو بروزر میاد:
Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key
چه کار باید کرد؟ (روی لوکال هاست تستش می کنم)
سلام،
پاسخحذفلوکال هاست رو چطور باز میکنید؟ با http://localhost یا file://FILE_ADDRESS؟ لوکال هاست رو با پورت باز میکنید یا بدون پورت؟
لینک های زیر رو ببینید:
https://stackoverflow.com/questions/10966668/the-key-provided-is-not-a-valid-google-api-key
و
https://groups.google.com/forum/#!topic/Google-Maps-API/Q5wGjM4zzhY
سلام.
پاسخحذفمن هر چی سعی میکنم نقشه رو روی سایت نشون بدم از آخرین درجه بک زوم (همه قاره ها پیداست) رو سایت نشون میده و باید دستی زوم کنم
چاره کار چیه؟؟؟