ارتقا دادن برنامه Maps JavaScript API از نسخه ۲ به نسخه ۳

رویداد جدید برای پشتیبانی MVC

‫v3 API نوع جدیدی از رویداد را برای نشان دادن تغییرات وضعیت MVC اضافه می‌کند. اکنون دو نوع رویداد وجود دارد:

• رویدادهای کاربر (مانند رویدادهای «کلیک» موشواره) از DOM به Maps JavaScript API منتشر می‌شوند. این رویدادها جدا و متمایز از رویدادهای استاندارد DOM هستند.
• اعلان‌های تغییر وضعیت MVC منعکس‌کننده تغییرات در اشیاء Maps API هستند و بااستفاده از قرارداد property_changed نام‌گذاری می‌شوند.

هر شیء Maps API تعدادی رویداد نام‌گذاری‌شده را صادر می‌کند. برنامه‌هایی که به رویدادهای خاصی علاقه دارند باید شنوندگان رویداد را برای آن رویدادها ثبت کنند و هنگام دریافت آن رویدادها، کد را اجرا کنند. این سازوکار رویدادمحور در هر دو Maps JavaScript API v2 و v3 یکسان است، با این تفاوت که فضای نام از GEvent به google.maps.event تغییر کرده است:

GEvent.addListener(map, 'click', function() {
  alert('You clicked the map.');
});

google.maps.event.addListener(map, 'click', function() {
  alert('You clicked the map.');
});

برداشتن شنوندگان رویداد

به‌دلایل عملکردی، بهتر است شنونده رویداد را وقتی دیگر به آن نیاز نیست بردارید. برداشتن شنونده رویداد در نسخه ۲ و نسخه ۳ به یک شکل انجام می‌شود:

1. وقتی شنونده رویداد ایجاد می‌کنید، یک شیء مات (GEventListener در نسخه ۲، MapsEventListener در نسخه ۳) برگردانده می‌شود.
2. وقتی می‌خواهید شنونده رویداد را بردارید، این شیء را به روش removeListener() (GEvent.removeListener() در نسخه ۲ یا google.maps.event.removeListener() در نسخه ۳) ارسال کنید تا شنونده رویداد برداشته شود.

گوش دادن به رویدادهای DOM

اگر می‌خواهید رویدادهای DOM (مدل شیء سند) را ضبط کنید و به آن‌ها پاسخ دهید، نسخه ۳ روش ثابت google.maps.event.addDomListener() را ارائه می‌دهد که معادل روش GEvent.addDomListener() در نسخه ۲ است.

استفاده از متغیرهای مستقل ارسال‌شده در رویدادها

رویدادهای میانای کاربر اغلب آرگومان رویدادی را ارسال می‌کنند که سپس شنونده رویداد می‌تواند به آن دسترسی داشته باشد. بیشتر آرگومان‌های رویداد در نسخه ۳ ساده شده‌اند تا با اشیاء در میانای برنامه‌سازی کاربردی سازگارتر باشند. (برای جزئیات، به مرجع v3 مراجعه کنید.)

هیچ آرگومان overlay در شنوندگان رویداد نسخه ۳ وجود ندارد. اگر رویداد click را در نقشه v3 ثبت کنید، فراخوانی برگشتی فقط زمانی رخ می‌دهد که کاربر روی نقشه مبنا کلیک کند. اگر لازم است به این کلیک‌ها واکنش نشان دهید، می‌توانید فراخوان‌های برگشتی بیشتری را در هم‌پوشانی‌های کلیک‌کردنی ثبت کنید.

// Passes an overlay argument when clicking on a map

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

GEvent.addListener(map,'click', function(overlay, latlng) {
  if (latlng) {
    var marker = new GMarker(latlng);
    map.addOverlay(marker);
  }
});

// Passes only an event argument

var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

google.maps.event.addListener(map, 'click', function(event) {
  var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
  });
});

تغییرات در انواع کنترل

برخی‌از تغییرات در انواع control با میانای برنامه‌سازی کاربردی نسخه ۳ معرفی شده است.

1. v3 API از انواع نقشه بیشتری پشتیبانی می‌کند، ازجمله نقشه‌های ناهمواری و توانایی افزودن انواع نقشه سفارشی.
2. کنترل سلسله‌مراتبی نسخه ۲، GHierarchicalMapTypeControl، دیگر دردسترس نیست. بااستفاده از کنترل google.maps.MapTypeControlStyle.HORIZONTAL_BAR می‌توانید به جلوه مشابهی دست پیدا کنید.
3. چیدمان افقی ارائه‌شده توسط GMapTypeControl در نسخه ۲ در نسخه ۳ دردسترس نیست.

افزودن کنترل‌ها به نقشه

با Maps JavaScript API v2، کنترل‌ها را ازطریق روش addControl() شیء نقشه به نقشه‌تان اضافه می‌کنید. در نسخه ۳، به‌جای دسترسی یا اصلاح مستقیم کنترل‌ها، شیء MapOptions مرتبط را اصلاح می‌کنید. نمونه زیر نشان می‌دهد که چگونه نقشه را سفارشی کنید تا کنترل‌های زیر را اضافه کنید:

• دکمه‌هایی که به کاربر امکان می‌دهد بین انواع نقشه موجود جابه‌جا شود
• مقیاس نقشه

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());

var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    // Add controls
    mapTypeControl: true,
    scaleControl: true
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

کنترل‌های موقعیت روی نقشه

کنترل‌های موقعیت‌یابی در نسخه ۳ تغییرات زیادی داشته است. در نسخه ۲، روش addControl() پارامتر دوم اختیاری‌ای را می‌گیرد که به شما امکان می‌دهد موقعیت کنترل را نسبت به گوشه‌های نقشه مشخص کنید.

در نسخه ۳، موقعیت کنترل را ازطریق ویژگی position گزینه‌های کنترل تنظیم می‌کنید. موقعیت‌یابی این کنترل‌ها مطلق نیست؛ درعوض، API کنترل‌ها را به‌طور هوشمندانه با «جاری کردن» آن‌ها در اطراف عناصر موجود نقشه در محدودیت‌های داده‌شده (مانند اندازه نقشه) طرح‌بندی می‌کند. این چیدمان مطمئن می‌شود که کنترل‌های پیش‌فرض با کنترل‌های شما سازگار است. برای اطلاعات بیشتر، به کنترل موقعیت‌یابی در نسخه ۳ مراجعه کنید.

کد زیر کنترل‌ها را از نمونه‌های بالا تغییر موقعیت می‌دهد:

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
    G_ANCHOR_TOP_LEFT, new GSize(10, 10)));

// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
    G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));

var myOptions = {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP,

  // Add map type control
  mapTypeControl: true,
  mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_LEFT
  },

  // Add scale
  scaleControl: true,
  scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_RIGHT
  }
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

کنترل‌های سفارشی

از Maps JavaScript API برای ایجاد کنترل‌های ناوبری سفارشی استفاده کنید. برای سفارشی‌سازی کردن کنترل‌ها با میانای برنامه‌سازی کاربردی نسخه ۲، باید کلاس GControl را زیرکلاس کنید و گرداننده‌هایی برای روش‌های initialize() و getDefaultPosition() تعریف کنید. معادلی برای کلاس GControl در نسخه ۳ وجود ندارد. درعوض، کنترل‌ها به‌عنوان عناصر DOM نشان داده می‌شوند. برای افزودن کنترل سفارشی با v3 API، ساختار DOM برای کنترل در سازنده به‌عنوان فرزند Node (مثلاً عنصر <div>) ایجاد کنید و شنوندگان رویداد را برای رسیدگی به هرگونه رویداد DOM اضافه کنید. Node را به آرایه controls[position] نقشه‌ها اضافه کنید تا نمونه‌ای از کنترل سفارشی به نقشه‌تان اضافه شود.

با فرض اینکه پیاده‌سازی کلاس HomeControl از الزامات میانای ذکرشده در بالا پیروی می‌کند (برای جزئیات، به سند کنترل‌های سفارشی مراجعه کنید)، نمونه کدهای زیر نحوه افزودن کنترل سفارشی به نقشه را نشان می‌دهد.

map.addControl(new HomeControl(),
    GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));

var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
    homeControlDiv);

افزودن و برداشتن هم‌پوشانی‌ها

انواع اشیایی که توسط Overlay نشان داده می‌شوند در نسخه ۲ و ۳ یکسان هستند، اما به‌طور متفاوتی مدیریت می‌شوند.

در v2 API، بااستفاده از روش‌های addOverlay() و removeOverlay() از شیء GMap2، هم‌پوشانی‌ها به نقشه اضافه و از آن برداشته می‌شدند. در نسخه ۳، بااستفاده از ویژگی map کلاس گزینه‌های رونهاد مرتبط، نقشه‌ای را به «رونهاد» اختصاص می‌دهید. همچنین می‌توانید با فراخوانی روش setMap() شیء هم‌پوشانی و مشخص کردن نقشه موردنظرتان، هم‌پوشانی را مستقیماً اضافه یا حذف کنید. برای برداشتن هم‌پوشانی، ویژگی نقشه را روی null تنظیم کنید.

هیچ روش clearOverlays() در نسخه ۳ وجود ندارد. اگر می‌خواهید مجموعه‌ای از هم‌پوشانی‌ها را مدیریت کنید، باید آرایه‌ای برای نگهداری هم‌پوشانی‌ها ایجاد کنید. بااستفاده از این آرایه، می‌توانید setMap() را در هر رونهاد در آرایه فراخوانی کنید (اگر لازم است آن‌ها را بردارید، null را رد کنید).

نشانگرهای کشیدنی

به‌طور پیش‌فرض، نشانگرها قابل‌کلیک هستند اما کشیدنی نیستند. دو نمونه زیر نشانگر کشیدنی اضافه می‌کنند:

var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);

var marker = new GMarker(latLng, {
  draggable: true
});
map.addOverlay(marker);

var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
  document.getElementById('map'), {
  center: myLatLng,
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
    position: myLatLng,
    draggable: true,
    map: map
});

نمادها

می‌توانید نماد سفارشی‌ای را برای نمایش به‌جای نشانگر پیش‌فرض تعریف کنید. برای استفاده از تصویر سفارشی در نسخه ۲، می‌توانید یک نمونه GIcon از G_DEFAULT_ICON type ایجاد کنید و آن را اصلاح کنید. اگر تصویرتان بزرگ‌تر یا کوچک‌تر از نماد پیش‌فرض است، باید آن را با نمونه GSize مشخص کنید. میانای برنامه‌سازی کاربردی نسخه ۳ این فرایند را کمی ساده‌تر می‌کند. کافی است ویژگی icon نشانگر را روی نشانی وب تصویر سفارشی‌تان تنظیم کنید تا API اندازه نماد را به‌طور خودکار تغییر دهد.

‫Maps JavaScript API همچنین از نمادهای پیچیده پشتیبانی می‌کند. نماد پیچیده ممکن است شامل چند کاشی، شکل‌های پیچیده، یا «ترتیب پشته» مشخصی باشد که نحوه نمایش تصاویر را نسبت به سایر هم‌پوشانی‌ها تعیین می‌کند. برای افزودن شکل به نشانگر در نسخه ۲، باید ویژگی اضافی را در هر نمونه GIcon مشخص کنید و آن را به‌عنوان گزینه‌ای به سازنده GMarker ارسال کنید. در نسخه ۳، نمادهای مشخص‌شده به این روش باید ویژگی‌های icon خود را روی شیئی از نوع Icon تنظیم کنند. سایه‌های نشانگر در نسخه ۳ پشتیبانی نمی‌شود.

مثال‌های زیر پرچم ساحلی را در ساحل بوندی در استرالیا نشان می‌دهد که بخش شفاف نماد قابل‌کلیک نیست:

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);

map.addOverlay(new GMarker(bbLatLng, {
  icon: flagIcon
}));

var map = new google.maps.Map(
  document.getElementById('map'), {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);

var bbMarker = new google.maps.Marker({
    icon: '/images/beachflag.png'
    shape: shape,
    position: bbLatLng,
    map: map
});

چندخطی‌ها

چندخطی از آرایه‌ای از LatLngها، به‌علاوه مجموعه‌ای از بخش‌های خطی تشکیل شده است که این مکان‌ها را در یک توالی مرتب به هم متصل می‌کند. ایجاد و نمایش شیء Polyline در نسخه ۳ مشابه استفاده از شیء GPolyline در نسخه ۲ است. نمونه‌های زیر یک چندخطی ژئودزیک نیمه‌شفاف با عرض ۳ پیکسل از زوریخ به سیدنی ازطریق سنگاپور رسم می‌کنند:

var polyline = new GPolyline(
  [
    new GLatLng(47.3690239, 8.5380326),
    new GLatLng(1.352083, 103.819836),
    new GLatLng(-33.867139, 151.207114)
  ],
  '#FF0000', 3, 0.5, {
  geodesic: true
});

map.addOverlay(polyline);

var polyline = new google.maps.Polyline({
  path: [
    new google.maps.LatLng(47.3690239, 8.5380326),
    new google.maps.LatLng(1.352083, 103.819836),
    new google.maps.LatLng(-33.867139, 151.207114)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
  geodesic: true
});

polyline.setMap(map);

چندخطی‌های کدبندی‌شده

در نسخه ۳، برای ایجاد اشیای Polyline مستقیماً از چندخطی‌های کدبندی‌شده پشتیبانی وجود ندارد. درعوض، کتابخانه هندسه روش‌هایی برای کدگذاری و کدگشایی چندخطی‌ها ارائه می‌دهد. برای اطلاعات بیشتر درباره نحوه بار کردن این کتابخانه، به کتابخانه‌ها در Maps API نسخه ۳ مراجعه کنید.

نمونه‌های زیر همان چندخطی کدبندی‌شده را ترسیم می‌کنند؛ کد نسخه ۳ از روش decodePath() از فضای نام google.maps.geometry.encoding استفاده می‌کند.

var polyline = new GPolyline.fromEncoded({
  points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
  levels: 'PPP',
  zoomFactor: 2,
  numLevels: 18,
  color: '#ff0000',
  opacity: 0.8,
  weight: 3
});

map.addOverlay(polyline);

var polyline = new google.maps.Polyline({
  path: google.maps.geometry.encoding.decodePath(
    'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
});

polyline.setMap(map);

چندضلعی‌ها

«چندضلعی» منطقه‌ای را در یک حلقه بسته تعریف می‌کند. درست مثل شیء Polyline، اشیای Polygon شامل مجموعه‌ای از نقاط در یک توالی مرتب‌شده هستند. کلاس v3 Polygon بسیار شبیه کلاس v2 GPolygon است، با این تفاوت قابل‌توجه که دیگر لازم نیست رأس شروع را در انتهای مسیر تکرار کنید تا حلقه بسته شود. «میانای برنامه‌سازی کاربردی» نسخه v3 به‌طور خودکار هر چندضلعی را با کشیدن خطی که آخرین مختصات را به اولین مختصات وصل می‌کند می‌بندد. تکه‌کدهای زیر چندضلعی‌ای را ایجاد می‌کنند که نشان‌دهنده مثلث برمودا است:

var map = new GMap2(document.getElementById('map'));

map.setCenter(new GLatLng(24.886436, -70.268554), 5);

var bermudaTriangle = new GPolygon(
  [
    new GLatLng(25.774252, -80.190262),
    new GLatLng(18.466465, -66.118292),
    new GLatLng(32.321384, -64.75737),
    new GLatLng(25.774252, -80.190262)
  ],
  '#FF0000', 2, 0.8, '#FF0000', 0.35);

map.addOverlay(bermudaTriangle);

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(24.886436, -70.268554),
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  zoom: 5
});

var bermudaTriangle = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ],
  strokeColor: '#FF0000',
  strokeWeight: 2,
  strokeOpacity: 0.8,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

شکل‌های قابل‌ویرایش توسط کاربر

چندخطی‌ها و چندضلعی‌ها را می‌توان قابل‌ویرایش توسط کاربر کرد. تکه‌کدهای زیر معادل هستند:

map.addOverlay(polyline);
polyline.enableEditing();

polyline.setMap(map);
polyline.setEditable(true);

برای قابلیت‌های طراحی پیشرفته‌تر، کتابخانه طراحی را در اسناد نسخه ۳ ببینید.

پنجره‌های اطلاعات

InfoWindow محتوا را در پنجره شناور بالای نقشه نمایش می‌دهد. چند تفاوت کلیدی بین پنجره‌های اطلاعات نسخه ۲ و نسخه ۳ وجود دارد:

• میانای برنامه‌سازی کاربردی نسخه ۲ فقط از یک GInfoWindow در هر نقشه پشتیبانی می‌کند، درحالی‌که میانای برنامه‌سازی کاربردی نسخه ۳ از چند InfoWindow هم‌زمان در هر نقشه پشتیبانی می‌کند.
• وقتی روی نقشه کلیک می‌کنید، InfoWindow نسخه ۳ باز می‌ماند. وقتی روی نقشه کلیک می‌کنید، v2 GInfoWindow به‌طور خودکار بسته می‌شود. با افزودن شنونده click در شیء Map می‌توانید رفتار نسخه ۲ را شبیه‌سازی کنید.
• میانای برنامه‌سازی کاربردی نسخه ۳ از InfoWindow زبانه‌دار پشتیبانی داخلی نمی‌کند.

رونهادهای زمین

برای قرار دادن تصویر روی نقشه، باید از شیء GroundOverlay استفاده کنید. سازنده برای GroundOverlay اساساً در نسخه ۲ و ۳ یکسان است: نشانی وب تصویر و مرزهای تصویر را به‌عنوان پارامتر مشخص می‌کند.

مثال زیر نقشه قدیمی نیوآرک، نیوجرسی را به‌عنوان هم‌پوشانی روی نقشه قرار می‌دهد:

var bounds = new GLatLngBounds(
    new GLatLng(40.716216, -74.213393),
    new GLatLng(40.765641, -74.139235));

var overlay = new GGroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

map.addOverlay(overlay);

var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216, -74.213393),
    new google.maps.LatLng(40.765641, -74.139235));

var overlay = new google.maps.GroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

overlay.setMap(map);

انواع نقشه رایج

چهار نوع نقشه اصلی در هر دو نسخه ۲ و ۳ دردسترس است:

• MapTypeId.ROADMAP (جایگزین G_NORMAL_MAP) نمای نقشه راه را نمایش می‌دهد.
• MapTypeId.SATELLITE (جایگزین G_SATELLITE_MAP) تصاویر ماهواره‌ای Google Earth را نمایش می‌دهد.
• MapTypeId.HYBRID (جایگزین G_HYBRID_MAP) ترکیبی از نماهای معمولی و ماهواره‌ای را نمایش می‌دهد.
• MapTypeId.TERRAIN (جایگزین G_PHYSICAL_MAP) نقشه فیزیکی را براساس اطلاعات عوارض زمین نمایش می‌دهد.

در زیر نمونه‌ای از تنظیم نقشه روی نمای عوارض زمین در نسخه ۲ و ۳ آمده است:

map.setMapType(G_PHYSICAL_MAP);
    

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    

‫Maps JavaScript API v3 چند تغییر در انواع نقشه کمتر رایج نیز ایجاد کرده است:

• کاشی‌های نقشه برای اجرام آسمانی غیر از زمین به‌عنوان انواع نقشه در v3 API دردسترس نیستند، اما می‌توان به‌عنوان انواع نقشه سفارشی به آن‌ها دسترسی داشت. برای نمونه، این نمونه انواع نقشه سفارشی را ببینید.
• هیچ نوع نقشه خاصی در نسخه ۳ وجود ندارد که جایگزین نوع G_SATELLITE_3D_MAP در نسخه ۲ شود. درعوض، می‌توانید افزونه Google Earth را بااستفاده از این کتابخانه در نقشه‌های v3 خود ادغام کنید.

تصاویر با حداکثر بزرگ‌نمایی

تصاویر ماهواره‌ای همیشه در سطوح بزرگ‌نمایی بالا دردسترس نیست. اگر می‌خواهید بالاترین سطح بزرگ‌نمایی دردسترس را قبل‌از تنظیم سطح بزرگ‌نمایی بدانید، از کلاس google.maps.MaxZoomService استفاده کنید. این کلاس جایگزین روش GMapType.getMaxZoomAtLatLng() از نسخه ۲ می‌شود.

var point = new GLatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);

map.getCurrentMapType().getMaxZoomAtLatLng(point,
  function(response) {
    if (response.status) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});

var myLatlng = new google.maps.LatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
  document.getElementById("map"),{
    zoom: 0,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
  myLatlng,
  function(response) {
    if (response.status == google.maps.MaxZoomStatus.OK) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});

تصاویر چشم‌انداز هوایی

هنگام فعال کردن تصاویر هوایی در نسخه ۳، کنترل‌ها مشابه کنترل GLargeZoomControl3D در نسخه ۲ هستند، با یک کنترل «چرخش» میان‌آگهی اضافی برای چرخش در جهت‌های پشتیبانی‌شده.

می‌توانید شهرهایی را که تصاویر ۴۵ درجه در آن‌ها دردسترس است در نقشه شهرهای پشتیبانی‌شده ردیابی کنید. وقتی تصاویر ۴۵ درجه دردسترس باشد، گزینه زیرمنو به دکمه «ماهواره Maps API» اضافه می‌شود.