برنامه notepad ویندوز را باز کنید
فایل را بصورتی که در زیر گفته شد ه ذخیره نمائید :

save as type = all types

encoding = ansi  ( اگر فارسی نویسی داشتیم utf-8 را انتخاب کنید )

file name= نام فایل .html

محل ذخیره مثلا در دسک تاپ

 
 حالا به ترتیب قسمت های مختلف برنامه را توضیح می دهم و در انتهای صفحه دستورات کامل را مشاهده خواهید کرد
 

در خط اول دستور زیر را قرار دهید :

<!DOCTYPE html>

یعنی با زبان html برنامه می نویسیم

 
بار گذاری نقشه گوگل قبل از بارگذاری بقیه قسمت های صفحه
 
 با افزودن دستور اسکریپت زیر به محض فراخوانی شدن صفحه و قبل از بار گذاری بقیه محتوای صفحه تلاش می شود تا نقشه گوگل بار گذاری شود
 حالا باید با دستور زیر API Key دریافتی را در برنامه قرار دهیم
 
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
 
 جلوی key شماره API KEY که از گوگل دریافت کردید را به جای YOUR_API_KEY بنویسید
 
 اگر موفق به دریافت api key نشدید می توانید از شماره api key زیر که مربوط به سایت w3school است استفاده کنید

 

AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM

 

 استفاده از پارامتر sensor اجباری است .

و مشخص می کند ایا برنامه ما از سنسوری مثل مکان یاب   GPS  برای مکان یابی کاربر ، استفاده می کند یا نه 

 
 در صورتیکه برنامه شما باید یک حالت امن و محافظت شده داشته باشد از https استفاده کنید یعنی از فرمول زیر :

 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
 مشاهده و اجرای برنامه کامل
 
 
تنظیم ویژگیهای نقشه
  حالا می خواهیم ویژگیهای نقشه را مشخص کنیم
 مثلا سه ویژگی زیر را در نظر بگیرید
  •  Center
 این مشخصه مشخص می کند مرکزیت نقشه کجا باشد . یک شی LatLng  ایجاد می کنیم و توسط ان مرکزیت نقشه را مشخص می کنیم

 

center:new google.maps.LatLng(51.508742,-0.120850)

پس latlng به نقطه مرکز ( نه وسط ) نقشه اشاره دارد . در پرانتز عرض و طول جغرافیایی ان محل را می نویسیم ک در این مثال که از سایت w3schools گرفته شده این نقطه به لندن اشاره دارد

  •  Zoom
 این مشخصه میزان بزرگ نمایی اولیه و پیش فرض نقشه را مشخص می کند . مقدار صفر برای این مشخصه به معنای این است که با بیشترین بزرگ نمایی نقشه نمایش یابد . عددهای بزرگتر برای بزرگ نمایی برای رزولوشن های بزرگ تر کاربرد دارد
 
  •  MapTypeId
 این مشخصه نوع نقشه ای را که می خواهیم ببینیم مشخص می کند
 انواع زیر برای نقشه ها وجود دارد :
 ROADMAP ( مقدار پیش فرض است و نقشه دو بعدی است )
 SATELLITE ( نقشه عکسبرداری شده است )
 HYBRID ( نقشه تصویر برداری شده به همراه جاده ها و نام شهرها ست )
 TERRAIN( نقشه ای با کوهها و دریاها و رودخانه ها و ... ) 
 
 حالا روش مقدار دادن به این مشخصه ها بصورت زیر است :

 

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

 
محل نمایش نقشه گوگل
 از تگ div اغلب برای نمایش و قرار داد ن نقشه گوگل استفاده می شود
 

 

<div id="googleMap" style="width:500px;height:380px;"></div>
 
 بهتر است اندازه عرض و ارتفا ع محل نمایش نقشه را حتما مشخص کنید
 توجه داشته باشید این دستور فقط یک تگ دایو خالی با ای دی googleMap  ایجاد کرده است و هنوز در ان نقشه قرار نگرفته است
 
 
ایجاد کردن شی map
 

 

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

 
 دستور بالا باعث ایجاد نقشه جدید در تگ دایو که ای دی ان googlemap است می شود
 نکته : در صورتیکه می خواهید چندین نقشه در یک صفحه وب داشته باشید کافی است به تعداد مورد نیاز از این شی بسازید
 
 مثال زیر چهار نقشه با انواع مختلف در یک صفحه وب ایجاد می کند :

 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

 

 
 مشاهده و اجرای برنامه کامل
 
مرحله نهایی
 حالا تابعی به نام دلخواه initialize داریم که در ان دستورات مربوط به ایجاد نقشه نوشته می شود حالا دستوری می نویسیم که  بعد از بار گذاری کامل محتوای صفحه وب این تابع فراخوانی شود و نقشه را ایجاد کند
 

 

google.maps.event.addDomListener(window, 'load', initialize);
 
برنامه کامل این مثال
 دستورات زیر را در فایل notepad کپی کنید و با دابل کلیک روی ان براحتی اجرا را مشاهده نمائید
 
 

 

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  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>