ایجاد: ۱۳:۰۴ ۱۳۹۱/۱۲/۱۴
ویرایش: ۶:۲۳ ۱۳۹۵/۴/۲۳

آموزش‌ها

»

نقشه Google در سایت شما

بدون شک سرویس نقشه گوگل یکی از بهترین و قدرتمندترین سرویس‌های نقشه است که استفاده از آن بسیار متداول شده است. کار با این سرویس ساده است. اگر شما قصد نمایش یک آدرس به صورت ایستا را داشته باشید، کافی است از آدرسی شبیه این استفاده کنید و با چندخط کد می‌توان به سادگی مکان موردنظر را روی نقشه به همراه متن دلخواه و ... نمایش داد مثلا:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
  <div id="myMap" style="width:480px;height:320px;"></div>
  <script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
  <script>
    window.onload=function(){
      var myLocation = new google.maps.LatLng(35.7015, 51.3921), mapOptions = {
          zoom: 17,
          center: myLocation,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }, map = new google.maps.Map(document.getElementById("myMap"), mapOptions), infowindow = new google.maps.InfoWindow({
          content: '<div style="direction:rtl;color:red;text-align:right;font:bold 17px Tahoma;">انقلاب<br>تهران</div>'
        }), marker = new google.maps.Marker({
          position: myLocation,
          map: map
        });
      infowindow.open(map, marker);
    }
  </script>
</body>
</html>

مثال فوق یک مثال ساده است و برای مطالعه راهنمای کامل در مورد کدنویسی آن می‌‌توانید به راهنما و مستندات Google Map مراجعه کنید. علاوه بر سایت اصلی، کتاب Google Maps JavaScript API Cookbook از انتشارات Packt Publishing که به تازگی منتشر شده نیز راهنمای خوب و کاملی است برای کسانی که بخواهند مطالعه جامعی در این زمینه داشته باشند و کاملا به استفاده از نقشه مسلط شوند.

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

  • Maplace.js
    یک پلاگین سبک 13 کیلوبایتی جهت نمایش نقطه و مسیر روی نقشه گوگل که کار با آن بسیار بسیار ساده است...
  • initmap.js
    این پلاگین بسیار سبک، امکان استفاده از HTML5 Geolocation را برای گرفتن موقعیت فعلی کاربر فراهم می‌کند. همچنین امکان علامت‌گذاری مکان‌ها را روی نقشه میسر کرده است.
  • Geo complete
    یک پلاگین عالی جی‌کوئری برای استفاده از نقشه گوگل با قابلیت Auto complete و ... که تنها 2 کیلوبایت به حجم صفحه شما اضافه خواهد کرد.
  • jQuery Google Map
    یک پلاگین ساده دیگر که امکان علامت‌گذاری یک یا چند نقطه به همراه توضیحات و همچنین قابلیت نمایش مسیر را دارد. (مشاهده پیش‌نمایش)
  • prettymaps.js
    یک پلاگین ساده دیگر برای کار با نقشه گوگل مشابه سایر موارد.
  • Mappy
    یک پلاگین قدرتمند برای نمایش یک مکان، انتخاب یک مکان توسط کاربر (Place Picker)، گرفتن اطلاعات یک مکان از کاربر، جستجوی مکان‌ها و ...
    این پلاگین به شدت متناسب با سایتی است که خدماتی شبیه خدمات املاک ارائه می‌دهد یعنی اطلاعات یک مکان را از مشتری می‌گیرد، املاک یک محدوده خاص را نمایش می‌دهد، قابلیت جستجوی املاک را دارد و ...
  • Nome
    این پلاگین در اصل برای استخراج مکان فعلی و محاسبه فاصله و ... بر اساس geoLocation موجود در HTML5 است که برای کارهای همراه نقشه گوگل نیز کاربرد دارد.
  • Lazy-loading Google Maps
    این پلاگین همانطور که از نام‌ش پیداست، برای lazy load کردن نقشه گوگل است. شاید شما تکنیک lazy load را برای تصاویر دیده باشید که در برخی مقالات طولانی که لابلای آن تصاویری نیز وجود دارد، تا زمانی که شما به آن قسمت مقاله اسکرول نکرده باشید، تصویر لود نمی‌شود. پلاگین فوق همین کار را برای نقشه گوگل انجام می‌دهد لذا اگر شما در صفحه‌تان چندین نقشه گوگل دارید، با استفاده از این پلاگین می‌توانید در صورت ورود کاربر به آن منطقه آن را لود کنید.
  • JQuery Location Picker
    این پلاگین هم نامش گویاست. کسانی که در فرم‌شان، می‌خواهند امکان مشخص کردن یک مکان را نیز برای مشتری فراهم آورند، از این پلاگین لذت خواهند برد.
  • NG Map
    همانطور که از اسمش هم پیداست، یک پلاگین انگولری برای کار با نقشه گوگل است که در عین حجم کم (زیر 10 کیلو) اما نسبتا کامل است و انواع نقطه و مسیر و ... را با ان می‌توانید نمایش دهید و همچنین رویدادها را نمایش دهید یا ثبت کنید و ...
در این آدرس نیز حدود 15 پلاگین برای کار با نقشه معرفی شده است.
یادداشت‌های مرتبط
  1. کشیدن و انداختن (رها کردن)
  2. برنامه‌های تحت وب آفلاین، چرا و چگونه؟
  3. نمودارها در صفحات وب
  4. ساخت اپلیکیشن‌های کلاینتی با AngularJS گوگل
  5. ابرکوکی و ذخیره‌ساز جدید HTML5
  6. انیمیشن با CSS
  7. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
  8. ثبت نام و ورود به بخش کاربری با حساب گوگل، فیس بوک، توئیتر و ...
  9. کار با قابلیت Page Visibility و کاربردهای آن
  10. اعتبارسنجی و شکل‌دهی فرم‌ها با استفاده از html5
  11. ادیتورهای محتوای غنی‌شده برای صفحات وب
  12. html نسخه 5
  13. پخش‌کننده‌های فایل صوتی تصویری در صفحات وب
  14. برنامه نویسی اندروید
  15. درباره نود جی اس
  16. کار با تصاویر در سمت کاربر
  17. نکاتی پیرامون SEO (بهینه سازی سایت جهت موتورهای جستجو)
  18. پلاگین‌های جی‌کوئری برای استفاده بهتر از خدمات گوگل

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام آموزش‌ها

تبلیغات

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

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: