سرخط خبرها

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

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

در این آموزش میخواهیم برای اینکه نقشه شرکت ، سازمان ، محل زندگی خودتان و یا هر مکان دلخواه دیگری که نیاز دارید را از طریق سرویس نقشه گوگل (Google Maps) به شما کاربران عزیز آموزش بدیم .

نیازی به گفتن نیست که امروزه اکثر کسانی که با اینترنت آشنا هستند با سرویس Google maps نیز آشنا هستند و از آن استفاده میکنند. بعضی از وبسایتها برای نمایش محل کار شرکت, سازمان و یا خانه خودشان از سرویس Google map استفاده میکنند و محل مورد نظر را در نقشه مارک (mark) میکنند و در سایتشان قرار میدهند.

در ادامه با آموزش اینکار همراه ما باشید…

Google Maps یک وب اپلیکیشن (نرم افزار تحت وب) منتشر شده توسط کمپانی گوگل است. گوگل مپس یا گوگل مپ و به انگلیسی Google Maps سرویس دهنده نقشه‌های گوگل می باشد ،‏ که درحال حاضر هم بصورت بستر تحت وب قابل مشاهده هست و هم میتوانید آنرا بصورت اپلیکیشن اندروید پس از دریافت و نصب استفاده کنید. نقشه گوگل در اصل عکسبرداری هوایی از مناطق کره زمین می باشد

گوگل مپس یا گوگل مپ (به انگلیسی: < lang=”en”>Google Maps، به معنی: نقشه‌های گوگل) یک محصول وب از شرکت گوگل است. در گوگل مپس، نقشه‌های دقیق و کاملی از زمین ارائه می‌گردد. گوگل مپس از فناوری‌هایی چون Tele Atlas استفاده می‌کند.

 

در نقشه‌های گوگل سه بخش وجود دارد:

۱- فهرست‌های نقشه: نقشه‌های موجود را در دسته بندی‌های گوناگون ارائه می‌دهد.

۲- نقشه‌های من: کاربران گوگل می‌توانند با استفاده از ابزارهایی که در این بخش در اختیار آن‌ها قرار می‌گیرد، به طراحی و اشتراک‌گذاری نقشه‌ها بپردازند.

۳- آیکون‌هایی که می‌توان نقاط مختلف بر روی نقشه را با آنها علامت گذاری کرد.

 

نماهای مختلف در گوگل مپس :

خودروی مخصوص Google Street view با دوربین پانوراما نصب شده روی آن. با حرکت این خودرو در جاده‌های مورد نظر، تصاویر آن مکان‌ها ذخیره می‌گردد.

گوگل مپس دیدن نقشه را به چندین حالت امکان‌پذیر کرده‌است:

۱- نمای نقشه (map View): که به سبک نقشه‌های گرافیکی و معمول، از نمای بالا امکان رویت را فراهم می‌کند.

۲- نمای ماهواره‌ای (Satellite View): این نما تصاویر ماهواره‌ای واقعی از تمام نقاط سطح زمین را برای کاربران مخابره می‌کند.

۳- نمای زمین (Earth View): با نصب نرم‌افزار پلاگین گوگل ارث امکان رویت تصاویر ماهواره‌ای به صورت سه‌بعدی مانند نرم‌افزار گوگل ارث برای مرورگر فراهم می‌شود.

۴- نمای خیابان (Street view): در این نما که تنها در مکان‌هایی خاص قابل دسترسی است، تصاویری سه بعدی از درون خیابان‌های مورد نظر قابل رویت است. این تصاویر قبلاً به کمک دوربین‌هایی سوار بر خودروهایی مخصوص از سطح خیابان‌ها گرفته شده‌است.

۵- نمای سه بعدی (۳D View): این نما که به نمای هلیکوپتری معروف است امکان رویت مسیرها را به صورت سه‌بعدی از آسمان را فراهم می‌آورد.

۶- نمای درونی (Indoor view): در این نما، نقشه ساختمان‌های چند طبقه به تفکیک طبقات آن نمایش داده می‌شود.

