overlay ها علائمی روی نقشه هستند که در عرض و طول جغرافیایی خاصی قرار می گیرند
  • google maps دارای انواع متنوعی از overlay است :
  • Marker : یک محل روی نقشه است . مارکر ها می توانند حاوی یک تصویر دلخواه باشند 
  •  Polyline :مجموعه ای از خطوط مستقیم روی نقشه 
  •  Polygon : مجموعه ای از خطوط مستقیم روی نقشه که تشکیل یک شکل بسته را می دهند 
  •  دایره و مستطیل
  •  Info Windows : بالای نقشه در یک پنجره بالن  ،  اطلاعاتی را نمایش می دهد 
  •  overlay های اختیاری
روش افزودن یک مارکر

 با سازنده Marker  می توان یک مارکر ( نشانه ) ایجاد کرد

بصورت پیش فرض علامت بالن محل مارکر را نشان می دهد

 فقط توجه داشته باشید برای نمایش مارکر حتما باید مقدار  ویژگی position  انرا مشخص کنید . یعنی مشخص کنید مارکر در کجای نقشه قرار دارد
 با استفاده از تابع setMap می توان مارکر را به نقشه افزود
 

 

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

 

 

    position:myCenter,

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

 مشاهده  و اجرای برنامه کامل
 
قرار دادن یک ایکن به جای مارکر
 دستورات زیر از یک ایکن به جای مارکر پیش فرض استفاده می کند

 

var marker=new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
  });

marker.setMap(map);
 مشاهده و اجرای برنامه کامل
 
علامت مارکر را متحرک کنید
 می خواهیم یک مارکر دارای انیمیشن بسازیم
 برای این کار از ویژگی animation  استفاده می کنیم
 

 

marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);

 

 مقدار animation می تواند bounce  یا  drop باشد
 مشاهده و اجرای برنامه کامل
 
POLYLINE
 POLYLINE خط مستقیمی است که روی مجموعه ای از نقطه ها ( مختصات ها )  کشیده می شود . در اصل هر مختصات یک سر خط را مشخص می کند
 برای یک polyline  ویژگیهای زیر قابل تعریف هستند :
  •  path : چندین نقطه ( عرض و طول جغرافیایی ) که خط روی انها رسم می شود  را تعریف می کند 
  •  strokeColor : رنگ خط را بصورت شماره هگزا دسیمال مشخص می کند . قالب مشخص کردن شماره رنگ مثل مثال زیر است :

 

"#FFFFFF"

  •  strokeOpacity : میزان شفافیت خط را مشخص می کند . که باید مقداری از 0 تا 1 باشد 
  •  strokeWeight : میزان ضخامت خط را در واحد پیکسل مشخص می کند 
  •  editable : با مقدار TRUE یا false مشخص می کنیم ایا کاربر می تواند خط را ویرایش کند یا نه 
 
 مثال :

 

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

 
 مشاهده و اجرای برنامه کامل
 
polygon
 polygon همان polyline است که مختصات  هر سر خطهای ان را مشخص می کنیم
 اما از polygon وقتی استفاده می کنیم که می خواهیم با خط ها یک محدوده بسته را مشخص کنیم
 
 برای polygon می توان از ویژگیهای زیر استفاده کرد :
  •  path : مجموعه ای از نقاط را که در ابتدا و انتهای خطهای چند ضلعی قرار دارند را مشخص می کند . توجه داشته باشید که مختصات نقطه اول و اخر در چند ضلعی باید مثل هم باشد تا شکل بسته شود 
 
  •  strokeColor : رنگ خط را بصورت شماره هگزا دسیمال مشخص می کند . قالب مشخص کردن شماره رنگ مثل مثال زیر است :

 

"#FFFFFF"

  •   strokeOpacity : میزان شفافیت خط را مشخص می کند . که باید مقداری  از 0 تا 1 باشد
 
  •  strokeWeight : میزان ضخامت خط را در واحد پیکسل مشخص می کند
  •  fillColor: با همان روش تعیین رنگ خط می توان رنگ درون فضای بسته چند ضلعی رسم شده را مشخص کرد 
  •  fillOpacity : میزان شفافیت رنگ درون فضای بسته شکل رسم شده را مشخص می کند که می تواند عددی از 0 تا 1 باشد 
  •  editable: با مقدار TRUE یا false مشخص می کنیم ایا کاربر می تواند خط را ویرایش کند یا نه
 
 مثال :

 

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});
 
 مشاهده و اجرای برنامه کامل
 
دایره
 در صورتیکه بخواهیم فضای دایره ای شکل روی نقشه ایجاد کنیم از حالت circle استفاده می کنیم
 در این صورت ویژگیهای زیر برای مشخص کردن فضای دایره ای وجود دارد :
  •  center : مرکز دایره است 
  •  radius : بر حسب متر ، اندازه شعاع دایره است
  •  strokeColor : بر حسب هگزادسیمال رنگ خط دور دایره است 
  •  strokeOpacity : با استفاده از عددی از 0 تا 1 میزان شفافیت خط دور دایره است
  •  strokeWeight : بر حسب پیکسل میزان ضخامت خط دور دایره است
  •  fillColor : رنگ درون فضای دایره است . این رنگ با شماره هگزا دسیمال مشخص می شود 
  •  fillOpacity: با استفاده از عددی از 0 تا 1 میزان شفافیت رنگ درون دایره است 
  •  editable : با استفاده از مقدار true  یا false مشخص می کند ایا دایره توسط کاربر قابل ویرایش باشد یا نه 
 
 مثال زیر روش مقدار دادن به این ویژگیها را نشان می دهد :

 

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});
 
 مشاهده و اجرای برنامه کامل
 
InfoWindow
 InfoWindowیک پنجره ای است که در ان متن قرار دارد 
 این پنجره بالای مارکر قرار می گیرد
 
 مثال زیر روش ایجاد پنجره اطلاعاتی برای یک  مارکر را نشان می دهد
 

 

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

infowindow.open(map,marker);

 
 مشاهده و اجرای برنامه کامل