نقشه 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 پلاگین برای کار با نقشه معرفی شده است.

یادداشت‌های مرتبط

علیرضا معظمی

مجری پروژه‌های خاص طراحی و برنامه‌نویسی وب

آموزش‌ها

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

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: