بدون شک سرویس نقشه گوگل یکی از بهترین و قدرتمندترین سرویسهای نقشه است
که استفاده از آن بسیار متداول شده است. کار با این سرویس ساده است. اگر
شما قصد نمایش یک آدرس به صورت ایستا را داشته باشید، کافی است از آدرسی
شبیه این استفاده کنید و با چندخط کد میتوان به سادگی مکان موردنظر را روی نقشه به همراه متن دلخواه و ... نمایش داد مثلا:
<!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 پلاگین برای کار با نقشه معرفی شده است.