دوشنبه , اردیبهشت ۳۱ ۱۳۹۷
صفحه اصلی / مقالات / زبانهای برنامه نویسی / وب / HTML / چگونگی استفاده از نقشه‌های گوگل در سایت؟

چگونگی استفاده از نقشه‌های گوگل در سایت؟

 

در انتهای این اموزش شما باید بتوانید چنین صفحاتی را به راحتی بسازید

map.ebrahiminejad.com

 

نقشه های گوگل (google maps) از قابلیت های جالبی است که گوگل به رایگان در اختیار کاربران قرار میدهد

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

یک نمونه را با هم میسازیم و در ادامه خواص و توانایی های این سیستم را برسی میکنی

 

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

تا مطالب را کامل بیاموزید کد را بزنید که در ادامه نوشته شده و خروجی بگیرید بعد توضیحات ادامه را بخوانید

تا در صورت مشکل یا عدم درک بتوانید مشکل را حل کنید و به شکلی که میخواهید کد را بهبود دهید

 

 

 

 

<!DOCTYPE html>

<html>

      <head>

      <script src = "http://maps.googleapis.com/maps/api/js"></script>

      <script>

         function loadMap() {       

            var mapOptions = {

               center:new google.maps.LatLng(32.5848, 56.515777),

               zoom:4,

               mapTypeId:google.maps.MapTypeId.ROADMAP

            };                      

            var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

         }

         google.maps.event.addDomListener(window, 'load', loadMap);

      </script>

         </head>

      <body>

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

   </body>

</html>

 

خروجی مانند عکس بالا خواهد بود

توضیح کد

اول باید api جاوا اسکریپتی مربوط به گوگل را وارد کنید

      

<script src = "http://maps.googleapis.com/maps/api/js"></script>

 

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

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

 

قدم بعد تنظیمات نقشه است که در ادامه توضیح داده میشود

 

 function loadMap() { 

            var mapOptions = {

               center:new google.maps.LatLng(32.5848, 56.515777),

               zoom:4,

               mapTypeId:google.maps.MapTypeId.ROADMAP

            };              

            var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

         }

 

یک تابع با نام loadMap تعریف کردید

که در ان شی با نام mapOptions که این نام دلخواه است تعریف کردید

و یک شی دیگر با نام map تعریف کردید

 

در قسمت mapoptions

این ۳ خاصیت اصلی نقشه را  معرفی و مقدار دهی کردید

۱-center  : برای این ویيکی باید مختصات مکانی را که میخواهید در نقشه نمایش داده شود را وارد کنید برای وارد کردن مختصات مکان مورد نظرمون باید یک شی از نوع latlan بسازیم و عرض و طول چقرافیایی را برای ان مشخص کنیم

۲- zoom : میزان بزرگنمایی نقشه را در این بخش مشخص میکنیم

۳- maptupeld: برای این ویژگی باید نوع نقشه ای که باید در سایتمان قرار بگیرد را مشخص کنیم که بصورت پیش فرض ROADMAP است که نمایی از جاده ها و خیابان ها را نمایش میدهد

 

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

 

در قسمت تعریف شی map

var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

 

برای ساخت نقشه باید یک شی از کلاس google.maps.map بسازیم که ۲ مقدار ورودی میگیرد یکی همان مخزن نمایش دهنده ی نقشه (یعنی همان div که میخواهیم نقشه در ان نمایش داده شود) و دومی همان شی mapoptions که تنظیمات نقشه را در ان مشخص کرده ایم

 

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

که مشخص میکنیم زمانی که سایتمان لود شد تابع loadmap که ساختیم اجرا شود و همان طور که میبینید ورودی سوم نام تابعی است که میخواهیم اجرا شود

    google.maps.event.addDomListener(window, 'load', loadMap);

 

 

 

 

 

چه نوع نقشه هایی را میتوان به کاربر نمایش داد؟

۴ دسته ی اصلی نقشه ها که میتوان به کاربران نمایش داد را در زیر برای شما همراه با توضیح قرار داده ام

 

 

 

۱-SATELLITE  :گزینه ی مورد علاقه ی من نمای ماهواره ای است که تمام موارد در محیط بصورت عکس هوایی و ماهواره ای قابل دسترس است اگر قبلا با نرم افزار گوگل ارث کار کرده باشید دقیقا مشابه ان نرم افزار خروجی خواهید داشت

۲-ROADMAP : گزینه ی پیش فرض است که نمایشی از راه ها خیابان ها کوچه ها و.. را به شما میدهد

۳-HYBRID : این گزینه ترکیب ۲ گزینه ی قبل است یعنی روی نقشه های ماهواره ای جاده ها و راه های اصلی را مشخص میکند روش جالبیست البته اگر به نقشه محل اشنا نباشید شاید کمی گیج کننده باشد این ترکیب اما بسیار جذاب است

۴-TERRAIN :در صورتی که بخواهید نقشه ای مربوط به پوشش گیاهی عوارض زمین رودخانه ها و… را مشاهده کنید از این نقشه استفاده کنید

 

 

 

 

 

روش استفاده از این نقشه ها به چه صورت است ؟

 

درصورتی که بخواهید از این نقشه ها در نرم افزارتان استفاده کنید باید فقط یک خط از کد را ویرایش کنید

 

        mapTypeId:google.maps.MapTypeId.ROADMAP

 

در مثال زده شده از نوع نقشه ی ROADMAP استفاده شده در صورتی که بخواهید از نقشه ی دیگری استفاده کنید باید اخر این خط را تغییر دهید به عنوان مثال میخواهید نقشه را از نوع ماهواره ای تعریف کنید کافیست اخر این خط را به جای ROADMAP  به SATELLITE تغییر دهید به این صورت

mapTypeId:google.maps.MapTypeId.SATELLITE

 

برای TERRAIN

mapTypeId:google.maps.MapTypeId.TERRAIN

 

و برای HYBRID هم به همین شکل

mapTypeId:google.maps.MapTypeId.HYBRID

 

نمای کلی از کد

<!DOCTYPE html>

<html>

      <head>

      <script src = "http://maps.googleapis.com/maps/api/js"></script>

      <script>

         function loadMap() {       

            var mapOptions = {

               center:new google.maps.LatLng(32.5848, 56.515777),

               zoom:4,

               mapTypeId:google.maps.MapTypeId.SATELLITE

            };                      

            var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

         }

         google.maps.event.addDomListener(window, 'load', loadMap);

      </script>

         </head>

      <body>

      <div id = "mymap" style = "width:100%; height:500px;"></div>

   </body>

</html>

 

چگونه میتوانیم زبان این نقشه را به فارسی تغییر دهیم؟

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

یعنی از این شکل

<script src = "http://maps.googleapis.com/maps/api/js"></script>

 

به این شکل تغییر دهیم

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

 

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

 

 

برطرف کردن مشکل نقشه ها در سایت

این کدها بر روی لوکال بدون هیچ مشکلی اجرا میشوند اما زمانی که کد را بر روی سرور اپلود کردید با مشکل مواحه میشوید برای انکه مدتی است گوگل اجازه نمیدهد که بدون داشتن api key از این سرویس در سایت ها استفاده کنید خوشبختانه گرفتن این کلید رایگان است ولی بدلیل تحریم ها پیشنهاد میشود ای پی خود را تغییر دهید تا در زمان گرفتن کد دچار مشکل نشوید بعد از گرفتن API   کد دیگر هیچ گاه با مشکل برای استفاده از این نقشه های مواجه نخواهید شد

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

https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

 

 

روی دکمه ی get a key    کلیک کنید

در کادر به نمایش در امده یک نام دلخواه وارد کنید و روی دکمه ی enable API کلیک کنید

در پنجره ی بعد کد api به شما داده میشود

چگونه کد  api  را به کد های خو اضافه کنیم ؟

فقط کافیست

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

 

را به کد زیر تغییر شکل دهید

<script src = "https://maps.googleapis.com/maps/api/js?language=fa&key=AIzaSyAKefvkV0v696yGIlPgh2fzLw3ohN982U0"></script>

 

یعنی کافیست به این شکل عمل کنید  کد دریافتی = key میبینید که خواص را با & از هم جدا کردیم

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

مانند این صفحه باید مثال قبل شده باشد

map.ebrahiminejad.com

کد به شکل زیر باید تغییر کرده باشد

 

 

 

 

<!DOCTYPE html>

<html>

      <head>

     <script src =  "  https://maps.googleapis.com/maps/api/js?language=fa&key=AIzaSyAKefvkV0v696yGIlPgh2fzLw3ohN982U0"></script>

     <script>

         function loadMap() {           

            var mapOptions = {

               center:new google.maps.LatLng(32.5848, 56.515777),

               zoom:5,

               mapTypeId:google.maps.MapTypeId.HYBRID    ,

                                                fullscreenControl: true

            };                             

            var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

         }

         google.maps.event.addDomListener(window, 'load', loadMap);

      </script>

         </head>

      <body>

      <div id = "mymap" style = "width:100%; height:700px;"></div>

   </body>

</html>

 

افزودن خواص به google map چگونه است؟

به عنوان مثال خاصیت فول اسکرین فقط کافیست fullscreenControl: true را در کد اضافه کنید به این صورت

  <script>

         function loadMap() {     

            var mapOptions = {

               center:new google.maps.LatLng(32.5848, 56.515777),

               zoom:5,

               mapTypeId:google.maps.MapTypeId.HYBRID    ,

                                       fullscreenControl: true

            };                      

            var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

         }

         google.maps.event.addDomListener(window, 'load', loadMap);

      </script>

 

چگونه مختصات نقطه ای را که میخواهم نقشه ی گوگل نمایش دهد را پیدا کنم ؟

کافیست به ادرس

maps.google.com

و روی نقشه به ادرسی که میخواهید بروید و روی انجا راست کلیک کنید گزینه ی what’s Here  را انتخاب کنید و طول و عرض جغرافیایی به شما داده میشود

حال همین مقادیر را وارد کد میکنم با زوم ۲۰ که باید میدان ازادی را نمایش دهد

<!DOCTYPE html>

<html>

      <head>

     <script src = "https://maps.googleapis.com/maps/api/js?language=fa&key=AIzaSyAKefvkV0v696yGIlPgh2fzLw3ohN982U0"></script>

     <script>

         function loadMap() {       

            var mapOptions = {

               center:new google.maps.LatLng(35.699698, 51.336909),

               zoom:20,

               mapTypeId:google.maps.MapTypeId.HYBRID    ,

                       fullscreenControl: true

            };                      

            var map = new google.maps.Map(document.getElementById("mymap"),mapOptions);

         }

         google.maps.event.addDomListener(window, 'load', loadMap);

      </script>

         </head>

      <body>

      <div id = "mymap" style = "width:100%; height:700px;"></div>

   </body>

</html>

 

درباره فرخ ابراهمی نژاد

فرخ ابراهمی نژاد
نویسنده‌ی کتاب yii framework برای برنامه نویسان php برنده‌ی دو دوره جشنواره‌ی وب ایران برای سایت linkpad.ir نویسنده, مدرس, مشاور و تولید کننده‌ی نرم افزار فرخ فوق‌لیسانس و لیسانس نرم‌افزار خوانده اما اعتقاد دارد برای موفقیت و رسیدن به درآمد وکسب‌وکار آنلاین نیاز به تحصیلات در دانشگاه ندارید.

این مطالب را نیز ببینید!

جداول در HTML از ۰ تا ۱۰۰ از کتاب خودم

جدول در HTML از ۰ تا ۱۰۰ تگ‌های اصلی یک جدول کدامند؟   <table> <tr> …

5 دیدگاه‌ها

  1. لطفا در مورد هدفمنی این سرویس بیشتر توضیح دهید

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

پاسخ دهید

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