محتوانوشته

سلام و عرض ادب خدمت شما کاربران و همراهان نوین وردپرس
خطایی که امروزه بسیاری از کاربران گوگل مپ از دست آن خسته شده اند:

Oops! Something went wrong.

This page didn’t load Google Maps correctly. See the JavaScript console for technical details

در این آموزش از نوین وردپرس در خدمت شما هستیم با آموزش رفع خطای عدم نمایش نقشه گوگل در وردپرس. همانطور که شاید مطلع باشید. گوگل در تاریخ ۲ تیرماه ۹۵ سیاست کاری خود را در ارائه سرویس های جدید به کابران خود تغییر داده است که از این تاریخ به بعد نمایش نقشه گوگل در سایت های وردپرس یا سایر سایت ها ملزم به دریافت api key یا کلید api از گوگل هستند. برای این کاربر باید به وب سایت گوگل مراجعه کنیم و کلید مجوز مربوطه را از گوگل دریافت کنیم و به وب سایت خود اعمال کنیم. حال اعمال این کد به سایت به دو روش کد و افزونه میسر است و ما در ادامه هر دو روش را به شما آموزش خواهیم داد.

در پروژه‌هایی که به نمایش نقشه تعاملی در وب‌سایت نیاز دارند، افزونه Image Map Pro از گزینه‌های قابل بررسی است.

خطای Google Maps به تنظیمات اتصال مربوط است و نصب افزونه دیگری آن را برطرف نمی‌کند. افزونه نقشه تعاملی کاربران وردپرس برای ساخت نقشه مستقل با امکان ارسال موقعیت توسط بازدیدکننده کاربرد دارد. این ابزار از Leaflet و Mapbox بهره می‌برد و مدیر می‌تواند مکان‌های ارسالی را پیش از نمایش بررسی کند. سازگاری نقشه و ثبت مکان را آزمایش کنید.

در پروژه‌های مرتبط با نمایش نقشه تعاملی در صفحات وردپرس، افزونه 3D Map از گزینه‌هایی است که باید امکاناتش با نیاز سایت سنجیده شود.

در پروژه‌هایی که به نمایش نقشه تعاملی در وب‌سایت نیاز دارند، افزونه Treweler از گزینه‌های قابل بررسی است.

یکی از گزینه‌هایی که در زمینه طراحی نقشه تعاملی در محتوای سایت وردپرس می‌توان ارزیابی کرد، افزونه Mapplic است؛ تناسب امکانات آن با پروژه اهمیت دارد.

api-key-wpnovin

 آموزش دریافت api key از وب سایت گوگل:

همانطور که در بالا گفته شد ، جهت نمایش نقشه و حل مشکل موجود نیاز است که کد مجوز مربوطه را گوگل دریافت کنیم. برای دریافت این کد کافیست با استفاده از این لینک مطابق تصویر زیر ، ابتدا پروژه مورد نظر را انتخاب کرده و روی دکمه آبی رنگ Continue کلیک کنید تا به مرحله دریافت کلید api هدایت شوید:

api-key-wpnovin1

در صفحه جدید شما ، در قسمت Which API are you using؟ همان مورد پیشفرض را قرار داده و روی Google Maps JavaScript API تنظیم کرده و هدف اصلی دریافت کلید api را مشخص کنید. پس از آن روی دکمه آبی رنگ  What credentials do I need? کلیک کنید و کلید مجوز مربوطه را دریافت کنید. مانند تصویر زیر:

در بررسی «نمایش موقعیت‌ها و نقشه تعاملی سایت»، افزونه MapSVG یکی از ابزارهای مرتبط برای سنجش امکانات است؛ بهتر است تناسب آن با سایت بررسی شود.

api-key-wpnovin2

حال شما کلید api را دریافت کرده اید و تنها اعمال کردن آن به سایت با دو روش با کد و با افزونه میسر است:

برای «نمایش موقعیت‌ها و نقشه تعاملی سایت»، بررسی قابلیت‌های افزونه 360 ipanorama می‌تواند به مقایسه گزینه‌های مرتبط با این مطلب کمک کند.

۱- آموزش اعمال api key گوگل به وردپرس بصورت کد:

برای این کار کافیه کد زیر را به فایل header.php سایت خودتون اضافه کنید:

کپی کد
1
<script src="//maps.googleapis.com/maps/api/js?key=api code" async="" defer="defer" type="text/javascript"></script>

در قسمت api code شما باید api key خود را با در بالا جایگزین کنید.

۲- آموزش اعمال api key از طریق افزونه:

برای این کار کافیست ، افزونه  API KEY for Google Maps را از زیر دریافت کنید و سپس مانند سایر افزونه ها ، نصب و فعال سازی کنید. پس از فعال سازی افزونه مذکور به زیر مجموعه قسمت تنظیمات /  Google API KEY اضافه میشود که باید روی آن کلیک کنید و در قسمت Enter Google Maps API KEY  کلید دریافتی را وارد کنید.

دانلود افزونه API KEY با لینک مستقیم

api-key-wpnovin3

تبریک میگوییم… حال اگر نقشه سایت خود را مشاهده کنید خواهید دید که مشکل مربوطه برطرف شده است.

نظراتمقاله

خلیل

سلام ظاهرا برای دامنه .ir اصلا جواب نمیده، اگر کسی میدونه کمکم کنه

مسعود

ممنون، از مطلب آموزشی شما استفاده کردم.

سعید

سلام

من دقیقا مین مراحل رو کامل انجام دادم
ولی بازم مشکل پابرجاست
باید چیکار کنم؟

فربد

سلام - من برای تنظیمات در پنل گوگل دچار مشکل شده ام
ایا امکان دارد روش اول را از ابتدا تا انتها بصورت کامل بیان کنید

خلیل

سلام ظاهرا برای دامنه .ir اصلا جواب نمیده، اگر کسی میدونه کمکم کنه

سمیرا شفق شفق

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

مسعود

ممنون، از مطلب آموزشی شما استفاده کردم.

سام فرخ نژاد

موفق باشید.

سجاد غلام پور

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

سام فرخ نژاد

همه قسمت ها در این نوشته توضیح داده شده است.

سجاد غلام پور

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

سام فرخ نژاد

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

سجاد غلام پور

سلام متاسفانه مشکل من حل نشد

سام فرخ نژاد

سلام
اگر مطابق آموزش جلو بروید مشکل خاصی وجود ندارد.

سعید

سلام

من دقیقا مین مراحل رو کامل انجام دادم
ولی بازم مشکل پابرجاست
باید چیکار کنم؟

سام فرخ نژاد

سلام
در صورتی که بصورت کامل مراحل را انجام دهید مشکل شما برطرف خواهد شد.

سعید صالحی

مسیر فایل header.php که باید تکه کد گوگل مپ رو داخلش بنویسیم،چیه!؟

سام فرخ نژاد

سلام
از قسمت : نمایش / ویرایشگر / فایل header.php

فربد

سلام - من برای تنظیمات در پنل گوگل دچار مشکل شده ام
ایا امکان دارد روش اول را از ابتدا تا انتها بصورت کامل بیان کنید

سام فرخ نژاد

سلام
بصورت کامل توضیح داده شده است ، تو کدام مرحله مشکل دارید؟

بیشتر بخوانید ازاین نویسنده