ارتقای برنامه Maps JavaScript API از V2 به V3

Maps JavaScript API v2 از 26 مه 2021 دیگر در دسترس نیست. در نتیجه، نقشه‌های v2 سایت شما از کار می‌افتند و خطاهای جاوا اسکریپت را برمی‌گردانند. برای ادامه استفاده از نقشه‌ها در سایت خود، به Maps JavaScript API نسخه 3 بروید. این راهنما به شما در طی این فرآیند کمک می کند.

نمای کلی

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

  1. یک کلید جدید دریافت کنید. Maps JavaScript API اکنون از کنسول Google Cloud برای مدیریت کلیدها استفاده می کند. اگر همچنان از کلید v2 استفاده می کنید، قبل از شروع مهاجرت، حتما کلید API جدید خود را دریافت کنید.
  2. API Bootstrap خود را به روز کنید. اکثر برنامه ها Maps JavaScript API v3 را با کد زیر بارگذاری می کنند:
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  3. کد خود را به روز کنید مقدار تغییر مورد نیاز بستگی زیادی به درخواست شما دارد. تغییرات رایج عبارتند از:
    • همیشه به فضای نام google.maps ارجاع دهید. در نسخه 3، تمام کدهای Maps JavaScript API در فضای google.maps.* به جای فضای نام جهانی ذخیره می شود. اکثر اشیا نیز به عنوان بخشی از این فرآیند تغییر نام داده اند. به عنوان مثال، به جای GMap2 ، اکنون google.maps.Map بارگیری خواهید کرد.
    • هرگونه ارجاع به روش های منسوخ را حذف کنید. تعدادی از روش‌های کاربردی عمومی حذف شده‌اند، مانند GDownloadURL و GLog . یا این قابلیت را با کتابخانه های ابزار شخص ثالث جایگزین کنید یا این مراجع را از کد خود حذف کنید.
    • (اختیاری) کتابخانه ها را به کد خود اضافه کنید. بسیاری از ویژگی‌ها به کتابخانه‌های ابزار خارجی تبدیل شده‌اند، به طوری که هر برنامه فقط باید قسمت‌هایی از API را که مورد استفاده قرار می‌گیرد بارگیری کند.
    • (اختیاری) پروژه خود را برای استفاده از خارجی های v3 پیکربندی کنید. خارجی‌های v3 می‌توانند برای کمک به اعتبارسنجی کد شما با Closure Compiler یا برای فعال کردن تکمیل خودکار در IDE شما استفاده شوند. درباره کامپایل پیشرفته و خارجی بیشتر بیاموزید.
  4. تست و تکرار کنید. در این مرحله شما هنوز مقداری کار برای انجام خواهید داشت، اما خبر خوب این است که به خوبی در مسیر برنامه جدید نقشه های v3 خود خواهید بود!

تغییرات در V3 از Maps JavaScript API

قبل از برنامه ریزی مهاجرت خود، باید زمانی را برای درک تفاوت های بین Maps JavaScript API v2 و Maps JavaScript API v3 اختصاص دهید. جدیدترین نسخه Maps JavaScript API از ابتدا با تمرکز بر تکنیک های برنامه نویسی جاوا اسکریپت مدرن، افزایش استفاده از کتابخانه ها و یک API ساده شده نوشته شده است. بسیاری از ویژگی های جدید به API اضافه شده اند و چندین ویژگی آشنا تغییر کرده یا حتی حذف شده اند. این بخش برخی از تفاوت های کلیدی بین این دو نسخه را برجسته می کند.

برخی از تغییرات در API v3 عبارتند از:

  • یک کتابخانه اصلی کارآمد. بسیاری از توابع تکمیلی به کتابخانه‌ها منتقل شده‌اند و به کاهش بار و زمان تجزیه برای Core API کمک می‌کنند که به شما امکان می‌دهد نقشه شما به سرعت در هر دستگاهی بارگیری شود.
  • بهبود عملکرد چندین ویژگی، مانند رندر چند ضلعی و قرار دادن نشانگر.
  • یک رویکرد جدید برای محدودیت‌های استفاده سمت مشتری برای تطبیق بهتر آدرس‌های مشترک مورد استفاده توسط پراکسی‌های تلفن همراه و فایروال‌های شرکتی.
  • پشتیبانی از چندین مرورگر مدرن و مرورگرهای تلفن همراه اضافه شده است. پشتیبانی از اینترنت اکسپلورر 6 حذف شده است.
  • بسیاری از کلاس های کمکی همه منظوره ( GLog یا GDownloadUrl ) را حذف کرد. امروزه، بسیاری از کتابخانه‌های جاوا اسکریپت عالی وجود دارند که عملکردهای مشابهی را ارائه می‌کنند، مانند Closure یا jQuery .
  • یک پیاده سازی نمای خیابان HTML5 که در هر دستگاه تلفن همراه بارگیری می شود.
  • پانورامای نمای خیابان سفارشی با عکس های خود، به شما امکان می دهد تصاویر پانوراما از پیست های اسکی، خانه های برای فروش یا مکان های جالب دیگر را به اشتراک بگذارید.
  • سفارشی‌سازی‌های Styled Maps که به شما امکان می‌دهد نمایش عناصر را روی نقشه پایه تغییر دهید تا با سبک بصری منحصر به فرد خود مطابقت داشته باشد.
  • پشتیبانی از چندین سرویس جدید، مانند ElevationService و Distance Matrix .
  • خدمات مسیرهای بهبودیافته مسیرهای جایگزین، بهینه سازی مسیر (راه حل های تقریبی برای مشکل فروشنده دوره گرد )، مسیرهای دوچرخه سواری (با لایه دوچرخه سواری )، مسیرهای حمل و نقل، و مسیرهای قابل کشیدن را ارائه می دهد.
  • یک قالب Geocoding به روز شده که اطلاعات نوع دقیق تری را نسبت به مقدار accuracy از Geocoding API v2 ارائه می دهد.
  • پشتیبانی از چندین ویندوز اطلاعات در یک نقشه

ارتقاء برنامه شما

کلید جدید شما

Maps JavaScript API v3 از یک سیستم کلید جدید از نسخه 2 استفاده می کند. ممکن است قبلاً از یک کلید v3 برای برنامه خود استفاده کرده باشید، در این صورت نیازی به تغییر نیست. برای تأیید، نشانی اینترنتی را که Maps JavaScript API از آن بارگیری می‌کنید برای پارامتر key آن بررسی کنید. اگر مقدار کلید با "ABQIAA" شروع می شود، شما از یک کلید v2 استفاده می کنید. اگر یک کلید v2 دارید، باید به عنوان بخشی از انتقال، به یک کلید v3 ارتقا دهید، که:

هنگام بارگیری Maps JavaScript API v3، کلید ارسال می شود. درباره ایجاد کلیدهای API بیشتر بیاموزید .

توجه داشته باشید که اگر مشتری Google Maps APIs for Work هستید، ممکن است به جای استفاده از پارامتر key ، از شناسه مشتری با پارامتر client استفاده کنید. شناسه‌های سرویس گیرنده همچنان در Maps JavaScript API نسخه 3 پشتیبانی می‌شوند و نیازی به انجام فرآیند ارتقاء کلید ندارند.

در حال بارگیری API

اولین تغییری که باید در کد خود انجام دهید مربوط به نحوه بارگیری API است. در نسخه 2، Maps JavaScript API را از طریق یک درخواست به http://maps.google.com/maps بارگیری می‌کنید. اگر در حال بارگیری Maps JavaScript API v3 هستید، باید تغییرات زیر را اعمال کنید:

  1. API را از //maps.googleapis.com/maps/api/js بارگیری کنید
  2. پارامتر file را حذف کنید.
  3. پارامتر key را با کلید v3 جدید خود به روز کنید. مشتریان Google Maps APIs for Work باید از پارامتر client استفاده کنند.
  4. (فقط طرح ممتاز پلتفرم Google Maps) اطمینان حاصل کنید که پارامتر client همانطور که در راهنمای برنامه‌نویس برنامه Google Maps Platform Premium توضیح داده شده است، ارائه شده است.
  5. برای درخواست آخرین نسخه منتشر شده، پارامتر v را حذف کنید یا مقدار آن را مطابق با طرح نسخه سازی v3 تغییر دهید.
  6. (اختیاری) پارامتر hl را با language جایگزین کنید و مقدار آن را حفظ کنید.
  7. (اختیاری) برای بارگیری کتابخانه های اختیاری، پارامتر libraries اضافه کنید.

در ساده ترین حالت، bootstrap v3 فقط پارامتر کلید API شما را مشخص می کند:

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

مثال زیر آخرین نسخه Maps JavaScript API v2 را به زبان آلمانی درخواست می کند:

<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>

مثال زیر یک درخواست معادل برای v3 است.

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>

معرفی فضای نام google.maps

احتمالاً قابل توجه ترین تغییر در Maps JavaScript API v3، معرفی فضای نام google.maps است. v2 API همه اشیا را به طور پیش‌فرض در فضای نام جهانی قرار می‌دهد که می‌تواند منجر به برخورد نام‌گذاری شود. در نسخه 3، همه اشیا در فضای نام google.maps قرار دارند.

هنگام انتقال برنامه خود به نسخه 3، باید کد خود را تغییر دهید تا از فضای نام جدید استفاده کنید. متأسفانه، جستجوی «G» و جایگزینی با «google.maps». به طور کامل کار نخواهد کرد. اما، این یک قانون سرانگشتی خوب است که هنگام بررسی کد خود اعمال کنید. در زیر چند نمونه از کلاس های معادل در v2 و v3 آورده شده است.

v2 v3
GMap2 google.maps.Map
GLatLng google.maps.LatLng
GInfoWindow google.maps.InfoWindow
GMapOptions google.map.MapOptions
G_API_VERSION google.maps.version
GPolyStyleOptions google.maps.PolygonOptions
or google.maps.PolylineOptions

حذف کد منسوخ شده

Maps JavaScript API v3 برای بیشتر عملکردهای نسخه 2 مشابهی دارد. با این حال، برخی از کلاس ها هستند که دیگر پشتیبانی نمی شوند. به عنوان بخشی از مهاجرت خود، باید این کلاس ها را با کتابخانه های ابزار شخص ثالث جایگزین کنید یا این مراجع را از کد خود حذف کنید. بسیاری از کتابخانه های جاوا اسکریپت عالی وجود دارند که عملکردهای مشابهی مانند بستن یا جی کوئری را ارائه می دهند.

کلاس های زیر در Maps JavaScript API v3 مشابهی ندارند:

GBounds GLanguage
GBrowserIsCompatible GLayer
GControl GLog
GControlAnchor GMercatorProjection
GControlImpl GNavLabelControl
GControlPosition GObliqueMercator
GCopyright GOverlay
GCopyrightCollection GPhotoSpec
GDownloadUrl GPolyEditingOptions
GDraggableObject GScreenOverlay
GDraggableObjectOptions GStreetviewFeatures
GFactualGeocodeCache GStreetviewLocation
GGeoAddressAccuracy GStreetviewOverlay
GGeocodeCache GStreetviewUserPhotosOptions
GGoogleBar GTileLayerOptions
GGoogleBarAdsOptions GTileLayerOverlayOptions
GGoogleBarLinkTarget GTrafficOverlayOptions
GGoogleBarListingTypes GUnload
GGoogleBarOptions GXml
GGoogleBarResultList GXmlHttp
GInfoWindowTab GXslt
GKeyboardHandler

مقایسه کد

بیایید دو برنامه نسبتاً ساده را که با API های v2 و v3 نوشته شده اند مقایسه کنیم.

<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script>
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
            document.getElementById('map'));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();

        map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));

      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>
    
