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

442 بازدید
چهارشنبه ۲۷ مرداد ۱۳۹۵
نحوه قرار دادن نقشه گوگل مپ در سایت به صورت اختصاصیReviewed by جواد نبوی on Aug 17Rating: 4.5

نقشه گوگل در سایت شما

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

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

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

دریافت API Key گوگل

در ابتدای کار باید یک API Key از گوگل دریافت کنید. بدین منظور به این لینک بروید. توجه داشته باشید که این صفحه برای کاربران ایرانی تحریم می باشد. بنابراین از یک نرم افزار دور زدن آی پی یا تغییر آی پی (چیز شکن!) استفاده کنید.

دریافت API Key گوگل مپ

روی دکمه GET A KEY کلیک کنید. وارد صفحه ای میشوید که در آن باید روی دکمه Continue کلیک کنید.

نقشه گوگل در سایت

به صفحه ای منتقل می شوید که باید اطلاعات خود را وارد کنید. آدرس سایت خود را به صورت */yoursite.com.* در فیلدی که در تصویر زیر میبینید وارد کنید. طبیعی است که منظور از yoursite.com همان دامین شما می باشد. در انتها روی دکمه Continue کلیک کنید.

نقشه گوگل در سایت شما

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

گوگل مپ در سایت

ایجاد ساختار HTML

برای اینکه نقشه گوگل را فراخوانی کنید باید یک قطعه کد را در سایتتان قرار دهید. بدین منظور کد زیر را قبل از بسته شدن تگ <head/> قالب قرار دهید:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

در واقع کد بالا را باید درون تگ <head/> <head> قرار دهید. این تگ در قالب وردپرس معمولا در فایل header.php قرار گرفته.

توجه: به جای عبارت YOUR_API_KEY باید API KEY خود که در مرحله قبل گرفته بودید را وارد کنید.

سپس در فایل html قالب یا پروژه تان درست در جایی که میخواهید نقشه نمایش داده شود، یک div با آی دی map ایجاد کنید. به این صورت:

<div id="map" style="width:400px;height:400px;background:yellow"></div>

کد بالا یک مربع با عرض و طول ۴۰۰ پیکسل و رنگ پس زمینه زرد ایجاد می کند. به شکل زیر:

نقشه گوگل در سایت

قرار است درون این مربع ۴۰۰*۴۰۰ زرد رنگ، نقشه ما قرار بگیرد.

ساختار جاوااسکریپت و ایجاد نقشه درون باکس

کد زیر را جایی درون تگ <body> <body/> قرار دهید. در واقع بهتر است قبل از تگ <body/> آنرا بگذارید:

<script>

var mapCanvas = document.getElementById("map");
var mapOptions = {
    center: new google.maps.LatLng(36.566237, 53.058671), zoom: 15
}
var map = new google.maps.Map(mapCanvas, mapOptions);

</script>

کد بالا مرکز شهر ساری را نشان میدهد. نتیجه اش به شکل زیر است:

نقشه گوگل در سایت

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

یافتن کد مکان نقشه گوگل

شما باید کد مکان آدرس شرکت تان را پیدا کنید. برای اینکار ابتدا به آدرس maps.google.com بروید. در صفحه باز شده نقشه ای را می بینید. در قسمت Search google maps نام شهر خود را وارد کنید. سپس اینتر را بزنید.

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

میبینید که با وارد کردن نام شهر و فشردن کلید اینتر، نقشه شهر به صورت تصویر بالا نمایش داده می شود. حال در شهرتان زوم کنید و با جا به جا کردن نقشه محل شرکت خود را پیدا کنید. پس از پیدا کردن محدوده ای که شرکت شما در آن قرار دارد، روی همان جایی که شرکتتان قرار گرفته راست کلیک کنید. سپس در منوی باز شده روی دکمه What’s here? کلیک کنید.

کد مکان در گوگل مپ

حال یک کادر کوچک در پایین صفحه باز می شود که نام آن محل و کد مکان آن درونش نوشته شده. روی کد مکان کلیک کنید (به تصویر زیر دقت کنید، کد مکان همانی است که دورش خط کشیدیم).

استفاده از گوگل مپ در سایت

پس از کلیک روی کد مکان، در فیلد جستجوی موجود سمت چپ صفحه (یا سمت راست صفحه در گوگل فارسی)  کد مکان را میبینید. آن را کپی کنید.

کد مکان نقشه گوگل

حال کد مکان کپی شده را در کد جاوااسکریپتی که به قالبتان اضافه کرده بودید به جای کد ۳۶٫۵۶۶۲۳۷, ۵۳٫۰۵۸۶۷۱ قرار دهید. یعنی کدی که در شکل زیر مشخص شده را حذف کرده و کد مکان خودتان را به جای آن بنویسید.

نقشه گوگل در سایت

همچنین با تغییر دادن عدد ۱۵ جلوی عبارت :zoom میتوانید میزان زوم پیشفرض نقشه را مشخص کنید. حداکثر مقدار این عدد میتواند ۱۸ باشد.

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

در نهایت کدی که من ایجاد کردم را در زیر می بینید:

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEtOkL4c2XRfbgJPYVvN6bv1PQeFWVnsk"></script>
</head>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px"></div>

<script>

var mapCanvas = document.getElementById("map");
var mapOptions = {
 center: new google.maps.LatLng(36.566237, 53.058671), zoom: 15
}
var map = new google.maps.Map(mapCanvas, mapOptions);

</script>

</body>
</html>

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

لينک ها:

تبلیغات

نویسنده (مدیر سایت)

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

3 دیدگاه برای “نحوه قرار دادن نقشه گوگل مپ در سایت به صورت اختصاصی”

  1. لالیگا گفت:

    عالی بود.
    توضیحات کامل بود

    1. جواد نبوی گفت:

      خوشحالم که مفید بود
      موفق باشید

  2. abolfazl dalily گفت:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *