استفاده از نقشه جدید گوگل در وب سایت و سفارشی سازی آن استفاده از نقشه جدید گوگل در وب سایت و سفارشی سازی آن

رتبه این آیتم
استفاده از نقشه جدید گوگل در وب سایت و سفارشی سازی آن
رتبه 3 در 7 رای از 1 تا 5

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


  

چگونه یک نقشه گوگل (google maps) سفارشی ایجاد کنیم؟

سه راه اصلی برای ایجاد یک نقشه گوگل سفارشی با استفاده از google map وجود دارد: 

1. با استفاده از ویژگی های my map ، در وب سایت گوگل مپ ، یک نقشه ایجاد کنید.

2. از نرم افزارهای نقشه برداری می توانید استفاده کنید. این نرم افزارهای از Google Maps API  استفاده می کنند.

3. برنامه خود را با استفاده از Google Maps API ایجاد کنید.

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

مرحله 1 . چگونه یک نقشه وب سایت در گوگل مپ (google maps)، ایجاد کنیم؟

نقشه های گوگل (google maps) به شما اجازه می دهند که نقشه های سفارشی را با استفاده از مراحل زیر ایجاد کنید. این دستورالعمل نشان می دهد که چگونه می توانید نشانه گر ها را به صورت دستی ایجاد کنید. با این کار می توانید آنها را با آپلود یک صفحه گسترده به یک گروه اضافه کنید. این روش دارای مزیت های آسان و رایگان است. اما در تعداد نشانگر هایی که می توانید اضافه کنید و ویژگی هایی که در دسترس است محدود است. 

1.به سایت google maps  بروید.

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

3.بر روی گزینه "مکان شما" کلیک کنید.

4.بر روی تب "maps" کلیک کنید.

5.بر روی دکمه "great map" کلیک کنید.

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

7.مکانی را که می خواهید به نشانه گر اضافه کنید، پیدا کنید و بر روی آن کلیک کنید. 

8.در اینجا یک جعبه می آید  که شما می توانید نام و ویژگی های دیگر را به نشانگر اضافه کنید.

9.تمام مراحل قبل را در هر زمانی که لازم داشتید مجددا انجام دهید.

مرحله 2 : نحوه ایجاد نقشه با استفاده از" google maps API"

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

بهترین روش برای ایجاد یک نقشه سفارشی گوگل چیست؟

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

با استفاده از ابزارهای سفارشی سازی در چند دقیقه نقشه سایت را سفارشی سازی کنید

شما می توانید با استفاده از google map builder  نقشه سایت خود را سفارشی سازی کنید.  google map builder   ابزاری است که توسط توسعه دهنگان اسکاتلندی، تولید شد و به شما این امکان را می دهد تا بتوانید نقشه گوگل را سفارشی سازی کنید. این ابزار شامل ویژگی هایی است که به شما کمک می کند تا کنترل ها ، مقیاس ها، نمایش ها و نشانگرها نقشه را اضافه کنید و یا تغییر دهید یا آن را ویرایش کنید.

کلید های مورد نیاز برای google API

تنها نیاز این است که شما احتیاج دارید که یک کلید google API اضافه کنید که به کد اسکریپت جاسازی شده وارد شود. اگر هنوز کلید API  را ندارید، شما باید آن را دریافت کنید.

نسخه نمایشی از سفارشی سازی نقشه گوگل

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

با استفاده از API  جاوااسکریپت گوگل مپ سفارشی را به وب سایت خود اضافه کنید

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

اما اگر بخواهید که سفارشی سازی کمی داشته باشید، چطور؟ در زیر نحوه اضافه کردن نقشه به صورت سفارشی را با استفاده از API google maps گفته شده است. 

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

خب، بیایید شروع کنیم:

فکر می کنیم که شما از یک فایل html  ویا php  استفاده می کنید. ابتدا یک عنصر div در آن فایل ایجاد می کنیم و به آن یک شناسه مانند "نقشه" می دهیم. 

در فایل css  می توانید مشخصات آن را تعریف کنید برای مثال می توانید به آن ارتفاع دهید. 

اسناد گوگل مپ API همچنین پیشنهاد می دهد که برای آن یک بدنه و html بسازید برای اینکه مطمئن شوید که هر div که برای آن می سازید دارای ابعاد است. شما ممکن است که نیاز نداشته باشید یا لازم نباشد که آن را با توجه به سبک وب سایت خود انجام دهید ولی بهتر است که این کار را انجام دهید. 

قبل از انجام هر کار دیگرباید به API  نقشه گوگل متصل شویم. برای انجام این کار، این اسکریپت را درست قبل از تگ بدنه قرار می دهیم. 

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

برای این اهداف، ما کد سفارشی گوگل مپ را در یک فایل جاوااسکریپت جداگانه، قرار می دهیم. فقط در بالای اسکریپت نقشه API گوگل، در فایل HTML خود یک پیوند به فایل جاوا اسکریپت خود را اضافه کنید. مطمئن شوید که مقدار اسکریپت های صفات را به درستی در جای خود قرار دهید. 

نحوه اضافه کردن یک نقشه گوگل به وب سایت

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

نقشه های گوگل

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

اضافه کردن نقشه با و بدون API 

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

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

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

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

