Maps JavaScript API v2 tidak lagi tersedia 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 melalui
proses tersebut.
Ringkasan
Setiap aplikasi akan memiliki proses migrasi yang sedikit berbeda;
Namun, ada beberapa langkah yang sama untuk semua project:
- Dapatkan kunci baru. Maps JavaScript API kini menggunakan
Google Cloud Console untuk mengelola kunci. Jika masih menggunakan kunci v2, pastikan Anda mendapatkan kunci API baru sebelum memulai migrasi.
- Update Bootstrap API. 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>
- Perbarui kode Anda. Jumlah perubahan yang diperlukan akan sangat bergantung pada aplikasi Anda. Perubahan umum mencakup:
- 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, Anda akan memuat google.maps.Map
, bukan GMap2
.
- Hapus semua referensi ke metode yang tidak digunakan lagi. Sejumlah
metode utilitas tujuan umum telah dihapus, seperti
GDownloadURL
dan GLog
.
Ganti fungsionalitas ini dengan library utilitas pihak ketiga, atau hapus referensi ini dari kode Anda.
- (Opsional) Tambahkan library ke kode Anda. Banyak
fitur yang telah dieksternalkan ke dalam library utilitas sehingga setiap
aplikasi hanya perlu memuat bagian API yang akan digunakan.
- (Opsional) Konfigurasikan project Anda untuk menggunakan externs v3.
Externs v3 dapat digunakan untuk membantu memvalidasi kode Anda dengan Closure
Compiler, atau untuk memicu pelengkapan otomatis di IDE.
Pelajari lebih lanjut
Kompilasi Lanjutan dan Eksternal.
- Uji dan iterasi. Pada titik ini Anda masih memiliki beberapa pekerjaan yang harus dilakukan, tetapi kabar baiknya adalah, Anda akan segera menuju aplikasi peta v3 baru Anda!
Perubahan pada 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 yang telah ditambahkan ke API, dan beberapa fitur
yang dikenal telah diubah atau bahkan dihapus. Bagian ini menyoroti
beberapa perbedaan utama antara kedua rilis tersebut.
Beberapa perubahan dalam API v3 meliputi:
- Pustaka inti yang efisien. Banyak fungsi tambahan telah
dipindahkan ke
library,
membantu mengurangi waktu pemuatan dan penguraian untuk Core API yang memungkinkan
peta Anda dimuat dengan cepat di perangkat apa pun.
- Peningkatan performa beberapa fitur, seperti rendering poligon dan penempatan penanda.
- Pendekatan baru terhadap batas penggunaan sisi klien agar dapat mengakomodasi alamat bersama yang digunakan oleh proxy seluler dan firewall perusahaan dengan lebih baik.
- Penambahan 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 luar biasa yang menyediakan fungsi serupa,
seperti Closure atau
jQuery.
- Implementasi HTML5 Street View yang akan dimuat pada semua perangkat seluler.
- Panorama Street View Khusus dengan foto Anda sendiri, yang memungkinkan Anda berbagi panorama lereng ski, rumah dijual, atau tempat menarik lainnya.
- Penyesuaian Maps Bergaya yang memungkinkan Anda mengubah tampilan
elemen pada peta dasar agar cocok dengan gaya visual unik Anda.
- Dukungan untuk beberapa layanan baru, seperti ElevationService
dan Distance
Matrix.
- Layanan rute yang ditingkatkan memberikan rute alternatif, pengoptimalan
rute (perkiraan solusi untuk
masalah staf penjualan yang bepergian), rute sepeda (dengan
lapisan bersepeda), rute transportasi umum, dan
rute yang dapat ditarik.
- Format Geocoding yang diperbarui yang memberikan informasi
jenis
yang lebih akurat daripada nilai
accuracy
dari Geocoding API v2.
- Dukungan untuk beberapa
Jendela
Info pada 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, sehingga perubahan tidak diperlukan. Untuk memverifikasi, periksa
URL tempat Anda memuat Maps JavaScript API untuk
parameter key
-nya. Jika nilai kunci dimulai dengan 'ABQIAA', berarti Anda menggunakan kunci v2. Jika memiliki kunci v2, Anda harus mengupgrade ke kunci v3 sebagai bagian dari migrasi, yang akan:
Kunci ini diteruskan saat memuat Maps JavaScript API v3.
Pelajari cara membuat kunci API lebih lanjut.
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 Anda melibatkan cara Anda 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 membuat perubahan
berikut:
- Memuat API dari
//maps.googleapis.com/maps/api/js
- Hapus parameter
file
.
- Perbarui parameter
key
dengan kunci v3 baru. Pelanggan Google Maps API for Work harus menggunakan
parameter client
.
- (Khusus Premium Plan Google Maps Platform) Pastikan parameter
client
diberikan seperti
yang dijelaskan dalam
Panduan Developer Premium Plan Google Maps Platform.
- Hapus parameter
v
untuk meminta
versi terbaru yang dirilis atau ubah nilainya sesuai dengan skema
pembuatan versi v3.
- (Opsional) Ganti parameter
hl
dengan language
dan pertahankan nilainya.
- (Opsional) Tambahkan parameter
libraries
untuk memuat library opsional.
Dalam kasus yang 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 ini 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 dalam Maps JavaScript API v3 adalah
pengenalan namespace google.maps
. API v2 menempatkan semua objek dalam namespace Global secara default, yang dapat mengakibatkan 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
mengganti dengan "google.maps." tidak akan berhasil sepenuhnya; namun, praktik terbaik yang berlaku adalah
berlaku saat meninjau kode Anda. Berikut adalah beberapa contoh
class yang setara dalam 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 fungsionalitas 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. Ada banyak library JavaScript luar biasa yang
menyediakan fungsi serupa, seperti Closure atau
jQuery.
Class berikut tidak memiliki kesamaan dalam 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 |
|
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 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
digantikan oleh
google.maps.Map
sebagai objek pusat dalam API.
- Properti sekarang dimuat melalui kelas Options. Pada contoh di atas, kita menetapkan tiga properti yang diperlukan untuk memuat peta —
center
, zoom
, dan mapTypeId
— melalui objek MapOptions
yang inline.
- UI default aktif secara default dalam v3. Anda dapat menonaktifkannya dengan menetapkan properti
disableDefaultUI
ke true di objek MapOptions
.
Ringkasan
Pada tahap ini, Anda telah memahami beberapa poin penting
yang terlibat dalam migrasi dari Maps JavaScript API ke v2 ke v3.
Ada lebih banyak informasi yang mungkin perlu Anda ketahui, tetapi bergantung pada aplikasi Anda. Di bagian berikut, kami telah menyertakan petunjuk migrasi untuk
kasus tertentu yang mungkin Anda temui. Selain itu, ada beberapa referensi yang mungkin dapat membantu Anda selama proses upgrade.
- Maps JavaScript API v3
Dokumentasi Developer
adalah tempat terbaik untuk mempelajari lebih lanjut API dan cara kerjanya.
- Maps JavaScript API v3
Referensi
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. Di situs tersebut, pertanyaan dan jawaban yang terkait 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 tepat untuk mencari tahu tentang perubahan terbaru pada API.
Jika ada masalah atau pertanyaan tentang artikel ini, harap gunakan
link KIRIM MASUKAN di bagian atas halaman ini.
Bagian ini memberikan perbandingan mendetail tentang fitur yang paling populer untuk
Maps JavaScript API untuk 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 - mendaftarkan dan menangani peristiwa.
- Kontrol - memanipulasi kontrol navigasi yang muncul pada peta.
- Overlay - menambahkan dan mengedit objek pada peta.
- Jenis Peta - ubin yang membentuk peta dasar.
- Lapisan - menambahkan dan mengedit konten sebagai
grup, seperti lapisan KML atau Traffic.
- Layanan - berfungsi dengan geocoding,
rute, atau layanan Street View Google.
Peristiwa
Model peristiwa untuk Maps JavaScript API v3 mirip dengan yang digunakan pada v2, meskipun banyak yang telah berubah di balik layar.
Kejadian Baru untuk Dukungan MVC
API v3 menambahkan tipe kejadian baru untuk merefleksikan perubahan status MVC. Sekarang
ada dua jenis peristiwa:
- Peristiwa pengguna (seperti "klik" peristiwa mouse) disebarkan dari
DOM ke Maps JavaScript API. Peristiwa ini terpisah dan
berbeda dari peristiwa DOM standar.
- Notifikasi perubahan status MVC mencerminkan perubahan pada objek Maps API
dan diberi nama menggunakan konvensi
property_changed
.
Setiap objek Maps API mengekspor sejumlah kejadian yang telah dinamai. Aplikasi
yang tertarik pada peristiwa tertentu harus mendaftarkan pemroses peristiwa
untuk peristiwa tersebut dan menjalankan kode saat peristiwa tersebut diterima. Mekanisme
yang dipicu peristiwa ini sama di Maps JavaScript API
v2 dan v3, kecuali bahwa namespace telah diubah
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.');
});
Membuang Event Listener
Untuk alasan performa, sebaiknya hapus pemroses peristiwa saat
tidak diperlukan lagi. Cara menghapus pemroses peristiwa bekerja dengan cara yang sama di v2 dan v3:
- Saat Anda membuat pemroses peristiwa, objek buram (GEventListener di v2, MapsEventListener di v3) ditampilkan.
- Jika 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.
Memantau kejadian DOM
Jika Anda ingin mengambil dan merespons peristiwa DOM (Document Object Model), v3 menyediakan metode statis google.maps.event.addDomListener()
, yang setara dengan metode GEvent.addDomListener()
di v2.
Menggunakan Argumen yang Diteruskan dalam Kejadian
Peristiwa UI sering meneruskan argumen peristiwa yang kemudian dapat diakses oleh pemroses peristiwa. Sebagian besar argumen peristiwa di v3 telah disederhanakan agar lebih konsisten untuk objek dalam API. (Lihat Referensi v3 untuk mengetahui detailnya.)
Tidak ada argumen overlay
dalam 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 pada 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.
Perubahan di Tipe Kontrol
Beberapa perubahan pada jenis control
telah diperkenalkan
dengan API v3.
- API v3 mendukung jenis peta tambahan termasuk peta medan dan kemampuan untuk menambahkan jenis peta kustom.
- Kontrol hierarkis v2,
GHierarchicalMapTypeControl
, tidak lagi tersedia.
Anda dapat memperoleh efek yang serupa dengan menggunakan kontrol google.maps.MapTypeControlStyle.HORIZONTAL_BAR
.
- Tata letak horizontal yang disediakan oleh
GMapTypeControl
di v2 tidak tersedia di v3.
Menambahkan Kontrol ke Peta.
Dengan Maps JavaScript API v2, Anda akan menambahkan kontrol ke peta melalui metode addControl()
objek peta Anda. Di v3, Anda tidak perlu mengakses atau mengubah kontrol
secara langsung, melainkan harus mengubah objek MapOptions
terkait. Contoh
di bawah ini 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 pada Peta
Pemosisian kontrol telah berubah banyak dalam v3. Pada v2, metode addControl()
mengambil 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; sebaliknya, API akan menata letak kontrol secara cerdas dengan "mengalirkan" kontrol tersebut di sekeliling elemen peta
yang ada dalam batasan tertentu (seperti ukuran peta).
Hal ini memastikan kontrol default kompatibel dengan kontrol Anda.
Lihat Mengontrol
Positioning di v3 untuk 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);
Kontrol Khusus
Maps JavaScript API memungkinkan Anda membuat kontrol navigasi khusus.
Untuk menyesuaikan kontrol dengan API v2, buat subclass dari class GControl
dan tentukan pengendali untuk metode initialize()
dan getDefaultPosition()
.
Tidak ada yang setara dengan class GControl
di v3. Sebaliknya,
kontrol dinyatakan 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.
Mengingat 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 menentukan titik,
garis, area, atau kumpulan objek.
Menambahkan dan Menghapus Overlay
Jenis objek yang direpresentasikan
oleh Overlay sama antara v2 dan v3, tetapi ditangani
secara berbeda.
Overlay di v2 API ditambahkan dan dihapus dari peta menggunakan metode
addOverlay()
dan removeOverlay()
dari
objek GMap2
. Di v3, Anda menetapkan peta ke Overlay melalui
properti map
dari class opsi overlay terkait.
Anda juga dapat menambahkan atau menghapus overlay secara langsung dengan memanggil metode setMap()
dari objek overlay, serta menentukan peta yang diinginkan. Menetapkan properti peta ke null
akan menghapus overlay.
Tidak ada metode clearOverlays()
di v3.
Jika ingin mengelola sekumpulan overlay, Anda harus membuat array untuk
menyimpan overlay. Selanjutnya, dengan menggunakan array ini, Anda dapat memanggil setMap()
di setiap overlay dalam array tersebut (meneruskan null
jika perlu menghapusnya).
Marker Dapat Diseret
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
});
Ikon
Anda bisa menetapkan ikon khusus agar ditampilkan sebagai pengganti marker default.
Untuk menggunakan gambar kustom di v2, Anda dapat membuat instance GIcon
dari G_DEFAULT_ICON type
, lalu 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 setel properti icon
penanda ke URL gambar kustom Anda, dan API akan mengubah ukuran ikon secara otomatis.
Maps JavaScript API juga menyediakan dukungan untuk ikon yang rumit.
Ikon kompleks dapat mencakup beberapa ubin, bentuk kompleks,
atau menentukan "urutan tumpukan" tentang bagaimana gambar harus ditampilkan 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
ke objek berjenis Icon
.
Bayangan marker tidak didukung di v3.
Contoh berikut menampilkan bendera pantai di Bondi Beach di Australia, dengan bagian transparan ikon 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
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, 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
langsung dari polyline yang dienkode. Sebagai gantinya, Library Geometry
menyediakan metode untuk mengenkode dan mendekode polyline. Lihat Library di Maps v3
API untuk informasi selengkapnya tentang cara memuat library ini.
Contoh di bawah ini menggambar polyline berenkode yang sama; 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);
Poligon
Sebuah Poligon mendefinisikan suatu region dalam loop tertutup. Mirip dengan objek Polyline
, objek Polygon
terdiri dari serangkaian titik secara 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 setiap poligon dengan menggambar garis luar yang menghubungkan koordinat terakhir dengan 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);
Bentuk Dapat Diedit-Pengguna
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 lanjutan lainnya, lihat
Library Gambar
dalam dokumentasi v3.
Jendela Info
InfoWindow
menampilkan konten di 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 pada setiap peta.
InfoWindow
v3 akan tetap terbuka saat Anda mengklik peta. GInfoWindow
v2 menutup
secara otomatis saat Anda mengklik peta. Anda dapat mengemulasikan perilaku v2 dengan menambahkan pemroses click
pada objek Map
.
- API v3 tidak menyediakan dukungan native untuk
InfoWindow
dengan tab.
Overlay Bumi
Untuk menempatkan gambar pada peta, gunakan objek
GroundOverlay
. Konstruktor untuk
GroundOverlay
pada dasarnya sama di v2 dan v3: konstruktor
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 standar "dicat". Namun, v3 memerlukan jenis peta tertentu untuk diberikan saat membuat objek google.maps.Map
.
Tipe Peta Biasa
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 campuran 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 membuat beberapa perubahan pada jenis
peta yang kurang umum:
- Ubin peta untuk isi langit selain Earth
tidak tersedia sebagai jenis peta di API v3, tetapi dapat diakses sebagai
jenis peta khusus seperti yang ditampilkan di
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.
Maximum Zoom Imagery
Gambar satelit tidak selalu tersedia pada tingkat zoom tinggi. Jika Anda mungkin 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.");
}
});
Gambar Perspektif Aerial
Saat mengaktifkan citra Udara di v3, kontrolnya mirip dengan kontrol GLargeZoomControl3D
v2, dengan kontrol Rotasi 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 ditambahkan
ke tombol Satelit Maps API.
Lapisan
Lapisan adalah objek pada peta yang terdiri dari satu atau beberapa overlay. Objek dapat dimanipulasi sebagai satu unit dan umumnya mencerminkan
koleksi objek.
Layer yang Didukung
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 menyediakan lapisan GeoXml
yang setara untuk
v2.
- Objek
TrafficLayer
merender lapisan yang menggambarkan
kondisi traffic, yang mirip dengan overlay
GTrafficOverlay
v2.
Layer ini berbeda dari v2. Perbedaannya dijelaskan di bawah ini. Class ini dapat ditambahkan ke peta dengan memanggil setMap()
, yang meneruskan objek Map
ke lapisan tersebut untuk menampilkan lapisan.
Informasi selengkapnya tentang lapisan yang didukung tersedia di
Dokumentasi lapisan.
Layer KML dan GeoRSS
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 memasukkannya ke dalam peta. Di v3, format
data ini ditampilkan menggunakan instance KmlLayer
,
yang menggantikan objek GGeoXml
dari v2.
API v3 lebih fleksibel saat merender KML, memungkinkan Anda menyembunyikan InfoWindows dan mengubah respons klik. Lihat dokumentasi Lapisan KML dan GeoRSS v3 untuk detail selengkapnya.
Saat merender KmlLayer
,
batasan ukuran dan kerumitan 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);
Layer Lalu Lintas
v3 memungkinkan Anda menambahkan informasi lalu lintas secara real-time (jika didukung) ke peta Anda menggunakan objek TrafficLayer
. Informasi traffic diberikan pada saat 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.
Services (Layanan)
Geocoding
Maps JavaScript API menyediakan objek geocoder
untuk alamat geocoding secara dinamis dari input pengguna. Jika Anda ingin melakukan geocoding terhadap alamat statis yang diketahui, lihat dokumentasi Geocoding API.
Geocoding API telah
diupgrade dan disempurnakan secara signifikan, menambahkan fitur baru dan mengubah
cara data ditampilkan.
GClientGeocoder
di v2 API menyediakan dua metode berbeda untuk geocoding maju dan mundur serta metode tambahan untuk memengaruhi cara melakukan geocoding. 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 berisi atribut address
tekstual atau objek LatLng
, Geocoding API akan menampilkan respons geocoding maju atau mundur. Anda dapat memengaruhi performa geocoding
dengan meneruskan kolom tambahan ke permintaan geocoding:
- Menyertakan
address
tekstual memicu geocoding maju,
setara dengan memanggil metode getLatLng()
.
- Menyertakan objek
latLng
akan memicu geocoding terbalik,
setara dengan memanggil metode getLocations()
.
- Menyertakan atribut
bounds
memungkinkan Biasing Area Pandang, yang setara dengan memanggil metode setViewport()
.
- Menyertakan atribut
region
akan mengaktifkan Bias Kode Area, 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 datar yang
lebih mudah diurai. 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:
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');
}
Directions
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 API v2. Metode ini menggunakan satu literal objek
DirectionsRequest
yang berisi istilah input dan metode callback yang akan dieksekusi setelah
respons diterima. Opsi dapat diberikan pada literal objek ini, mirip dengan literal objek GDirectionsOptions
di v2.
Di Maps JavaScript API v3, tugas pengiriman permintaan
rute telah dipisahkan dari tugas permintaan rendering, yang
sekarang 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 akan mendeteksi perubahan pada propertinya dan
memperbarui peta saat rute 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);
}
});
}
Street View
Google Street View menyediakan 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 citra 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 container div
dengan citra Street View dan memungkinkan Anda menentukan lokasi dan POV (sudut 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
serupa untuk mengambil atau memeriksa ketersediaan data Street View, dan
memungkinkan penelusuran berdasarkan 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 mengemulasikan
perilaku v2 dengan memisahkan panorama Street View menjadi 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);
}