<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script>
    function initialize() {
      var map = new google.maps.Map(
        document.getElementById('map'), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var marker = new google.maps.Marker({
            position: new google.maps.LatLng(37.4419, -122.1419),
            map: map
      });

    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

همانطور که می بینید، چندین تفاوت بین این دو برنامه وجود دارد. تغییرات قابل توجه عبارتند از:

  • آدرسی که API از آن بارگیری می شود تغییر کرده است.
  • متدهای GBrowserIsCompatible() و GUnload() دیگر در نسخه 3 مورد نیاز نیستند و از API حذف شده اند.
  • شی GMap2 با google.maps.Map به عنوان شی مرکزی در API جایگزین شده است.
  • اکنون ویژگی ها از طریق کلاس های Options بارگیری می شوند. در مثال بالا، ما سه ویژگی مورد نیاز برای بارگیری یک نقشه - center ، zoom و mapTypeId - را از طریق یک شی MapOptions خطی تنظیم کردیم.
  • رابط کاربری پیش فرض در نسخه 3 به طور پیش فرض روشن است. می‌توانید با تنظیم ویژگی disableDefaultUI روی true در شی MapOptions ، آن را غیرفعال کنید.

خلاصه

در این مرحله، برخی از نکات کلیدی مربوط به انتقال شما از نسخه 2 به نسخه 3 از Maps JavaScript API را خواهید چشید. اطلاعات بیشتری وجود دارد که ممکن است لازم باشد بدانید، اما به درخواست شما بستگی دارد. در بخش‌های بعدی، دستورالعمل‌های مهاجرت را برای موارد خاصی که ممکن است با آن‌ها مواجه شوید قرار داده‌ایم. علاوه بر این، منابع متعددی وجود دارد که ممکن است در طول فرآیند ارتقا برای شما مفید باشد.

  • Maps JavaScript API v3 Developers Documentation بهترین مکان برای کسب اطلاعات بیشتر در مورد API و نحوه عملکرد آن است.
  • مرجع Maps JavaScript API v3 به شما کمک می کند تا در مورد کلاس ها و روش های جدید در v3 API اطلاعات بیشتری کسب کنید.
  • انجمن Stack Overflow مکانی عالی برای پرسیدن سوالات مربوط به کد شما است. در سایت، سؤالات و پاسخ‌های مربوط به Maps JavaScript API از برچسب‌های « google-maps » یا « google-maps-api-3 » استفاده می‌شود.
  • مشتریان طرح ممتاز پلتفرم Google Maps مایلند اسناد طرح ممتاز پلتفرم Google Maps را مطالعه کنند.
  • وبلاگ Google Geo Developers یک راه عالی برای اطلاع از آخرین تغییرات API است.

اگر در مورد این مقاله مشکل یا سؤالی دارید، لطفاً از پیوند ارسال بازخورد در بالای این صفحه استفاده کنید.

مرجع تفصیلی

این بخش مقایسه دقیقی از محبوب ترین ویژگی های نسخه 2 و 3 از Maps JavaScript API ارائه می دهد. هر بخش از مرجع برای خواندن جداگانه طراحی شده است. توصیه می کنیم این مرجع را به طور کامل مطالعه نکنید. در عوض، از این مطالب برای کمک به مهاجرت خود به صورت موردی استفاده کنید.

  • رویدادها - ثبت و رسیدگی به رویدادها.
  • کنترل ها - دستکاری کنترل های ناوبری که روی نقشه ظاهر می شوند.
  • پوشش ها - اضافه کردن و ویرایش اشیاء روی نقشه.
  • انواع نقشه - کاشی هایی که نقشه پایه را تشکیل می دهند.
  • لایه ها - اضافه کردن و ویرایش محتوا به عنوان یک گروه، مانند لایه های KML یا ترافیک.
  • خدمات - کار با کدگذاری جغرافیایی Google، مسیرها یا خدمات نمای خیابان.

رویدادها

مدل رویداد برای Maps JavaScript API v3 شبیه به آنچه در نسخه 2 استفاده شده است، است، اگرچه بسیاری از موارد در زیر هود تغییر کرده است.

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.');
});

به دلایل عملکرد، بهتر است شنونده رویداد را زمانی که دیگر به آن نیاز ندارید حذف کنید. حذف شنونده رویداد در نسخه های 2 و 3 به همین ترتیب عمل می کند:

  1. هنگامی که شنونده رویداد ایجاد می کنید، یک شیء مات ( GEventListener در v2، MapsEventListener در v3) برگردانده می شود.
  2. هنگامی که می خواهید شنونده رویداد را حذف کنید، این شی را به متد removeListener() ( GEvent.removeListener() در v2 یا google.maps.event.removeListener() در v3) منتقل کنید تا شنونده رویداد حذف شود.

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

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

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

// 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
  });
});

کنترل ها

Maps JavaScript API کنترل‌های UI را نمایش می‌دهد که به کاربران اجازه می‌دهد با نقشه شما تعامل داشته باشند. می‌توانید از API برای سفارشی کردن نحوه نمایش این کنترل‌ها استفاده کنید.

برخی تغییرات در انواع control با API v3 معرفی شده است.

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

با Maps JavaScript API v2 می‌توانید کنترل‌هایی را از طریق متد addControl() شی نقشه خود به نقشه خود اضافه کنید. در نسخه 3، به جای دسترسی یا تغییر مستقیم کنترل‌ها، شی 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);

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

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

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

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 به شما امکان می دهد کنترل های ناوبری سفارشی ایجاد کنید. برای سفارشی‌سازی کنترل‌ها با API v2، کلاس GControl را زیر کلاس می‌دهید و برای متدهای initialize() و getDefaultPosition() هندلرهایی تعریف می‌کنید. هیچ معادلی برای کلاس GControl در نسخه 3 وجود ندارد. در عوض، کنترل ها به عنوان عناصر DOM نشان داده می شوند. برای افزودن یک کنترل سفارشی با v3 API، یک ساختار DOM برای کنترل در سازنده به عنوان فرزند یک Node ایجاد کنید (به عنوان مثال یک عنصر <div> ) و شنوندگان رویداد را برای مدیریت هر رویداد DOM اضافه کنید. Node را به آرایه controls[ position ] های نقشه ها فشار دهید تا نمونه ای از کنترل سفارشی را به نقشه خود اضافه کنید.

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

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 و v3 یکسان است، با این حال، آنها به طور متفاوتی مدیریت می شوند.

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

