آکامیت

آموزش کار با گوگل مپ ( مقدمه و سرآغاز کار )

در این دوره ما میخواهیم نحوه استفاده از گوگل مپ در طراحی وب رو به طور کامل برای شما عزیزان آموزش بدهیم . شما میتوانید با کلیک روی این لینک تمام آموزش های این دروه ببنید .

 

گوگل مپ و API چیست :

گوگل مپ : (Google Maps) یا سرویس نقشه ی آنلاین گوگل یکی از دهها خدمات رایگان گوگل در وب است .

API : به معنی رابط برنامه نویسی کاربردی در واقع ابزار هایی است که به برنامه نویسان کمک می کنند تا از کدهای در دسترس یک سرویس دیگر به راحتی استفاده کنند. به عبارتی برنامه نویس برای استفاده از یک سرویس احتیاجی به بازنویسی کل آن سرویس ندارد و از کدهای در دسترس قرار داده شده آن سرویس استفاده می کند .

 

مرحله ۱ : ایجاد یک سند HTML

ابتدا یک سند HTML ایجاد کنید .

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>


   </body>
   
</html>

 

مرحله ۲ : اضافه کردن API گوگل مپ

با استفاده از کد اسکریپت زیر در قسمت head شما میتوانید API گوگل مپ را به راحتی اضافه کنید .

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

 

مرحله ۳ : اضافه کردن تگ div

در مکانی که دوست دارید نقشه به نمایش گذاشته شود یک تک div با خصوصیات زیر بسازید .

<div id = "sample" style = "width:900px; height:580px;"></div>

 

مرحله ۴ : اضافه کردن نقشه

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

۱ . مکان نقشه

۲ . مقدار زوم در نقشه

۳ . نحوه نمایش نقشه

حال یک تگ <script></script> در قسمت head بسازید . و تابع زیر را در بین این دو تگ قرار بدهید :

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

حال یک شی برای نقشه ساخته و در بین این تابع قرار دهید :

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

 

مرحله ۵ : نمایش نقشه

در نهایت ، کد زیر را در آخر تگ <script> قرار دهید تا نقشه لود شود .

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

 

مثال کلی

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

 

خروجی کد بالا :

 

admin

آکادمی آموزش آی تی یا به مختصر آکامیت فعالیت خود را از اولین روز تابستان سال 1395 آغاز کرده است و هدف آن بهبود سطح دانش مردم در حوزه آی تی میباشد .

اضافه کردن نظر

ما را دنبال کنید !

شما می توانید به راحتی با ما در تماس باشید ، ما نیز از پیدا کردن دوستان جدید بسیار خوشحال میشویم.


instagram aparat Google-plus Telegram_Messenger facebook