Mengupgrade Aplikasi Maps JavaScript API Anda dari V2 ke V3

Maps JavaScript API v2 tidak tersedia lagi mulai 26 Mei 2021. Akibatnya, peta v2 situs Anda akan berhenti berfungsi, dan akan menampilkan error JavaScript. Untuk terus menggunakan peta di situs Anda, lakukan migrasi ke Maps JavaScript API v3. Panduan ini akan membantu Anda menyelesaikan prosesnya.

Ringkasan

Setiap aplikasi akan memiliki proses migrasi yang sedikit berbeda; namun, ada beberapa langkah yang umum untuk semua project:

  1. Dapatkan kunci baru. Maps JavaScript API kini menggunakan konsol Google Cloud untuk mengelola kunci. Jika Anda masih menggunakan kunci v2, pastikan untuk mendapatkan kunci API baru sebelum memulai migrasi.
  2. Perbarui Bootstrap API Anda. Sebagian besar aplikasi akan memuat Maps JavaScript API v3 dengan kode berikut:
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  3. Perbarui kode Anda. Jumlah perubahan yang diperlukan akan sangat bergantung pada aplikasi Anda. Perubahan umum meliputi:
    • Selalu referensikan namespace google.maps. Di v3, semua kode Maps JavaScript API disimpan di namespace google.maps.*, bukan namespace global. Sebagian besar objek juga telah diganti namanya sebagai bagian dari proses ini. Misalnya, sebagai ganti GMap2, Anda kini akan memuat google.maps.Map.
    • Hapus semua referensi ke metode yang tidak digunakan lagi. Sejumlah metode utilitas tujuan umum telah dihapus, seperti GDownloadURL dan GLog. Ganti fungsi ini dengan library utilitas pihak ketiga, atau hapus referensi ini dari kode Anda.
    • (Opsional) Tambahkan library ke kode Anda. Banyak fitur telah dieksternalisasi ke dalam library utilitas sehingga setiap aplikasi hanya perlu memuat bagian API yang akan digunakan.
    • (Opsional) Konfigurasikan project Anda untuk menggunakan extern v3. Extern v3 dapat digunakan untuk membantu memvalidasi kode Anda dengan Closure Compiler, atau untuk memicu pelengkapan otomatis di IDE Anda. Pelajari lebih lanjut Kompilasi Lanjutan dan Extern.
  4. Uji dan lakukan iterasi. Pada tahap ini, Anda masih memiliki beberapa pekerjaan yang harus dilakukan, tetapi kabar baiknya adalah Anda akan berada di jalan yang benar untuk aplikasi peta v3 baru.

Perubahan di V3 Maps JavaScript API

Sebelum merencanakan migrasi, Anda harus meluangkan waktu untuk memahami perbedaan antara Maps JavaScript API v2 dan Maps JavaScript API v3. Versi terbaru Maps JavaScript API telah ditulis dari awal, dengan fokus pada teknik pemrograman JavaScript modern, peningkatan penggunaan library, dan API yang disederhanakan. Banyak fitur baru telah ditambahkan ke API, dan beberapa fitur yang sudah dikenal telah diubah atau bahkan dihapus. Bagian ini menyoroti beberapa perbedaan utama antara kedua rilis.

Beberapa perubahan dalam API v3 meliputi:

  • Pustaka inti yang efisien. Banyak fungsi tambahan telah dipindahkan ke library, yang membantu mengurangi waktu pemuatan dan penguraian untuk Core API, sehingga memungkinkan peta Anda dimuat dengan cepat di perangkat apa pun.
  • Meningkatkan performa beberapa fitur, seperti rendering poligon dan penempatan penanda.
  • Pendekatan baru untuk batas penggunaan sisi klien guna mengakomodasi alamat bersama yang digunakan oleh proxy seluler dan firewall perusahaan dengan lebih baik.
  • Menambahkan dukungan untuk beberapa browser modern dan browser seluler. Dukungan untuk Internet Explorer 6 telah dihapus.
  • Menghapus banyak class helper tujuan umum ( GLog atau GDownloadUrl). Saat ini, ada banyak library JavaScript yang bagus yang menyediakan fungsi serupa, seperti Closure atau jQuery.
  • Implementasi HTML5 Street View yang akan dimuat pada semua perangkat seluler.
  • Panorama Street View kustom dengan foto Anda sendiri, yang memungkinkan Anda membagikan panorama lereng ski, rumah yang dijual, atau tempat menarik lainnya.
  • Penyesuaian Maps Bergaya yang memungkinkan Anda mengubah tampilan elemen di peta dasar agar sesuai dengan gaya visual unik Anda.
  • Dukungan untuk beberapa layanan baru, seperti ElevationService dan Distance Matrix.
  • Layanan rute yang ditingkatkan menyediakan rute alternatif, pengoptimalan rute (solusi perkiraan untuk permasalahan penjual keliling), rute bersepeda (dengan lapisan bersepeda), rute transportasi umum, dan rute yang dapat ditarik.
  • Format Geocoding yang diperbarui yang memberikan informasi type yang lebih akurat daripada nilai accuracy dari Geocoding API v2.
  • Dukungan untuk beberapa Jendela Info di satu Peta

Meningkatkan Versi Aplikasi Anda

Kunci Baru Anda

Maps JavaScript API v3 menggunakan sistem kunci baru dari v2. Anda mungkin sudah menggunakan kunci v3 dengan aplikasi Anda, dalam hal ini tidak diperlukan perubahan. Untuk memverifikasi, periksa URL tempat Anda memuat Maps JavaScript API untuk parameter key-nya. Jika nilai kunci dimulai dengan 'ABQIAA', Anda menggunakan kunci v2. Jika memiliki kunci v2, Anda harus mengupgrade ke kunci v3 sebagai bagian dari migrasi, yang akan:

Kunci diteruskan saat memuat Maps JavaScript API v3. Pelajari lebih lanjut cara membuat kunci API.

Perhatikan bahwa jika Anda adalah pelanggan Google Maps API for Work, Anda mungkin menggunakan client ID dengan parameter client, bukan menggunakan parameter key. Client ID masih didukung di Maps JavaScript API v3 dan tidak perlu melalui proses upgrade kunci.

Memuat API

Modifikasi pertama yang perlu Anda lakukan pada kode melibatkan cara memuat API. Di v2, Anda memuat Maps JavaScript API melalui permintaan ke http://maps.google.com/maps. Jika memuat Maps JavaScript API v3, Anda harus melakukan perubahan berikut:

  1. Memuat API dari //maps.googleapis.com/maps/api/js
  2. Hapus parameter file.
  3. Perbarui parameter key dengan kunci v3 baru Anda. Pelanggan Google Maps API for Work harus menggunakan parameter client.
  4. (Khusus Premium Plan Google Maps Platform) Pastikan parameter client diberikan seperti yang dijelaskan dalam Panduan Developer Premium Plan Google Maps Platform.
  5. Hapus parameter v untuk meminta versi terbaru yang dirilis atau ubah nilainya sesuai dengan skema pemberian versi v3.
  6. (Opsional) Ganti parameter hl dengan language dan pertahankan nilainya.
  7. (Opsional) Tambahkan parameter libraries untuk memuat library opsional.

Dalam kasus paling sederhana, bootstrap v3 hanya akan menentukan parameter kunci API Anda:

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

Contoh di bawah meminta versi terbaru Maps JavaScript API v2 dalam bahasa Jerman:

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

Contoh di bawah adalah permintaan ekuivalen untuk v3.

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

Memperkenalkan namespace google.maps

Mungkin perubahan yang paling mencolok di Maps JavaScript API v3 adalah pengenalan namespace google.maps. API v2 menempatkan semua objek di namespace Global secara default, yang dapat menyebabkan konflik penamaan. Dalam v3, semua objek berada dalam namespace google.maps.

Saat memigrasikan aplikasi ke v3, Anda harus mengubah kode untuk menggunakan namespace baru. Sayangnya, menelusuri "G" dan menggantinya dengan "google.maps" tidak akan sepenuhnya berfungsi; tetapi, ini adalah aturan umum yang baik untuk diterapkan saat meninjau kode Anda. Berikut beberapa contoh class yang setara di v2 dan 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

Membuang Kode yang Tidak Terpakai

Maps JavaScript API v3 memiliki paralel untuk sebagian besar fungsi di v2; namun, ada beberapa class yang tidak lagi didukung. Sebagai bagian dari migrasi, Anda harus mengganti class ini dengan library utilitas pihak ketiga, atau menghapus referensi ini dari kode Anda. Ada banyak library JavaScript yang sangat baik yang menyediakan fungsi serupa, seperti Closure atau jQuery.

Class berikut tidak memiliki paralel di Maps JavaScript API v3:

GBoundsGLanguage
GBrowserIsCompatibleGLayer
GControlGLog
GControlAnchorGMercatorProjection
GControlImplGNavLabelControl
GControlPositionGObliqueMercator
GCopyrightGOverlay
GCopyrightCollectionGPhotoSpec
GDownloadUrlGPolyEditingOptions
GDraggableObjectGScreenOverlay
GDraggableObjectOptionsGStreetviewFeatures
GFactualGeocodeCacheGStreetviewLocation
GGeoAddressAccuracyGStreetviewOverlay
GGeocodeCacheGStreetviewUserPhotosOptions
GGoogleBarGTileLayerOptions
GGoogleBarAdsOptionsGTileLayerOverlayOptions
GGoogleBarLinkTargetGTrafficOverlayOptions
GGoogleBarListingTypesGUnload
GGoogleBarOptionsGXml
GGoogleBarResultListGXmlHttp
GInfoWindowTabGXslt
GKeyboardHandler

Membandingkan Kode

Mari kita bandingkan dua aplikasi yang agak sederhana yang telah ditulis dengan API v2 dan 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>

Seperti yang dapat Anda lihat, ada beberapa perbedaan antara kedua aplikasi tersebut. Perubahan penting meliputi:

  • Alamat dari mana API dimuat telah berubah.
  • Metode GBrowserIsCompatible() dan GUnload() tidak lagi diperlukan di v3, dan telah dihapus dari API.
  • Objek GMap2 diganti dengan google.maps.Map sebagai objek pusat di API.
  • Properti sekarang dimuat melalui kelas Options. Dalam contoh di atas, kita menetapkan tiga properti yang diperlukan untuk memuat peta — center, zoom, dan mapTypeId — melalui objek MapOptions yang disisipkan.
  • UI default aktif secara default dalam v3. Anda dapat menonaktifkannya dengan menetapkan properti disableDefaultUI ke true dalam objek MapOptions.

Ringkasan

Pada tahap ini, Anda akan memahami beberapa poin penting yang terlibat dalam migrasi dari Maps JavaScript API v2 ke v3. Ada informasi selengkapnya yang mungkin perlu Anda ketahui, tetapi hal ini akan bergantung pada aplikasi Anda. Di bagian berikut, kami telah menyertakan petunjuk migrasi untuk kasus tertentu yang mungkin Anda alami. Selain itu, ada beberapa referensi yang mungkin berguna selama proses upgrade.

  • Dokumentasi Developer Maps JavaScript API v3 adalah tempat terbaik untuk mempelajari lebih lanjut API dan cara kerjanya.
  • Referensi Maps JavaScript API v3 akan membantu Anda mempelajari lebih lanjut class dan metode baru di API v3.
  • Komunitas Stack Overflow adalah tempat yang tepat untuk mengajukan pertanyaan terkait kode Anda. Di situs ini, pertanyaan dan jawaban yang berkaitan dengan Maps JavaScript API menggunakan tag 'google-maps' atau 'google-maps-api-3'.
  • Pelanggan Premium Plan Google Maps Platform sebaiknya membaca Dokumentasi Premium Plan Google Maps Platform.
  • Blog Developer Geo Google adalah cara yang bagus untuk mengetahui perubahan terbaru pada API.

Jika Anda mengalami masalah atau pertanyaan tentang artikel ini, gunakan link KIRIM MASUKAN di bagian atas halaman ini.

Referensi Detail

Bagian ini memberikan perbandingan mendetail tentang fitur paling populer untuk Maps JavaScript API v2 dan v3. Setiap bagian referensi dirancang untuk dibaca satu per satu. Sebaiknya Anda tidak membaca referensi ini secara keseluruhan; sebagai gantinya, gunakan materi ini untuk membantu migrasi Anda berdasarkan kasus per kasus.

  • Peristiwa - mendaftar dan menangani peristiwa.
  • Kontrol - memanipulasi kontrol navigasi yang muncul di peta.
  • Overlay - menambahkan dan mengedit objek di peta.
  • Jenis Peta - ubin yang membentuk peta dasar.
  • Lapisan - menambahkan dan mengedit konten sebagai grup, seperti lapisan KML atau Lalu Lintas.
  • Layanan - menggunakan layanan geocoding, rute, atau Street View Google.

Acara

Model peristiwa untuk Maps JavaScript API v3 mirip dengan yang digunakan di v2, walaupun banyak yang berubah di balik layar.

API v3 menambahkan tipe kejadian baru untuk merefleksikan perubahan status MVC. Sekarang ada dua jenis peristiwa:

  • Peristiwa pengguna (seperti peristiwa mouse "klik") disebarkan dari DOM ke Maps JavaScript API. Peristiwa ini terpisah dan berbeda dari peristiwa DOM standar.
  • Notifikasi perubahan status MVC mencerminkan perubahan dalam objek Maps API dan diberi nama menggunakan ketentuan property_changed.

Setiap objek Maps API mengekspor sejumlah kejadian yang telah dinamai. Aplikasi yang tertarik dengan peristiwa tertentu harus mendaftarkan pemroses peristiwa untuk peristiwa tersebut dan mengeksekusi kode saat peristiwa tersebut diterima. Mekanisme berbasis peristiwa ini sama di Maps JavaScript API v2 dan v3, kecuali bahwa namespace telah berubah dari GEvent menjadi 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.');
});

Untuk alasan performa, sebaiknya hapus pemroses peristiwa saat tidak diperlukan lagi. Menghapus pemroses peristiwa berfungsi dengan cara yang sama di v2 dan v3:

  1. Saat Anda membuat pemroses peristiwa, objek buram (GEventListener di v2, MapsEventListener di v3) akan ditampilkan.
  2. Jika Anda ingin menghapus pemroses peristiwa, teruskan objek ini ke metode removeListener() (GEvent.removeListener() di v2 atau google.maps.event.removeListener() di v3) untuk menghapus pemroses peristiwa.

Jika Anda ingin merekam dan merespons peristiwa DOM (Document Object Model), v3 menyediakan metode statis google.maps.event.addDomListener(), yang setara dengan metode GEvent.addDomListener() di v2.

Peristiwa UI sering kali meneruskan argumen peristiwa yang kemudian dapat diakses oleh pemroses peristiwa. Sebagian besar argumen peristiwa di v3 telah disederhanakan agar lebih konsisten dengan objek di API. (Lihat Referensi v3 untuk mengetahui detailnya.)

Tidak ada argumen overlay di pemroses peristiwa v3. Jika Anda mendaftarkan peristiwa click pada peta v3, callback hanya akan terjadi saat pengguna mengklik peta dasar. Anda dapat mendaftarkan callback tambahan di overlay yang dapat diklik jika perlu bereaksi terhadap klik tersebut. 

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

Kontrol

Maps JavaScript API menampilkan kontrol UI yang memungkinkan pengguna berinteraksi dengan peta Anda. Anda dapat menggunakan API untuk menyesuaikan tampilan kontrol ini.

Beberapa perubahan pada jenis control telah diperkenalkan dengan API v3.

  1. API v3 mendukung jenis peta tambahan, termasuk peta medan dan kemampuan untuk menambahkan jenis peta kustom.
  2. Kontrol hierarkis v2, GHierarchicalMapTypeControl, tidak lagi tersedia. Anda dapat memperoleh efek yang serupa dengan menggunakan kontrol google.maps.MapTypeControlStyle.HORIZONTAL_BAR.
  3. Tata letak horizontal yang disediakan oleh GMapTypeControl di v2 tidak tersedia di v3.

Dengan Maps JavaScript API v2, Anda akan menambahkan kontrol ke peta melalui metode addControl() objek peta. Di v3, Anda mengubah objek MapOptions terkait, bukan mengakses atau mengubah kontrol secara langsung. Contoh di bawah menunjukkan cara menyesuaikan peta untuk menambahkan kontrol berikut:

  • tombol yang memungkinkan pengguna beralih antar tipe peta yang tersedia
  • skala peta
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);

Pemosisian kontrol telah berubah banyak dalam v3. Di v2, metode addControl() menggunakan parameter kedua opsional yang memungkinkan Anda menentukan posisi kontrol relatif terhadap sudut peta.

Di v3, Anda menetapkan posisi kontrol melalui properti position dari opsi kontrol. Pemosisian kontrol ini tidak mutlak; sebagai gantinya, API akan menata letak kontrol secara cerdas dengan "mengalirkan"nya di sekitar elemen peta yang ada dalam batasan tertentu (seperti ukuran peta). Hal ini memastikan kontrol default kompatibel dengan kontrol Anda. Lihat Mengontrol Pemosisi di v3 untuk mengetahui informasi selengkapnya.

Kode berikut memosisikan-ulang kontrol dari contoh di atas:

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 memungkinkan Anda membuat kontrol navigasi kustom. Untuk menyesuaikan kontrol dengan v2 API, Anda akan membuat subclass class GControl dan menentukan pengendali untuk metode initialize() dan getDefaultPosition(). Tidak ada yang setara dengan class GControl di v3. Sebagai gantinya, kontrol direpresentasikan sebagai elemen DOM. Untuk menambahkan kontrol kustom dengan v3 API, buat struktur DOM untuk kontrol di konstruktor sebagai turunan dari Node (misalnya, elemen <div>) dan tambahkan pemroses peristiwa untuk menangani peristiwa DOM apa pun. Kirim Node ke array controls[position] peta untuk menambahkan instance kontrol kustom ke peta Anda.

Dengan implementasi class HomeControl yang mematuhi persyaratan antarmuka yang disebutkan di atas (lihat dokumentasi Kontrol kustom untuk mengetahui detailnya), contoh kode berikut menunjukkan cara menambahkan kontrol kustom ke peta. 

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

Overlay mencerminkan objek yang Anda "tambahkan" ke peta untuk menunjukkan titik, garis, area, atau kumpulan objek.

Jenis objek yang direpresentasikan oleh Overlay sama antara v2 dan v3, tetapi ditangani secara berbeda.

Overlay di API v2 ditambahkan ke dan dihapus dari peta menggunakan metode addOverlay() dan removeOverlay() dari objek GMap2. Di v3, Anda menetapkan peta ke Overlay melalui properti map class opsi overlay terkait. Anda juga dapat menambahkan atau menghapus overlay secara langsung dengan memanggil metode setMap() objek overlay, dan menentukan peta yang diinginkan. Menetapkan properti peta ke null akan menghapus overlay.

Tidak ada metode clearOverlays() di v3. Jika ingin mengelola kumpulan overlay, Anda harus membuat array untuk menyimpan overlay. Dengan menggunakan array ini, Anda kemudian dapat memanggil setMap() pada setiap overlay dalam array (meneruskan null jika Anda perlu menghapusnya).

Secara default, marker bisa diklik tapi tidak dapat diseret. Dua contoh berikut menambahkan penanda yang dapat ditarik:

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

Anda bisa menetapkan ikon khusus agar ditampilkan sebagai pengganti marker default. Untuk menggunakan image kustom di v2, Anda dapat membuat instance GIcon dari G_DEFAULT_ICON type, dan mengubahnya. Jika gambar Anda lebih besar atau lebih kecil dari ikon default, Anda harus menentukannya dengan instance GSize. API v3 sedikit menyederhanakan proses ini. Cukup tetapkan properti icon penanda ke URL gambar kustom Anda, dan API akan menetapkan ukuran ikon secara otomatis.

Maps JavaScript API juga menyediakan dukungan untuk ikon yang kompleks. Ikon kompleks dapat mencakup beberapa kartu, bentuk kompleks, atau menentukan "urutan tumpukan" tampilan gambar secara relatif terhadap overlay lainnya. Untuk menambahkan bentuk ke penanda di v2, Anda harus menentukan properti tambahan di setiap instance GIcon dan meneruskannya sebagai opsi ke konstruktor GMarker. Di v3, ikon yang ditentukan dengan cara ini harus menetapkan properti icon-nya ke objek berjenis Icon. Bayangan marker tidak didukung di v3.

Contoh berikut menampilkan bendera pantai di Pantai Bondi di Australia, dengan bagian transparan ikon yang tidak dapat diklik: 

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

Polyline terdiri dari array LatLng, ditambah serangkaian segmen garis yang menghubungkan lokasi tersebut secara berurutan. Membuat dan menampilkan objek Polyline di v3 mirip dengan menggunakan objek GPolyline di v2. Contoh berikut menggambar polyline geodesi semi-transparan dengan lebar 3 piksel dari Zurich ke Sydney melalui Singapura:

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 yang Dienkode

Tidak ada dukungan di v3 untuk membuat objek Polyline secara langsung dari polyline yang dienkode. Sebagai gantinya, Library Geometri menyediakan metode untuk mengenkode dan mendekode polyline. Lihat Library di Maps API v3 untuk mengetahui informasi selengkapnya tentang cara memuat library ini.

Contoh di bawah ini menggambar polyline yang sama yang dienkode; kode v3 menggunakan metode decodePath() dari namespace 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);

Sebuah Poligon mendefinisikan suatu region dalam loop tertutup. Sama seperti objek Polyline, objek Polygon terdiri dari serangkaian titik dalam urutan yang berurutan. Class Polygon v3 hampir sama dengan class GPolygon v2, dengan pengecualian penting bahwa Anda tidak perlu lagi mengulangi vertex awal di akhir jalur untuk menutup loop. API v3 akan otomatis menutup poligon dengan menggambar goresan yang menghubungkan koordinat terakhir kembali ke koordinat pertama. Cuplikan kode berikut membuat poligon yang mewakili Segitiga Bermuda:

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

Polyline dan poligon bisa dibuat dapat-diedit-pengguna. Cuplikan kode berikut setara: 

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

Untuk kemampuan menggambar yang lebih canggih, lihat Library Gambar dalam dokumentasi v3.

InfoWindow menampilkan konten dalam jendela mengambang di atas peta. Ada beberapa perbedaan utama antara jendela info v2 dan v3:

  • API v2 hanya mendukung GInfoWindow per peta, sedangkan API v3 mendukung beberapa InfoWindow serentak di setiap peta.
  • InfoWindow v3 akan tetap terbuka saat Anda mengklik peta. GInfoWindow v2 akan tertutup secara otomatis saat Anda mengklik peta. Anda dapat mengemulasi perilaku v2 dengan menambahkan pemroses click pada objek Map.
  • API v3 tidak memberikan dukungan native untuk InfoWindow dengan tab.

Untuk menempatkan gambar pada peta, Anda harus menggunakan objek GroundOverlay. Konstruktor untuk GroundOverlay pada dasarnya sama di v2 dan v3: konstruktor ini menentukan URL gambar dan batas gambar sebagai parameter.

Contoh berikut menempatkan peta antik Newark, NJ pada peta sebagai overlay:

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

Tipe Peta

Jenis peta yang tersedia di v2 dan v3 sedikit berbeda, tetapi semua jenis peta dasar tersedia di kedua versi API. Secara default, v2 menggunakan ubin peta jalan "dicat" standar. Namun, v3 memerlukan jenis peta tertentu untuk diberikan saat membuat objek google.maps.Map.

Empat tipe peta dasar yang tersedia di v2 dan v3:

  • MapTypeId.ROADMAP (menggantikan G_NORMAL_MAP) menampilkan tampilan peta jalan.
  • MapTypeId.SATELLITE (menggantikan G_SATELLITE_MAP) menampilkan gambar satelit Google Earth.
  • MapTypeId.HYBRID (menggantikan G_HYBRID_MAP) menampilkan gabungan tampilan normal dan satelit.
  • MapTypeId.TERRAIN (menggantikan G_PHYSICAL_MAP) menampilkan peta fisik berdasarkan informasi medan.

Berikut adalah contoh v2 dan v3 yang menyetel peta untuk menampilkan medan:

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

Maps JavaScript API v3 juga melakukan beberapa perubahan pada jenis peta yang kurang umum:

  • Ubin peta untuk benda langit selain Bumi tidak tersedia sebagai jenis peta di API v3, tetapi dapat diakses sebagai jenis peta kustom seperti yang ditunjukkan dalam contoh ini.
  • Tidak ada jenis peta khusus di v3 yang menggantikan jenis G_SATELLITE_3D_MAP dari v2. Sebagai gantinya, Anda dapat mengintegrasikan plugin Google Earth di peta v3 menggunakan library ini.

Gambar satelit tidak selalu tersedia pada tingkat zoom tinggi. Jika Anda ingin mengetahui tingkat zoom tertinggi yang tersedia sebelum menetapkan tingkat zoom, gunakan class google.maps.MaxZoomService. Class ini menggantikan metode GMapType.getMaxZoomAtLatLng() dari 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.");
    }
});

Saat mengaktifkan gambar Aerial di v3, kontrolnya mirip dengan kontrol GLargeZoomControl3D v2, dengan kontrol Rotate interstisial tambahan untuk memutar melalui arah yang didukung.

Anda dapat melacak kota tempat gambar 45° saat ini tersedia di peta ini. Jika citra 45° tersedia, opsi submenu akan ditambahkan ke tombol Satelit Maps API.

Lapisan

Lapisan adalah objek di peta yang terdiri dari satu atau beberapa overlay. Model dapat dimanipulasi sebagai satu unit dan umumnya mencerminkan kumpulan objek.

API v3 menyediakan akses ke beberapa layer yang berbeda. Lapisan ini tumpang-tindih dengan class GLayer v2 di area berikut:

  • Objek KmlLayer merender elemen KML dan GeoRSS menjadi overlay v3, yang memberikan elemen yang setara untuk lapisan GeoXml v2.
  • Objek TrafficLayer merender lapisan yang menggambarkan kondisi lalu lintas, mirip dengan overlay GTrafficOverlay v2.

Layer ini berbeda dari v2. Perbedaannya dijelaskan di bawah. Lapisan dapat ditambahkan ke peta dengan memanggil setMap(), dengan meneruskan objek Map yang akan menampilkan lapisan.

Informasi selengkapnya tentang lapisan yang didukung tersedia di Dokumentasi lapisan.

Maps JavaScript API mendukung format data KML dan GeoRSS untuk menampilkan informasi geografis. File KML atau GeoRSS harus dapat diakses secara publik jika Anda ingin menyertakannya dalam peta. Di v3, format data ini ditampilkan menggunakan instance KmlLayer, yang menggantikan objek GGeoXml dari v2.

API v3 lebih fleksibel saat merender KML, sehingga Anda dapat menyembunyikan InfoWindows dan mengubah respons klik. Lihat dokumentasi Lapisan KML dan GeoRSS v3 untuk mengetahui detail selengkapnya.

Saat merender KmlLayer, batasan ukuran dan kompleksitas berlaku; lihat dokumentasi KmlLayer untuk mengetahui detailnya.

Contoh berikut membandingkan cara memuat file 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 memungkinkan Anda menambahkan informasi lalu lintas secara real-time (jika didukung) ke peta menggunakan objek TrafficLayer. Informasi lalu lintas diberikan untuk waktu permintaan dibuat. Contoh ini menunjukkan informasi lalu lintas untuk Los Angeles: 

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

Tidak seperti v2, tidak ada opsi untuk konstruktor TrafficLayer di v3. Insiden tidak tersedia di v3.

Layanan

Maps JavaScript API menyediakan objek geocoder untuk melakukan geocoding alamat secara dinamis dari input pengguna. Jika Anda ingin melakukan geocoding pada alamat statis yang diketahui, lihat dokumentasi Geocoding API.

Geocoding API telah diupgrade dan ditingkatkan secara signifikan, dengan menambahkan fitur baru dan mengubah cara data ditampilkan.

GClientGeocoder di API v2 menyediakan dua metode yang berbeda untuk geocoding maju dan mundur serta metode tambahan untuk memengaruhi cara geocoding dilakukan. Sebaliknya, objek Geocoder v3 hanya menyediakan metode geocode(), yang menggunakan literal objek yang berisi istilah input (dalam bentuk objek Permintaan Geocoding) dan metode callback. Bergantung pada apakah permintaan tersebut berisi atribut address tekstual atau objek LatLng, Geocoding API akan menampilkan respons geocoding maju atau balik. Anda dapat memengaruhi cara geocoding dilakukan dengan meneruskan kolom tambahan ke permintaan geocoding:

  • Menyertakan address tekstual akan memicu geocoding maju, yang setara dengan memanggil metode getLatLng().
  • Menyertakan objek latLng akan memicu geocoding terbalik, yang setara dengan memanggil metode getLocations().
  • Menyertakan atribut bounds akan mengaktifkan Viewport Biasing, yang setara dengan memanggil metode setViewport().
  • Menyertakan atribut region akan mengaktifkan Region Code Biasing, yang setara dengan memanggil metode setBaseCountryCode().

Respons Geocoding di v3 sangat berbeda dengan respons v2. API v3 menggantikan struktur bertingkat yang digunakan v2 dengan struktur yang lebih datar dan lebih mudah diuraikan. Selain itu, respons v3 lebih mendetail: setiap hasil memiliki beberapa komponen alamat yang membantu memberikan gambaran yang lebih baik tentang resolusi setiap hasil.

Kode berikut mengambil alamat tekstual dan menampilkan hasil pertama dari geocoding-nya: 

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 mengganti class GDirections dari v2 dengan class DirectionsService untuk menghitung rute.

Metode route() di v3 menggantikan metode load() dan loadFromWaypoints() dari v2 API. Metode ini menggunakan satu literal objek DirectionsRequest yang berisi istilah input dan metode callback yang akan dieksekusi setelah menerima respons. Opsi dapat diberikan dalam literal objek ini, mirip dengan literal objek GDirectionsOptions di v2.

Di Maps JavaScript API v3, tugas mengirimkan permintaan rute telah dipisahkan dari tugas merender permintaan, yang kini ditangani dengan class DirectionsRenderer. Anda dapat mengaitkan objek DirectionsRenderer ke peta atau objek DirectionsResult apa pun melalui metode setMap() dan setDirections(). Karena perender adalah MVCObject, perender ini akan mendeteksi perubahan pada propertinya dan memperbarui peta jika rute yang terkait telah berubah.

Kode berikut menunjukkan cara meminta rute jalan kaki ke lokasi tertentu menggunakan jalur pejalan kaki dari alamat. Perhatikan bahwa hanya v3 yang dapat memberikan rute jalan kaki di jalur pejalan kaki di Kebun Binatang Dublin. 

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

Google Street View memberikan tampilan 360° interaktif dari lokasi yang ditetapkan dalam area cakupannya. API v3 mendukung Street View secara native dalam browser, tidak seperti v2 yang memerlukan plugin Flash® untuk menampilkan gambar Street View.

Gambar Street View didukung melalui penggunaan objek StreetViewPanorama di v3, atau objek GStreetviewPanorama di v2. Class ini memiliki antarmuka yang berbeda, tetapi memiliki peran yang sama: menghubungkan penampung div dengan gambar Street View dan memungkinkan Anda menentukan lokasi dan POV (titik pandang) panorama Street View. 

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

Akses langsung ke data Street View dapat dilakukan melalui objek StreetViewService di v3 atau objek GStreetviewClient serupa di v2. Keduanya menyediakan antarmuka yang serupa untuk mengambil atau memeriksa ketersediaan data Street View, dan memungkinkan penelusuran menurut lokasi atau ID panorama.

Di v3, Street View secara default diaktifkan. Peta akan muncul dengan kontrol Pegman Street View dan API akan menggunakan kembali div peta untuk menampilkan panorama StreetView. Kode berikut mengilustrasikan cara mengemulasi perilaku v2 dengan memisahkan panorama Street View ke dalam div terpisah. 

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