نقشه‌ها

نقشه‌های به نمایش در آمده در گوگل مپس، در ابتدا فقط به کشور ایالات متحده و چند کشور اروپایی محدود می‌شد. نقشه‌ها توسط خود گوگل درست می‌شدند و امکان تغییرات در آن توسط کاربران نبود. نقشه‌ها فرایندی طولانی و هزینه بر را طی می‌کردند تا سرانجام اجازه‌ی نمایش عمومی پیدا کنند. با گذشت زمان، از دل آزمایشگاه‌های گوگل (Google Labs، پروژه‌های جدید گوگل ابتدا در آزمایشگاه تولید و به نمایش گذاشته می‌شوند و سپس عمومی می‌شوند) پروژه‌ای به نام Google Map Maker بیرون آمد که وظیفهٔ آن تسهیل در ساخت و به روز رسانی نقشه‌ها بود.

گوگل مپ میکر در ژوئن ۲۰۰۸ از آزمایشگاه بیرون داده شد و همزمان ۶۰ کشور را برای ساخت نقشه پشتیبانی می‌کرد که ایران نیز البته جزء آن بود. در گوگل مپ میکر، کاربران از هر جای زمین می‌توانند نقشه‌ها را توسعه دهند، ویرایش کنند و یا حذف کنند. اطلاعاتی که کاربران عادی وارد می‌کنند ممکن است قابل اطمینان نباشد، بنابراین گوگل قوانینی برای اطمینان حاصل کردن از اطلاعات وارد شده وضع کرده است. کاربرانی که بیشتر از همه اطلاعات تایید شده دارند، رتبهٔ بالاتری در گوگل مپ میکر دارند و کاربران پایین تر برای انتشار نقشه‌های کشیده شده باید منتظر تایید کاربران ردهٔ بالاتر باشند.

قوانین دیگری هم وجود دارد، برای مثال هنگام وارد کردن اطلاعات یک مکان از شما پرسیده می‌شود چطور از صحت اطلاعات این مکان اطمینان دارید و پاسخ می‌دهید چون من اینجا زندگی می‌کنم! در حال حاضر سرویس گوگل مپ به واسطهٔ نقشه‌های کشیده شده توسط کاربران در بیش از ۱۶۰ کشور جهان، نقشه‌های قابل اطمینانی دارد. نقشه‌ها و عکس‌های گوگل مپ در ایران نیز دارای کیفیت مطلوبی هستند

 درج نقشه گوگل به روش 

 mapsengine.google.com

 برای ایجاد نقشه کافی است  وارد این صفحه شده و سپس مشخصات حساب کاربری خود را ( اکانت Gmail ) وارد کنید.

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

حال بر روی Sign in کلیک کنید پس از بررسی و درست بودن حساب کاربری شما فرم زیر به نمایش در می اید.

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

پس از مشاهده این صفحه بر روی Create a new map کلیک کنید تا نقشه جدید خودتان را بسازید.

حال نقشه گوگل برای شما به نمایش در می اید همانند تصویر زیر:

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

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

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

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

برای مثال میتوانید کارهای زیر را انجام دهید.

شما میتوانید :

  • موقعیت دقیق آدرس دلخواه خود را به نمایش دهید.
  • مسیر هایی که از مبدا به مقصد منتهی میشوند را به نمایش دهید.
  • و …

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

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

حال طبق تصویر زیر مشخصات موقعیت خود را وارد کنید.

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

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

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

 

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

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

 

حال بر روی دکمه …Change کلیک کرده تا کادر زیر به نمایش در بیاید

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

پس از نمایش این کادر شما از بین گزینه ها ، گزینه Public on the web را کلیک کنید و سپس بر روی دکمه سبز رنگ Save کلیک کنید و از فرم قبلی دکمه ابی رنگ Done کلیک کنید.

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

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

 

پس از کلیک بر روی عکس پوشه حال بر روی گزینه Embed on my site کلیک کنید.

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

 

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

 

در بلاگ اسکای میتوانید هم در قالب و هم در پست های خود از این کد استفاده کنید . در قالب که مشخص است ، در مطالب هم کافیست که قسمت یادداشت جدید را در حالت “مشاهده کد HTML” قرار دهید و کد کپی شده را در ویرایشگر paste نمائید.

 

 

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

در ادامه شروع کار با Google Maps JavaScript API V3 را با هم بررسی می کنیم.

درج نقشه گوگل به روش  Google Maps API

برای استفاده از این سرویس در وب سایت یا وبلاگ خود، قبل از هر چیز باید کلید لازم برای ارتباط دامنه خود با گوگل را بدست بیاورید. البته این کلید فقط در برخی مواقع ضروری است. دریافت این key با ثبت نام در Google Maps API براحتی از طرف گوگل برای شما نمایش داده می شود.

ساده ترین نوع پیاده سازی (برنامه Hello, World)

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        html {
            height: 100%
        }
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #map_canvas {
            height: 100%
        }
    </style>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var myLatlng = new google.maps.LatLng(35.695964, 51.417704);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

کدهای بالا خیلی گویا هستند ولی چند نکته برای توجه وجود دارد:
• با استفاده از <!DOCTYPE html> مشخص کردیم که مرورگر این صفحه را با استانداردهای html5 پردازش کند.
• کدهای مربوط به API را در داخل تگ script قرار دادیم.
• یک div با شناسه “map_canvas” برای نشان دادن نقشه در نظر گرفتیم.
• با استفاده از اتریبیوت onload تگ body، نقشه را initialize یا مقداردهی اولیه کردیم.
اطلاعات بیشتر در Google Maps Javascript API V3 Tutorial ارائه شده است.

همین مراحل برای نمایش نقشه زیر کافیست:

 

درج نقشه گوگل به روش  google map LatLng

ابتدا باید مختصات محلی را که قرار است نمایش دهیم را بدست بیاوریم. به این مختصات در google map LatLng گفته میشود. برای بدست آوردن این مختصات به این سایت مراجعه کنید.

پس از بدست آوردن مختصات یک صفحه html ایجاد کرده و کدهای زیر را درون آن قرار دهید (از این فایل میتوانید به عنوان یک تمپلیت استفاده کنید).

 
 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Google Maps</title>
    <style type="text/css">
      #map-canvas{
        width: 700px;
        height: 500px;
        margin: 0 auto;
      }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
       function initialize() {
         var myLatlng = new google.maps.LatLng(36.28695466492734, 59.615657329559326);
         var mapOptions = {
           zoom: 15,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         }
          
         var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          
         var contentString = '<div style="direction: rtl; text-align: right;font-family: Tahoma;">' +
                                     '<h4>حرم امام رضا علیه السلام</h4>' +
                                      '<h5>آپارنت</h5>' +
                                      '</div>';
          
         var infowindow = new google.maps.InfoWindow({
           content: contentString
         });
          
         var marker = new google.maps.Marker({
           position: myLatlng,
           map: map,
           title: 'Imam Reza'
         });
          
         infowindow.open(map, marker);
         google.maps.event.addListener(marker, 'click', function() {
           infowindow.open(map, marker);
         });
       }
    </script>
</head>
<body onload="initialize()">
    <div id="map-canvas"></div>
</body>
</html>

نحوه استفاده: در خط شانزدهم مختصات خودتان را جایگزین این مختصات کنید.

در خط هجدهم میتوانید مقدار zoom را مشخص کنید.

در خط بیست و پنجم کد htmlیی که قرار است در Box سفید نمایش داده شود را باید قرار دهید.

در خط سی و هفتم عنوان محل مورد نظر را میتوانید قرار دهید.

به همین سادگی توانستیم یک محل را در Google map مارک کرده و به دیگران ارائه دهیم.

پی نوشت

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

 

QR Code For: آموزش قراردادن نقشه گوگل در وب سایت

درباره ی jizjiz

پاسخ دهید

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

Time limit is exhausted. Please reload CAPTCHA.