هیچ روش clearOverlays() در نسخه 3 وجود ندارد. اگر می‌خواهید مجموعه‌ای از همپوشانی‌ها را مدیریت کنید، باید یک آرایه برای نگه داشتن هم‌پوشانی‌ها ایجاد کنید. با استفاده از این آرایه، سپس می‌توانید 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
});

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

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

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

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 s، به اضافه یک سری پاره خط تشکیل شده است که آن مکان ها را در یک دنباله مرتب به هم متصل می کند. ایجاد و نمایش یک شی Polyline در v3 شبیه به استفاده از یک شی GPolyline در v2 است. نمونه های زیر یک پلی خط ژئودزیکی نیمه شفاف با عرض 3 پیکسل از زوریخ تا سیدنی از طریق سنگاپور ترسیم می کنند:

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);

چند خطوط رمزگذاری شده

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

مثال های زیر همان چند خط کدگذاری شده را ترسیم می کنند. کد v3 از متد 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);

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

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);

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

InfoWindow محتوا را در یک پنجره شناور بالای نقشه نمایش می دهد. چند تفاوت کلیدی بین پنجره های اطلاعات v2 و v3 وجود دارد:

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

برای قرار دادن یک تصویر روی نقشه، باید از یک شی GroundOverlay استفاده کنید. سازنده برای GroundOverlay اساساً در v2 و v3 یکسان است: URL یک تصویر و مرزهای تصویر را به عنوان پارامتر مشخص می کند.

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

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);

انواع نقشه

انواع نقشه های موجود در نسخه 2 و 3 کمی متفاوت هستند، اما همه انواع نقشه های اصلی در هر دو نسخه API موجود هستند. به‌طور پیش‌فرض، v2 از کاشی‌های نقشه راه استاندارد «رنگ‌شده» استفاده می‌کند. با این حال، v3 نیاز به یک نوع نقشه خاص برای ایجاد یک شی google.maps.Map دارد.

چهار نوع نقشه اصلی در نسخه 2 و 3 موجود است:

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

در زیر نمونه ای از v2 و v3 است که نقشه را برای نمای زمین تنظیم می کند:

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

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

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

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

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.");
    }
});

هنگام فعال کردن تصاویر هوایی در نسخه 3، کنترل‌ها مشابه کنترل v2 GLargeZoomControl3D هستند، با یک کنترل چرخش بینابینی اضافی برای چرخش در جهت‌های پشتیبانی‌شده.

می‌توانید شهرهایی را که در حال حاضر تصاویر 45 درجه در آن‌ها موجود است، در این نقشه ردیابی کنید. هنگامی که تصاویر 45 درجه در دسترس است، یک گزینه از منوی فرعی به دکمه Maps API Satellite اضافه می شود.

لایه ها

لایه ها اشیایی روی نقشه هستند که از یک یا چند پوشش تشکیل شده اند. آنها را می توان به عنوان یک واحد دستکاری کرد و به طور کلی مجموعه ای از اشیاء را منعکس می کند.

v3 API دسترسی به چندین لایه مختلف را فراهم می کند. این لایه ها در قسمت های زیر با کلاس v2 GLayer همپوشانی دارند:

  • شی KmlLayer عناصر KML و GeoRSS را به روکش‌های v3 تبدیل می‌کند و معادل لایه GeoXml v2 را ارائه می‌کند.
  • شی TrafficLayer لایه ای را ارائه می دهد که شرایط ترافیک را نشان می دهد، شبیه به پوشش v2 GTrafficOverlay .

این لایه ها با v2 متفاوت هستند. تفاوت ها در زیر توضیح داده شده است. آنها را می توان با فراخوانی setMap() به نقشه اضافه کرد و شی Map را برای نمایش لایه ارسال کرد.

اطلاعات بیشتر در مورد لایه های پشتیبانی شده در مستندات لایه ها موجود است.

Maps JavaScript API از فرمت های داده های KML و GeoRSS برای نمایش اطلاعات جغرافیایی پشتیبانی می کند. اگر می‌خواهید فایل‌های KML یا GeoRSS را در نقشه قرار دهید، باید در دسترس عموم قرار گیرند. در نسخه 3، این فرمت های داده با استفاده از نمونه ای از KmlLayer نمایش داده می شوند که جایگزین شی GGeoXml از v2 می شود.

v3 API هنگام رندر KML انعطاف پذیرتر است و به شما امکان می دهد InfoWindows را سرکوب کنید و پاسخ کلیک را تغییر دهید. برای جزئیات بیشتر به مستندات V3 KML و GeoRSS Layers مراجعه کنید.

هنگام ارائه یک KmlLayer ، محدودیت های اندازه و پیچیدگی اعمال می شود. برای جزئیات به مستندات KmlLayer مراجعه کنید.

نمونه های زیر نحوه بارگذاری یک فایل KML را با هم مقایسه می کنند.

geoXml = new GGeoXml(
  'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');

map.addOverlay(geoXml);
 
var layer = new google.maps.KmlLayer(
  'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
    preserveViewport: true
});
layer.setMap(map);

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

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();

var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
 
var map = new google.maps.Map(
    document.getElementById('map'), {
  center: new google.maps.LatLng(34.0492459, -118.241043),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  zoom: 13
});

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

برخلاف v2، هیچ گزینه ای برای سازنده TrafficLayer در v3 وجود ندارد. حوادث در نسخه 3 در دسترس نیستند.

خدمات

Maps JavaScript API یک شی geocoder برای geocoding آدرس ها به صورت پویا از ورودی کاربر فراهم می کند. اگر می خواهید آدرس های ثابت و شناخته شده را به صورت جغرافیایی کدگذاری کنید، به مستندات API Geocoding مراجعه کنید.

Geocoding API به طور قابل توجهی ارتقا یافته و بهبود یافته است و ویژگی‌های جدیدی اضافه کرده و نحوه نمایش داده‌ها را تغییر داده است.

GClientGeocoder در v2 API دو روش مختلف برای geocoding رو به جلو و معکوس و همچنین روش های اضافی برای تأثیرگذاری بر نحوه انجام geocoding ارائه کرد. در مقابل، شئ v3 Geocoder تنها یک متد geocode() ارائه می‌کند، که یک شی را به صورت تحت اللفظی شامل عبارت‌های ورودی (به شکل یک شی درخواست‌های جغرافیایی ) و یک متد برگشت فراخوان می‌گیرد. بسته به اینکه درخواست حاوی یک ویژگی address متنی یا یک شی LatLng باشد، API Geocoding یک پاسخ کدگذاری جغرافیایی رو به جلو یا معکوس را برمی‌گرداند. شما می توانید با ارسال فیلدهای اضافی به درخواست geocoding بر نحوه انجام geocoding تأثیر بگذارید:

  • گنجاندن یک address متنی، کدگذاری جغرافیایی رو به جلو، معادل فراخوانی متد getLatLng() را راه‌اندازی می‌کند.
  • گنجاندن یک شی latLng باعث ایجاد geocoding معکوس می شود که معادل فراخوانی متد getLocations() است.
  • شامل کردن ویژگی bounds ، Viewport Biasing را فعال می‌کند، که معادل فراخوانی متد setViewport() است.
  • از جمله ویژگی region ، منطقه کد بایاس را فعال می کند، که معادل فراخوانی متد setBaseCountryCode() است.

پاسخ های کدگذاری جغرافیایی در v3 بسیار متفاوت از پاسخ های v2 هستند. v3 API ساختار تودرتویی را که v2 استفاده می‌کند با ساختار صاف‌تری جایگزین می‌کند که تجزیه آسان‌تر است. علاوه بر این، پاسخ‌های v3 جزئیات بیشتری دارند: هر نتیجه دارای چندین مؤلفه آدرس است که به ارائه ایده بهتر از وضوح هر نتیجه کمک می‌کند.

کد زیر یک آدرس متنی می گیرد و اولین نتیجه از کدگذاری جغرافیایی آن را نشان می دهد:

var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
  'Unknown accuracy', 'country level accuracy',
  'region level accuracy', 'sub-region level accuracy',
  'town level accuracy', 'post code level accuracy',
  'street level accuracy', 'intersection level accuracy',
  'address level accuracy', 'premise level accuracy',
];

