آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 17) - دریافت API Key

- visibility ۷ mode_comment

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

تا اینجای کار داشتیم کدهامون رو بر روی لوکال و کامپیوتر و در یک فایل استاتیک قرار میدادیم و در مرورگر باز می کردیم. همونطور که قبلا دیده بودید، بدون هیچ مشکلی نقشه ها نمایش داده میشدن و هر کاری میخاستین رو میشد انجام داد. حالا فرض کنید میخاید در سایت آنلاینی که دارید از نقشه گوگل استفاده کنید. همه کدها همانند همون کدهایی هست که قبلا نوشتیم، ولی زمانی که در سایت صفحه مورد نظر رو باز میکنیم، نقشه نمایش داده نمیشه و یک ارور بهمون نمایش داده میشه:google maps error online

همونطور که دیدید به ما یک ارور نمایش داده میشه و در توضیحاتش گفته که Console موجود در Inspector رو نگاه کنید تا به ارور پی ببرید. Console بصورت زیر هست:no api key google maps

همونطور که میبینید یک هشدار NoApiKeys به ما داده شده و بهمین دلیل نقشه نمایش داده نمیشه. گوگل اخیرا دسترسی به نقشه گوگل رو محدود کرده و مقرر کرده که هر کس میخاد بصورت آنلاین از نقشه های من استفاده کنه، باید یک API Key دریافت کنه و در سایت خودش قرار بده. در ضمن با دریافت این کلید، نقشه گوگل میتونه 25000 بار در روز بصورت رایگان بر روی سایت شما توسط کاربران دیده بشه و بیشتر از اون امکانش نیس. سایتهای پر ترافیکی که قصد دارن بیشتر نقشه رو نمایش بدن باید Licence گوگل رو خریداری کنن و همچنین شما میتونین چندین اکانت بسازید و برای هر کدام یک API Key تهیه کنید و از اونا استفاده کنید تا تعداد دفعاتی که نقشه نمایش داده میشه، بیشتر بشه.

دریافت API Key بسیار ساده هست. برای اینکار ابتدا روی این لینک کلیک کنید.get api key step 1

بر روی دکمه GET A KEY کلیک کنید. بعد از اون وارد یه صفحه دیگه میشید، اگر با اون مرورگر در اکانتهای گوگل Sign in هستید که هیچی، اگه نیستید با صفحه زیر روبرو میشید:sign in google console

ایمیل و رمزتون رو وارد کنید تا وارد مرحله بعد بشید.create project google console بر روی دکمه Continue کلیک کنید تا پروژه جدید برای شما ساخته بشه. بعد از کمی انتظار وارد صفحه زیر میشید:create project 2 google console

میبینید که 2 تا ورودی رو از شما میخاد و دومی دلخواه است. برای مورد اول نام پروژتون رو مشخص میکنید و برای ورودی دوم هم باید نام سایتی که قصد دارید از این نقشه استفاده بشه رو قرار بدین. پیشنهاد میکنم حتما قرار بدین و اون رو خالی نزارید. مثلا فرض کنید سایت من farsial.com هست. برای اینکه در همه domain ها و صفحه ها هم بتونیم از نقشه گوگل استفاده کنم، باید بصورت زیر عمل کنیم:create project 3 google console

میبینید که با استفاده از * کار مورد نظر رو انجام دادیم. شما میتونین هر تعداد سایتی رو که بخواید وارد کنید. بعد از وارد کردن بر روی Create کلیک کنید تا API Key برای شما ساخته بشه.api key final google maps

همونطور که دیدید کلید مورد نظر رو بهمون داد و حالا میتونیم از اون در سایتمون استفاده کنیم. برای اینکار باید به انتهای اون فایل js که در کدهامون قرار میدادیم، کد بالا رو در انتهای اون و بصورت پارامتر قرار بدیم. بصورت زیر:

همونطور که دیدید در انتهای فایل مورد نظر و در مقابل ویژگی key همون کلیدی که ساختیم رو قرار دادیم. نهایتا بعد از 5 دقیقه این کلید فعال میشه و میتونین بر روی سایتهایی که در مرحله ساخت اجازه دادید، نقشتون رو قرار بدین و کاربران بدون مشکل میتونین اون رو ببینن. این رو هم در پایان بگم که از کدی که من در بالا ساختم استفاده نکنید و خودتون یکی برای سایت خودتون بسازید و استفاده کنید.

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

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران

یه سوال داشتم. الان باید بابت گرفتن Google Map Api key هزینه پرداخت کنیم؟!
این طور که من شنیدم دیگه رایگان نیست!

محمد اسفندیاری

تا یه حدودی رایگان هست و بیشتر از اون رو باید پول پرداخت کنید

saied-h

میشه لطفا یکم بیشتر توضیح بدید؟
تا یه حدی یعنی چی؟
مثلا در مورد گوگل مپس به چه شکله؟
هیچ مرجع فارسی زبانی هم در این باره توی اینترنت نیست!

محمد اسفندیاری

به زودی یک مطلب در این مورد قرار میدم
به احتمال زیاد همین امروز

محمد اسفندیاری

بفرمایید:
http://www.7learn.com/tutorials/learn-how-to-use-google-maps-part23

saied-h

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

محمد اسفندیاری

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.