۱۳۸۹/۱۰/۱۹

شروع کار با Google Maps API

سلام :)
خیلی از ما با سرویس نقشه های گوگل (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 ارائه شده است.

همین مراحل برای نمایش نقشه زیر کافیست:




یکی از کارهایی که در حال انجام آن هستم، پیاده سازی مراکز پوشش اینترنت توسط یکی از شرکت های ارائه دهنده خدمات اینترنتیست. نمونه اولیه این کار را در زیر مشاهده می فرمایید:






Opacity: 25%   50%   100%




پیوندها

پی نوشت
در صورتی که موفق به دیدن نقشه ها نشدید، از فیلترشکن برای دیدن آنها استفاده کنید. به دلیل تحریم، بعضی از خدمات گوگل بر روی کاربران ساکن ایران، محدود می باشد.

همیشه شاد، و موفق باشید ;)

۳۰ نظر:

  1. سلام
    به دنبال نقشه های گوگل و استفاده بدون سرور گوگل هستم.
    سایتی راه اندازی کردم به نشانی www.iran-gard.ir که می خوام اطلاعات بسیاری و درونش قرار بدم و برای راحتی استفاده کاربر ها از نقشه ها استفاده کنم ولی از اونجایی که شرکت گوگل تمام این اطلاعات و از ما میگیره و در نهایت کاربران ایرانی و تحریم میکنه، برنامه هاش و در دسترسمون نمیذاره و با پررویی نام خلیج فارس و از نقشه حذف می کنه و ... نمی خوام این اطلاعاتی که با تلاش بسیار جمع آوری کردم در اختیار گوگل قرار بگیره.

    در صورت امکان راهنمایی کنید که چگونه باید این کار و انجام بدم؟ اونچه که احتیاج دارم قرار دادن نقشه ها در سایت، امکان اضافه کردن مشخصات مورد نیاز برای نقطه های مختلفه. چیزی که در نهایت ایران گردی و برای همه آسان کنه تا حدی که به راحتی از تمامی مناطق و چگونگی رسیدن به اون ها هر کاربری به راحتی مطلع بشه.

    پیشاپیش از توجه شما تشکر می کنم

    شاد باشی

    پاسخحذف
  2. چیزی شبیه به سایت http://map.tehran.ir/fa البته با امکاناتی بیشتر

    پاسخحذف
  3. سلام،

    می تونین از سرویس‌های آزاد استفاده کنین:
    http://www.openstreetmap.org/

    ممکنه اطلاعاتش کمتر از گوگل باشه ولی آزاد و رایگان بودنش خیلی خوبه.

    پاسخحذف
  4. سلام.من دارم رو یه سخت افزار جی پی اس برای نصب رو رباتم کار می کنم که هر چند سانیه یک بار مختصات محل ربات رو به یه پایگاه اینترنتی ارسال می کنه.این مطلب شما خیلی بهم کمک کرد که ایده اولیه پایگاه اینترنتی تو ذهنم به وجود بیاد.لطفا می شه راهنمایی کنید چجوری میتونم یه علامت ، نقطه یا عکس رو مثلا یه عکس gif چشمکزن رو تو اون مختصاتی که واسه نمایش تنظیم کردیم دقیقا تو اون نقطه نمایش بدم که محل کنونی ربات رو نمایش بده ؟ آیا هر بار که مختصات جدید ارسال میشه لازمه که صفحه رفرش بشه ؟ من زیاد برنامه نویسی بلد نیستم.اگه ممکنه یه مثال عملی واسم بزنید

    پاسخحذف
  5. سلام،

    برای گذاشتن عکس در یک مختصات خاص، به راهنماهای زیر از مستندات گوگل و لینک های مرتبط در آن‌ها مراجعه کنین:
    https://developers.google.com/maps/documentation/javascript/overlays?hl=en#drawing_tools
    https://developers.google.com/maps/documentation/javascript

    به جای رفرش کردن کل صفحه، میتونین از تکنولوژی ای‌جکس (AJAX) استفاده کنین.

    پاسخحذف
  6. ممنون از پاسختون.من چند خط برنامه خیلی ساده نوشتم که بعد از لود صفحه یه باکس ظاهر می شه و از کاربر مختصات رو می خواد و بعد از تایید نمایش داده می شه.اما جواب نمیده اگه ممکنه بگید ایراد کار از کجاس ؟

    http://flickfa.com/i/upload/1/1352304212.zip

    پاسخحذف
  7. سلام،

    پیشنهاد میکنم قبل از ارسال سوالاتی از این قبیل مطلب زیر رو مطالعه کنین:

    چگونه هوشمندانه سوال کنیم:
    http://wiki.ubuntu-ir.org/SmartQuestions

    پاسخحذف
  8. سلام من دارم یک سایت طراحی میکنم که باید اطلاعات کامل رو از یک gps بگیره و در سایت نمایش بده هیچ آشنایی قبلی با طراحی این جور سایت ها ندارم میشه یه کم من رو راهنمایی کنید که چطور باید از google maps استفاده کنم.

    پاسخحذف
  9. سلام لطفا جواب بدید نیاز فوری دارم

    پاسخحذف
  10. سلام،

    متاسفانه من در این زمینه تجربه ای ندارم.

    پاسخحذف
  11. منم علاقمند به طراحی چنین سایتیم.با ایمیل من تماس بگیرید.sina.vadodi@gmail.com

    پاسخحذف
  12. فقط علاقمند هستیدیا تا حالا طراحی هم کردید؟ یعنی من میتونم همین جا ازتون راهنمایی بخوام؟ آقای زبردست که هیچ جوابی ندادن!

    پاسخحذف
  13. سلام،

    شما اگه دقت میکردین میدین که من جواب دادم و نوشتم:
    متاسفانه من در این زمینه تجربه ای ندارم.

    پاسخحذف
  14. سلام میشه بگید چطور سایتتون رو این قدر خوب دو زبانه کردید که اصلا فونتش به هم نمی ریزه؟

    پاسخحذف
  15. سلام،

    کدوم بخش سایت منظورتونه؟ سایت تمام انگلیسم یا متون انگلیسی که در همین وبلاگ هستند؟

    پاسخحذف
  16. البته سایت تمام انگلیسی که بالای همین وبلاگ لینکش رو گذاشتید

    پاسخحذف
  17. سلام،

    اون سایت قالب و محتواش کاملا از این وبلاگ فارسی جدا هست. در نتیجه فونت‌ها و تنظیمات برای زبان انگلیسی صورت گرفتن.

    پاسخحذف
  18. سلام,

    ممنون از جوابتون.میشه یه توضیح بدید برای اینکه سایتم با دو تا قالب load بشه باید چیکار کنم؟

    پاسخحذف
  19. در اصل اینها دو تا نرم افزار هستن که در آدرس های مختلف نصب شدن.

    پاسخحذف
  20. 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

    پاسخحذف
  21. سلام و درود بر شما

    من قصد دارم از سامانه هواشناسی openlayer برای سایتم استفاده کنم و علاقمند هستم در صفحه اول نمایش داده بشه!
    کدها و اسکریپت ها رو دارم ولی نمی دونم در کجا باید قرارشون بدم، منظورم در وردپرس در کدوم بخش ویرایشگر باید قرار بگیرن !

    میشن اظهار لطف کنید و به من توضیح بدید.

    خیلی ممنون از شما

    پاسخحذف
  22. سلام ، من می خواستم سایتی شبیه سایز نذری یاب طراحی کنم اگر می شه راحنمایی فرمایید
    http://nazriyab.ir/?tehran

    پاسخحذف
  23. سلام، آقای زبردست چگونه می توانیم برای ورود به سایت (sign in) از google استفاده کنیم؟
    چیزی شبیه به این sign in with google
    به این شکل کاربر وارد اکانت گوگل (جیمیل) خود بشود و از این طریق بتوان کاربر را شناسایی کرد(Authorization)
    مانند سایت هایی مثل stackoverflow.com که در آنها کاربر می تواند برای ورود به پروفایل خود از اکانت های google ، facebook ،yahoo و... استفاده کند

    پاسخحذف
  24. سلام،
    در صفحه زیر، از سایت گوگل، راهنمای لازم برای پیاده‌سازی این سیستم مشخص شده:
    https://developers.google.com/accounts

    پاسخحذف
  25. سلام
    من برای انجام پایان نامم که توسعه ی یک وب سرویس مکانی هست می خوام از 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

    چه کار باید کرد؟ (روی لوکال هاست تستش می کنم)

    پاسخحذف
  26. سلام،
    لوکال هاست رو چطور باز میکنید؟ با 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

    پاسخحذف
  27. سلام.
    من هر چی سعی میکنم نقشه رو روی سایت نشون بدم از آخرین درجه بک زوم (همه قاره ها پیداست) رو سایت نشون میده و باید دستی زوم کنم
    چاره کار چیه؟؟؟

    پاسخحذف