function geocode_result_handler(response) {
  if (!response || response.Status.code != 200) {
    alert('Geocoding failed. ' + response.Status.code);
  } else {
    var bounds = new GLatLngBounds(new GLatLng(
        response.Placemark[0].ExtendedData.LatLonBox.south,
        response.Placemark[0].ExtendedData.LatLonBox.west
    ), new GLatLng(
        response.Placemark[0].ExtendedData.LatLonBox.north,
        response.Placemark[0].ExtendedData.LatLonBox.east
    ));
    map.setCenter(bounds.getCenter(),
        map.getBoundsZoomLevel(bounds));
    var latlng = new GLatLng(
        response.Placemark[0].Point.coordinates[1],
        response.Placemark[0].Point.coordinates[0]);
    infoPanel.innerHTML += '<p>1st result is <em>' +
        // No info about location type
        response.Placemark[0].address +
        '</em> of <em>' +
        AccuracyDescription[response.Placemark[0].
            AddressDetails.Accuracy] +
        '</em> at <tt>' + latlng + '</tt></p>';
    var marker_title = response.Placemark[0].address +
        ' at ' + latlng;
    map.clearOverlays();

    var marker = marker = new GMarker(
        latlng,
        {'title': marker_title}
    );
    map.addOverlay(marker);
  }
}

function geocode_address() {
  var address = document.getElementById('input-text').value;
  infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
  geocoder.getLocations(address, geocode_result_handler);
}

function initialize() {
  map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(38, 15), 2);
  map.setUIToDefault();

  infoPanel = document.getElementById('info-panel');
}
 
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;

function geocode_result_handler(result, status) {
  if (status != google.maps.GeocoderStatus.OK) {
    alert('Geocoding failed. ' + status);
  } else {
    map.fitBounds(result[0].geometry.viewport);
    infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
        result[0].geometry.location_type.toLowerCase() +
        '</em> to <em>' +
        result[0].formatted_address + '</em> of types <em>' +
        result[0].types.join('</em>, <em>').replace(/_/, ' ') +
        '</em> at <tt>' + result[0].geometry.location +
        '</tt></p>';
    var marker_title = result[0].formatted_address +
        ' at ' + latlng;
    if (marker) {
      marker.setPosition(result[0].geometry.location);
      marker.setTitle(marker_title);
    } else {
      marker = new google.maps.Marker({
        position: result[0].geometry.location,
        title: marker_title,
        map: map
      });
    }
  }
}

function geocode_address() {
  var address = document.getElementById('input-text').value;
  infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
  geocoder.geocode({'address': address}, geocode_result_handler);
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(38, 15),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  infoPanel = document.getElementById('info-panel');
}

Maps JavaScript API v3 کلاس GDirections از v2 را با کلاس DirectionsService برای محاسبه جهت ها جایگزین می کند.

متد route() در v3 جایگزین متد load() و loadFromWaypoints() از API v2 می شود. این روش یک شی DirectionsRequest به صورت تحت اللفظی می گیرد که شامل عبارت های ورودی و یک متد برگشت به تماس است تا پس از دریافت پاسخ اجرا شود. گزینه‌ها ممکن است در این شی به معنای واقعی کلمه داده شوند، مشابه شیء GDirectionsOptions در v2.

در Maps JavaScript API v3، وظیفه ارسال درخواست‌های جهت از وظیفه ارائه درخواست‌ها جدا شده است، که اکنون با کلاس DirectionsRenderer انجام می‌شود. شما می توانید یک شی DirectionsRenderer را از طریق متدهای setMap() و setDirections() به هر نقشه یا شی DirectionsResult گره بزنید. از آنجایی که رندر یک MVCObject است، هر گونه تغییر در ویژگی های آن را شناسایی می کند و زمانی که جهت های مرتبط تغییر کرد، نقشه را به روز می کند.

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

var map;
var directions;
var directionsPanel;

function initialize() {
  var origin = new google.maps.LatLng(53.348172, -6.297285);
  var destination = new google.maps.LatLng(53.355502, -6.30557);
  directionsPanel = document.getElementById("route");

  map = new GMap2(document.getElementById('map'));
  map.setCenter(origin, 10);
  map.setUIToDefault();

  directions = new GDirections(map, directionsPanel);

  directions.loadFromWaypoints(
      [origin, destination], {
        travelMode: 'G_TRAVEL_MODE_WALKING',
  });
}
 
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  var origin = new google.maps.LatLng(53.348172, -6.297285);
  var destination = new google.maps.LatLng(53.355502, -6.30557);
  directionsRenderer = new google.maps.DirectionsRenderer();

  map = new google.maps.Map(
      document.getElementById('map'), {
        center: origin,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsRenderer.setPanel(document.getElementById("route"));
  directionsRenderer.setMap(map);
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
    }
  });
}

نمای خیابان گوگل نماهای تعاملی 360 درجه را از مکان های تعیین شده در محدوده تحت پوشش خود ارائه می دهد. API v3 به طور بومی از نمای خیابان در مرورگر پشتیبانی می کند، برخلاف v2 که برای نمایش تصاویر نمای خیابان به پلاگین Flash® نیاز داشت.

تصاویر نمای خیابان از طریق استفاده از شی StreetViewPanorama در نسخه 3 یا شیء GStreetviewPanorama در نسخه 2 پشتیبانی می شوند. این کلاس‌ها رابط‌های متفاوتی دارند، اما نقش یکسانی دارند: اتصال ظرف div با تصاویر نمای خیابان و به شما امکان تعیین مکان و POV (نقطه دید) پانورامای نمای خیابان.

function initialize() {
  var fenwayPark = new GLatLng(42.345573, -71.098326);
  panoramaOptions = {
    latlng: fenwayPark,
    pov: {
      heading: 35,
      pitch: 5,
      zoom: 1
    }
  };

  var panorama = new GStreetviewPanorama(
      document.getElementById('pano'),
      panoramaOptions);

  GEvent.addListener(myPano, "error", handleNoFlash);
}

function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert('Error: Your browser does not support Flash');
    return;
  }
}
 
function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 35,
      pitch: 5,
      zoom: 1
    }
  };

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'),
      panoramaOptions);
}

دسترسی مستقیم به داده های Street View از طریق شی StreetViewService در نسخه 3 یا شیء مشابه GStreetviewClient در نسخه 2 امکان پذیر است. هر دو رابط‌های مشابهی برای بازیابی یا بررسی در دسترس بودن داده‌های نمای خیابان ارائه می‌کنند و امکان جستجو بر اساس مکان یا شناسه پانوراما را فراهم می‌کنند.

در نسخه 3، نمای خیابان به طور پیش فرض فعال است. نقشه با یک کنترل آدمک نمای خیابان ظاهر می شود و API از div نقشه برای نمایش پانورامای StreetView استفاده مجدد می کند. کد زیر نحوه شبیه‌سازی رفتار v2 را با جدا کردن پانوراماهای نمای خیابان در یک بخش جداگانه نشان می‌دهد.

var marker;
var panoClient = new GStreetviewClient();

function initialize() {
  if (GBrowserIsCompatible()) {
    var myPano = new GStreetviewPanorama(
        document.getElementById('pano'));
    GEvent.addListener(myPano, 'error', handleNoFlash);
    var map = new GMap2(document.getElementById('map'));
    map.setCenter(new GLatLng(42.345573, -71.098326), 16);
    map.setUIToDefault();

    GEvent.addListener(map, 'click', function(overlay, latlng) {
      if (marker) {
        marker.setLatLng(latlng);
      } else {
        marker = new GMarker(latlng);
        map.addOverlay(marker);
      }
      var nearestPano = panoClient.getNearestPanorama(
          latlng, processSVData);
    });

    function processSVData(panoData) {
      if (panoData.code != 200) {
        alert("Panorama data not found for this location.");
      }
      var latlng = marker.getLatLng();
      var dLat = latlng.latRadians()
          - panoData.location.latlng.latRadians();
      var dLon = latlng.lngRadians()
          - panoData.location.latlng.lngRadians();
      var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
      var x = Math.cos(panoData.location.latlng.latRadians()) *
              Math.sin(latlng.latRadians()) -
              Math.sin(panoData.location.latlng.latRadians()) *
              Math.cos(latlng.latRadians()) * Math.cos(dLon);
      var bearing = Math.atan2(y, x) * 180 / Math.PI;

      myPano.setLocationAndPOV(panoData.location.latlng, {
        yaw: bearing
      });
    }

    function handleNoFlash(errorCode) {
      if (errorCode == FLASH_UNAVAILABLE) {
        alert('Error: Your browser does not support Flash');
        return;
      }
    }
  }
}
 
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();

function radians(degrees) { return Math.PI * degrees / 180.0 };

function initialize() {

  panorama = new google.maps.StreetViewPanorama(
      document.getElementById("pano"));

  map = new google.maps.Map(
      document.getElementById('map'), {
    center: new google.maps.LatLng(42.345573, -71.098326),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 16
  });

  google.maps.event.addListener(map, 'click', function(event) {
    if (!marker) {
      marker = new google.maps.Marker({
          position: event.latLng,
          map: map
      });
    } else {
      marker.setPosition(event.latLng);
    }
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(panoData, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    alert("Panorama data not found for this location.");
  }
  var bearing = google.maps.geometry.spherical.computeHeading(
      panoData.location.latLng, marker.getPosition());

  panorama.setPano(panoData.location.pano);

  panorama.setPov({
    heading: bearing,
    pitch: 0,
    zoom: 1
  });

  panorama.setVisible(true);
  marker.setMap(panorama);
}