Google Maps API چیست؟

برای اینکه با مفهوم Google Maps API اشنا بشین ابتدا باید با یک تعریف آشنا بشین.

Google Map:

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

Google Maps API چیست؟

API مخفف عبارت Application Programming Interface به معنی رابط کاربری برنامه نویسی است. Google Maps API به شما اجازه میده که محل کارتون و دفتر سایتتون روی نقشه شخصی سازی سازی کنید.

ساختن یک نقشه عمومی گوگل :

ما میخوایم در صفحه وبسایتمون یک نقشه گوگل داشته باشیم. باید گام های زیر را پشت سر بگذاریم:
۱٫ بارگذاری Google API : باید بدونین که Google Maps API یک کتابخونه JavaScript هست. اون با تگ <script> به صفحه وبمون افزوده میشه.

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

2. تنظیم خواص نقشه : یک تابع رو میسازیم که نقشه رو مقدار دهی اولیه میده.

function initialize() {

}

درتابع مقدار دهی، یک شیء میسازه (mapProp) تا ویژگی هایی برای نقشه تعریف کنه.

 var mapProp = {
center:newgoogle.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP

};

 

ویژگی center مشخص میکنه که مرکز نقشه کجا باشه. با ساختن شیء LatLng مرکز نقشه روی یک نقطه خاص قرار میگیره و اونهم به شکل مختصات طول جغرافیایی و عرض جغرافیایی می باشد. ویژگی zoom سطح بزرگنمایی رو برای نقشه مشخص میکنه، عدد ۰ نشان دهنده کوچکنمایی نقشه زمین است. بزرگنمایی بالاتر مستلزم رزولیشن بالاتر تصویر میباشد. در آخر ویژگی mapTypeId نوع نمایش نقشه رو مشخص میکنه. انواعی که این ویژگی پشتیبانی میکنه به صورت زیر است:

  • ROADMAP: نمایش معمولی و ذوبعدی
  • SATELLITE: نقشه عکاسی شده
  • HYBRID: نقشه عکاسی شده به همراه جاده ها و اسامی شهرها
  • TERRAIN: نقشه همراه کوه ها،رودخانه ها و …

۳٫ ساختن یک ظرف نقشه:

به کمک عنصر <div> نقشه رو درون اون نگه میداریم و با استفاده از CSS به عنصرمون اندازه میدیم.

 <div id=”googleMap”style=”width:500px;height:380px;”></div>

4. ایجاد یک شیء نقشه:

var map=newgoogle.maps.Map(document.getElementById(“googleMap”), mapProp);

کد بالا یک نقشه جدید داخل عنصر <div> به همراه “id=”googleMap ایجاد میکنه و از پارامترهایی که از (mapProp) گذر کردند استفاده میکنه.

۵٫ افزودن یک شنونده رویداد در بارگذاری نقشه :

با افزودن یک شنونده DOM که تابع مقدار دهی (()initialize) رو هنگام بارگذاری پنجره اجرا خواهد کرد.

google.maps.event.addDomListener(window,’load’, initialize);

ایجاد یک گوگل مپ :

در زیر یک مثال از آنچه گفته شده براتون تهیه کردیم و مرکز اون ایران – تهران هست :

<!DOCTYPE html>
<html>
<head>
<script src=”http://maps.googleapis.com/maps/api/js”>
</script>
<script>
function initialize() {

var mapProp = {
center:new google.maps.LatLng(32.420654,53.682362,5),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);

}
google.maps.event.addDomListener(window, ‘load’, initialize);

</script>
</head>
<body>
<div id=”googleMap” style=”width:500px;height:380px;”></div>
</body>
</html>

این مقاله مقدمه ایی در مورد Google Map بود. با همراهی ما در مقاله های بعدی از امکانات بیشتر دراین سرویس بهره ببرین و در موردشون بیشتر بدونین.

اگر علاقه مند شدید تا درباره Google Map بیشتر یاد بگیرید پیشنهاد میکنم این دوره رو نیز ببینید .

ممنون از همراهیتون.

نوشته Google Maps API چیست؟ اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.

مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses