آموزش GoogleMap

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

مثل همیشه مثال را بدون توضیحات اضافه شروع می کنیم. (من خودم شخصا توضیحات طولانی را برای آموزش نمی پسندم و دوست دارم کد با مختصری توضیحات ارائه شود)

بسم الله الرحمن الرحیم

آموزش GoogleMap



<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
//این خط ثابت است

<script>
var myCenter=new google.maps.LatLng(29.621184,52.499063);
//به جای این اعداد کافی است در گوگا مپ مکان خود را پیدا کنید
//و سپس بر روی مکان خود کلیک راست کنید و 
//whats here?
//را انتخاب کنید

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:13,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

//می توانستیم به جای قراردادن موقعیت خودمان در متغییر
//myCenter
// همین جا آدرس را بنویسیم ولی برای ساده تر شدن و تفکیک این کار را انجام دادیم
//پراپرتی Center
// درواقع مشخص می کند وسط نقشه شما چه جایی باید نمایش داده شود
//zoom
//برای نمایش میزان زوم اولیه در لود نقشه است
//mapTypeId
//می تواند یکی از نوع های زیر باشد لطفا تست کنید
//ROADMAP (normal, default 2D map)
//SATELLITE (photographic map)
//HYBRID (photographic map + roads and city names)
//TERRAIN (map with mountains, rivers, etc.)



var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

//محل قرار گیری پوینتر مربوط به مکان شما
var marker=new google.maps.Marker({
  position:myCenter,
  });
//اضافه کردن پوینتر به مپ
marker.setMap(map);
}
// فراخوانی سرویس پس از لود کامل صفحه 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
//مشخصات دیو شما برای نمایش مپ ما در این جا فقط سایز را مشخص کردیم شما استایل و .. را می توانید اضافه کنید
<div id="googleMap" style="width:900px;height:380px;"></div>
</body>
</html>