کارهایی که نقشه ها می توانند انجام دهند

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

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

با کلیک کردن بر روی نماد ها می توانید اطلاعات بیشتری از قبیل آدرس، شماره تلفن، رتبه بندی و یا افرادی که در آنجا بوده اند را ببینید. اگر تمام این اطلاعات کافی نیست، گوگل یک تصویر 360 درجه از مکانی که در آن قرار دارید، را ارائه می دهد. این تصویر ممکن است در هنگام بازدید از مکان واقعی مفید باشد.

تولید و یکپارچه سازی کد جاوا اسکریپت

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

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

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

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

بر روی نقشه ضربه بزنید

هر کجا که یک آدرس خیابان را بر روی سایت خود نشان می دهید، آدرس را به یک مکان نقشه لینک دهید. می توانید مراحل زیر را دنبال کنید:

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

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

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

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

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

موقعیت چندین نقشه

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

بنابراین به جای یک لیست با یک تصویر ثابت  ، یک نقشه گوگل چند منظوره ایجاد کنید. در زیر نحوه انجام آن گفته شده است:

1.به سایت گوگل بروید.

2.گزینه "ایجاد نقشه جدید" را انتخاب کنید.

3.مکان خود را بر روی نقشه اضافه کنید.  یک کلمه کلیدی را در کارد جستجو وارد کنید.  پین  را بر روی نمایش جزئیات قرار دهید. سپس افزودن به نقشه را انتخاب کنید. سپس آیتم را از لیست سمت چپ برای ویرایش انتخاب کنید و یا کلا آن را حذف کنید.

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

در صورت تمایل می توانید یک خط یا شکل و یا مسیر را اضافه کنید. نقشه را نمایش دهید تا مسیرهای دوچرخه سواری و یا رانندگی نشان داده شود.

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

نقشه های سفارشی می توانند باعث جذب گردشگران، فروشندگان و غیره شوند.

Maps Engine Lite

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

 

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

 

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

 

بر روی نقشه مکان خود را مشخص نمایید و در پاپ آپ اطلاعات خود را وارد نمایید.

 

شما می توانید به نقشه یک layer جدید اضافه نمایید و در آن اطلاعات خود را وارد نمایید.

 

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

 

همچنین در نقشه جدید گوکل این امکان را به شما می دهد که قالب دلخواه خود را مشخص نمایید.

 

 


به اشتراک گذاری نقشه

پس از آنکه نقشه را مطابق با خواست خود طراحی نمودید می بایست بر روی کلید share کلید نمایید و حالت نمایش آن را از “Private”به“Public” تغییر دهید زیرا برای نمایش در سایت می بایست دسترسی نقشه Public باشد.

 

سپس بر روی فلدر کلیک نمایید و سپس “Embed on my site” را کلیک نمایید.

 

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

 
<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>

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

برای آنکه نقشه شما در تمامی مرورگرها و حتی موبایل به خوبی نمایش داده شود، نقشه را در دایو ایجاد نمایید

 
<div class="fluid-wrapper">
<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>
</div>

و کد css زیرا را به دایو خود اختصاص دهید.

 
.fluid-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.fluid-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        border: none;
}

 

09-تیر-1397

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

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

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

7 نظر

  • romina شنبه, 14 مهر 1397 17:16 پست شده توسط romina

    با سلام چگونه آدرس کاربر را روی نقشه از او دریافت کنیم با گرویتی فرم یا ووکامرس یا هر فرم دیگری لطفا راهنمایی کنید

  • شیوا سه شنبه, 10 مهر 1397 15:18 پست شده توسط شیوا

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

  • صادق علیخانی سه شنبه, 31 مرداد 1396 10:22 پست شده توسط صادق علیخانی

    سلام خیلی ممنون مطلب خوبی بود

  • فرشاد مهریار جمعه, 25 دی 1394 15:00 پست شده توسط فرشاد مهریار

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

  • bluestar9372 یکشنبه, 08 آذر 1394 16:08 پست شده توسط bluestar9372

    سلام ببخشید کدی که گوگل میده رو کجای سایت باید گذاشت؟ من از جوملا استفاده میکنم ممنون

  • یوسفی یکشنبه, 08 آذر 1394 12:39 پست شده توسط یوسفی

    سلام ممنون از اموزش خوبتون. من یک سوال داشتم من باید یک وب سایت با php بنویسیم و در این وب سایت باید امکان ثبت نام کاربر وجود داشته باشد زمانی که کاربر دارد فرم ثبت نام را پر می کند باید مکان مورد نظرش را بر روی نقشه علامت گذاری کند من چه جوری می تونم این کار انجام بدم ممنون از راهنماییتون

  • لعیا اطمینان دوشنبه, 23 تیر 1393 13:55 پست شده توسط لعیا اطمینان

    من دقیقا کارهایی که گفتیدرا انجام دادم، دریک صفحه ی ساده بدون هیچ کدی انجام شد.ولی وقتی بردم بین کدهام در وب سایت اصلیم انجام نشد:-(لطفا راهنماییم کنید باتشکر ---------------------------------- با سلام، احتمالا تمام موارد را در کد خود لحاظ نمی نمایید. مورد را در صفحه خود مجددا قرار دهید

يک نظر بدهيد

موارد ستاره دار الزامی هستند

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد