آموزش طراحی قالب وردپرس

حل مشکل نمایش نقشه گوگل در وردپرس

حل مشکل نمایش نقشه گوگل در وردپرس

حل مشکل نمایش نقشه گوگل در وردپرس

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

وای! مشکلی پیش آمد.
‏این صفحه Google Maps را درست بارگیری نکرد. برای اطلاع از جزئیات فنی، کنسول جاوا اسکریپت را مشاهده کنید.

و این هم تصویری از این خطا:
مشکل نقشه گوگل
و خطایی که در کنسول جاوا اسکریپت مشاهده می شد این بود:
Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error
متوجه شدیم مشکل از Api گوگل هست و باید توی کد نویسی قالب api تعریف کنیم. خلاصه چند روزی درگیر این مشکل بودیم و کلی کد نویسی قالب ها رو بررسی کردیم تا اینکه با افزونه ای به نام Google API Key آشنا شدیم. افزونه حل مشکل نقشه گوگل در وردپرس
با نصب و کانفیگ این افزونه دیگر خطای بارگذاری نقشه گوگل را نخواهید داشت. چرا که این افزونه api گوگل را از شما گرفته و در کد نویسی سایت شما لحاظ خواهد کرد.

اما چطور افزونه google api key را تنظیم کنیم؟

برای تنظیم این افزونه چند مرحله ساده را باید پشت سر بگذارید. مرحله اول نصب افزونه هست که باید به آموزش نصب افزونه در وردپرس مراجعه کنید.
در مرحله دوم باید به بخش تنظیمات > google api key وارد شوید. در اینجا روی click here کلیک کنید.
ساخت api نقشه گوگل
وارد صفحه ساخت api شوید. اینجا Create new project را انتخاب و روی continue کلیک کنید.
ساخت پروژه در گوگل
باید چند دقیقه صبر کنید تا پروژه شما ساخته شده و وارد صفحه جدیدی شوید. ممکن هست 1 الی 3 دقیقه طول بکشد.

بعد از ساخت پروژه یک api key به شما تحویل داده می شود. این کد را در بخش Enter Google Maps API KEY قرار دهید و روی ذخیره تغییرات کلیک کنید.

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

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

پکیج های آموزشی

نظرات کاربران

avatar
مرتب سازی توسط:   جدیدترین | قدیمی ترین
مهدی
مهدی

سلام
من تنظیمات انجام دادم چرافقط عکس نقش میاد زنده نیست توبعضی ازسایت ها نقشه کاملا فرق میکنه؟

ali shirin
ali shirin

سلام وقت بخیر
من کد API رو وارد کردم ولی محل که مد نظرم هست رو نشون نمیده ?

چطور می تونم این کار رو انجام بدم ؟؟

امید عرب زادگان
امید عرب زادگان

سلام

اون کدی که از خود نقشه گوگل گرفتید را اشتباه وارد کردید.

ali shirin
ali shirin

سلام کد iframe درست بود

مشکل در آدرس کپی شده از گوگل مپ بود

یاسمن
یاسمن

مراحلی که گفتید رو انجام دادم اما روی گزینه click here که کلیک میکنم ارور 403 میده و روی گزینه generate api key هم که کلیک میکنم یه صفحه سفید باز میکنه که بالاش نوشته باید به گوگل اکانت وارد بشید در حالی که من توی اکانت گوگل هستم. ممنون میشم که راهنمایی کنید.

شاه حسینی
شاه حسینی

من سرویس تغییر آی پی روشن کردم اوکی شد

محمد قاسمی
محمد قاسمی

درود.
بررسی کنید ببینید افزونه ها تداخل ایجاد نکرده باشند و یا مشکل از نسخه php نباشد.
حداق نسخه php باید ۵.۶ باشد.

بی نام
بی نام

دمت گرم ایول

inter190820
inter190820

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

علیرضا
علیرضا

آقای دستتون درد نکنه من این روش را کامل انجام دادم مراحل را دقیق انجام دادم  ولی باز نشون نمیده یکثانیه نشون میده ولی  باز میگه وای!!!  هر کاری می کنم نمیشه کمک بکنید بیزحمت .راه دیگه نداره ؟

vahides12
vahides12

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

ابراهیم
ابراهیم

سلام خسته نباشیدببخشید یک مشکل در سایت مپ قالبم دارم گفتم شاید بتوانید کمک کنیددر گوگل وبمستر در قسمت سایت مپ ارور میدهداین لینک اون قسمت که خطا میدهد:http://downlodcity.ir/sitemap_post_tag.xmlممنون میشوم راهنمایی کنیدبا تشکر فراوان

رضا حسینی راد
رضا حسینی راد

سلام چه خطایی دریافت می کنید؟

جمال
جمال

سلام و خسته نباشیدمن وقی وارد صفحه ای کا باید کد رو بگیریم میشم ارور404 میده گوگل دلیلش چیه؟ تورو خدا چکار کنم

رضا حسینی راد
رضا حسینی راد

سلام باید با وی پی* ان تست کنید

رضا
رضا

سلامدستتون دردنکنه واقعا کارم راه افتاد.خیلی ممنون از مطلب مفیدتان.

Xilla
Xilla

آقاضا من کارایی که گفتین رو انجام دادم اما نقشه رو به صورت ثابت نشون میده !! چیکار باید کنم ؟؟ با افزونه که اصلا نشون نمیده اما وقتی کد رو تو هدر وارد کردم این مدلی ثابت شدهhttp://upload7.ir/plugins/imageviewer/site/thumb.php?s=Zfz&/Capture.PNG

رضا حسینی راد
رضا حسینی راد

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

محمدجعفرابراهیمی
محمدجعفرابراهیمی

سلام من یه بار نصب کردم و خوشبختانه موفق شدم ولی به دلایلی قالب رو دوباره نصب کردم و حالا ک امتحان میکنم اصلا نمیشه هر بارم که کدو بهش میدم میگه ” کی آپدیت ” خدایی کلافه شدم ممنون میشم جوابمو بدین

Reza HosseiniRad
Reza HosseiniRad

سلام خب طبق آموزش مراحل رو انجام بدید نباید مشکلی باشه!

فاطمه
فاطمه

خیلی خیلی ممنون ، کلی دنبال همچین چیزی گشتم . یه دنیا ممنون

ryza90
ryza90

سلام…من طبق آموزش شما پیش رفتم…وقتی میخواد سایت بارگذاری کنه یه لحظه نقشه لود میشه بعد زود همون مشکل وای یه مشکلی پیش آمد مواجه میشیم…میشه راهنمایی بفرمایید؟

Reza HosseiniRad
Reza HosseiniRad

سلام درست مراحل رو طی نکردید

ryza90
ryza90

به خدا طبق دستورات شما پیش رفتم و نوشت که کد اپدیت شد…چند بار امتحان کردم ونشد…

Reza HosseiniRad
Reza HosseiniRad

چک کنید قالب شما بخشی رو برای وارد کردن api نقشه گوگل توی تنظیماتش داره یا خیر

ryza90
ryza90

بله…تو قسمت سفارشی سازی هست که من کد رو تو انجا هم وارد کردم

websmspanel
websmspanel

*.example.com/*
injoori

websmspanel
websmspanel

یک نکته خیلی مهم اینه که وقتی توی گوگل API درست می کنید باید توجه داشته باشید که حتما اینجوری اسم سایتتون رو وارد کنید:
*.example.com/*
من اسلش و ستاره آخری رو وارد نکرده بودم مال منم یه لحظه لود میشد و دیگه نشون نمیداد.
در ضمن بهتره از طریق خود سایت گوگل درست کنید نه از طریق این پلاگین.
بعدش هم که کدتون رو توی کادر این افزونه وارد کنید و تمام

Reza HosseiniRad
Reza HosseiniRad

اگر هست این افزونه رو غیر فعال کنید و اونجا وارد کنید

علی
علی

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

Reza HosseiniRad
Reza HosseiniRad

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

صانعی
صانعی

شما میتونید پس از انتخاب نقطه ی مورد نظر روی نقشه گوگل از منوی سمت چپ

گزینه share and embed map رو کلیک کنید تا گوگل لینک این نقطه رو به شما بده.
بعدش میتونید این لینک رو در یک ماژول “لینک آور” درون جوملا ایجاد کنید تا به صورت iframe براتون نمایش بده توی سایت.
مانند : http://www.bagheri-stone.com/index.php/contactus
و نیاز به هیچ API و … هم ندارید.

میتونید هم لینک رو خودتون توی ویرایشگر سایت با کد Iframe قرار بدید که البته در این حالت اول باید توی تنظیمات سایت، بخش ویرایشگر برید و iframe رو از حالتهای غیر مجاز (prohibitions) حذف کنید. 

niusha96
niusha96

سلام ببخشید من چطور میتونم آدرس نقشه ای رو که از google گرفتم در قسمت نقشه ای که با  visual composer قالب betheme درست میشه وارد کنم؟ممنون از سایت خیلی خوبتون.

Reza HosseiniRad
Reza HosseiniRad

سلام طول و عرض جغرافیایی رو به المان نقشه توی ویژوال کامپوزر بدید

رضا
رضا

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

Reza HosseiniRad
Reza HosseiniRad

سلام بله افزونه اختصاصی هست

رضا
رضا

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

Reza HosseiniRad
Reza HosseiniRad

نه متاسفانه

سروش مقدسی
سروش مقدسی

سلام من افزونه رو نصب کردم ولی تنظیمات نداره اصلا فقط غیر فعال کردن و ویرایش داره 

Reza HosseiniRad
Reza HosseiniRad

سلام توی بخش تنظیمات میتونید ببینید تنظیماتش رو

taha tehrani
taha tehrani

آقا دمت گرم

halizadeh86
halizadeh86

با سلام.طبق آموزش شما افزونه نصب شده اما بعد از زدن Click here صفحه API باز شد و Create هم زدم اما بعد از مدتی کد رو نمایش نداد.با توضیحات شما مقدار مقایر بود .میشه راهنمایی بیشتر بفرمایید؟

Reza HosseiniRad
Reza HosseiniRad

سلام باید چند دقیقه صبر کنید تا کد نمایش داده بشه

امین روانبخش
امین روانبخش

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

hossein
hossein

سلمان همه مراحل رو انجام دادم هنوز مشکل هست.راه دیگه ای هم هست؟

Reza HosseiniRad
Reza HosseiniRad

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

mobagheri01
mobagheri01

اقا گویا درست شد…تشکر … طریقه شو یاد گرفتم..مرسی

alireza
alireza

eror 403 میاد دیلیلش چی میتوونه باشه ؟؟؟

Reza HosseiniRad
Reza HosseiniRad

سلام باید با فیلتر شکن وارد بشید

stoon73
stoon73

سلاممن تمامی این مراحل رو پیش رفتم اما در آخر این اخطار رو بهم دادServer Error
There’s a problem at our end.

Please try again. If the problem persists, please let us know using the “Send feedback” link below. Thanks!لطفا راهنمایی کنید

Reza HosseiniRad
Reza HosseiniRad

سلام link below لینکی که پایین بهتون داده چی هست؟ مجدد تست کنید شاید اون لخظه این ارور رو داشتید

poloto4u86
poloto4u86

به به، چه عالی !!!!