Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Meningkatkan Versi Aplikasi Google Maps JavaScript API Anda dari v2 ke v3

Versi 2 dari Google Maps JavaScript API tidak lagi tersedia. Panduan ini ditujukan untuk membantu developer yang sudah menggunakan Google Maps JavaScript API v2 melakukan migrasi kode mereka ke versi 3.

Cukup banyak yang telah berubah antara Google Maps JavaScript API v2 dan v3. Ketika mulai bekerja dengan API baru, Anda akan segera mengetahui bahwa ini bukan cuma upgrade bertahap. Kabar baiknya adalah bahwa kami telah menambahkan banyak fitur baru yang hebat dan meningkatkan kegunaan API secara keseluruhan dari sudut pandang developer. Jika Anda berencana meningkatkan versi dari Google Maps JavaScript API v2 ke Google Maps JavaScript API v3, panduan ini akan membantu Anda melalui proses tersebut, dan memanggil beberapa perubahan paling umum untuk pengguna API v2.

Ringkasan

Setiap aplikasi memiliki proses migrasi yang sedikit berbeda; Namun, ada beberapa langkah yang umum untuk semua proyek:

  1. Mendapatkan kunci baru. Google Maps JavaScript API Sekarang menggunakan Google API Console untuk mengelola kunci. Sebelum Anda memulai migrasi, pastikan untuk mendapatkan kunci API baru.
  2. Memperbarui Bootstrap API Anda. Sebagian besar aplikasi akan memuat Google Maps JavaScript API v3 dengan kode berikut:
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true_OR_false"></script>
    
  3. Memperbarui kode Anda. Jumlah perubahan yang diperlukan akan tergantung banyak pada aplikasi Anda. Perubahan umum meliputi:
    • Selalu mereferensikan namespace google.maps. Di v3, semua kode Google Maps JavaScript API disimpan dalam namespace google.maps.* bukan namespace global. Kebanyakan objek juga telah berganti nama sebagai bagian dari proses ini. Misalnya, bukannya GMap2, Anda sekarang memuat google.maps.Map.
    • Membuang semua referensi mengenai metode yang tidak terpakai. Sejumlah metode utilitas serba guna telah dihapus, seperti GDownloadURL dan GLog. Ganti fungsionalitas ini dengan pustaka utilitas pihak ketiga, atau buang referensi ini dari kode Anda.
    • (Opsional) Menambahkan pustaka ke kode Anda. Banyak fitur yang telah dieksternalisasikan ke dalam pustaka utilitas sehingga setiap aplikasi cukup memuat bagian-bagian API yang akan digunakan.
    • (Opsional) Mengonfigurasi proyek Anda menggunakan externs v3. Externs v3 bisa digunakan untuk membantu memvalidasi kode Anda dengan Closure Compiler, atau untuk memicu pelengkapan otomatis di IDE. Ketahui selengkapnya tentang Kompilasi Lanjutan dan Externs.
  4. Pengujian dan iterasi. Pada titik ini Anda masih memiliki beberapa pekerjaan yang harus dilakukan, namun kabar baiknya adalah, Anda sudah berada di jalan yang tepat menuju aplikasi maps v3 yang baru!

Perubahan dalam Google Maps JavaScript API Versi 3

Sebelum merencanakan migrasi, Anda harus meluangkan waktu untuk memahami perbedaan antara Google Maps JavaScript API v2 dan Google Maps JavaScript API v3. Versi terbaru Google Maps JavaScript API ditulis mulai dari dasar, dengan fokus pada teknik pemrograman JavaScript modern, peningkatan penggunaan pustaka, dan penyederhanaan API. Banyak fitur baru telah ditambahkan ke API, dan beberapa fitur familier telah berubah atau bahkan dibuang. Bagian ini menyoroti beberapa perbedaan utama di antara dua rilis.

Beberapa perubahan dalam API v3 meliputi:

  • Pustaka inti yang efisien. Banyak fungsi tambahan telah dipindahkan ke dalam pustaka, membantu mengurangi waktu pemuatan dan parsing untuk Core API yang memungkinkan pemuatan peta dengan cepat pada perangkat apa pun.
  • Peningkatan kinerja beberapa fitur, seperti rendering poligon dan penempatan marker.
  • Sebuah pendekatan baru pada batas penggunaan sisi-klien agar lebih mengakomodasi alamat bersama yang digunakan oleh proxy seluler dan firewall perusahaan.
  • Penambahan dukungan untuk beberapa browser modern dan browser seluler. Dukungan untuk Internet Explorer 6 telah dibuang.
  • Membuang banyak kelas helper serba guna ( GLog atau GDownloadUrl). Hari ini, ada banyak pustaka JavaScript yang menyediakan fungsionalitas yang sama, seperti Closure atau jQuery.
  • Implementasi HTML5 Street View yang akan dimuat pada semua perangkat seluler.
  • Panorama Street View Khusus dengan foto Anda sendiri, memungkinkan Anda untuk berbagi panorama lereng ski, rumah dijual atau tempat-tempat menarik lainnya.
  • Penyesuaian Styled Maps yang memungkinkan Anda mengubah tampilan elemen pada peta dasar agar cocok dengan gaya visual Anda yang unik.
  • Dukungan untuk beberapa layanan baru, seperti ElevationService dan Distance Matrix.
  • Peningkatan layanan directions dengan memberikan rute alternatif, optimalisasi rute (perkiraan solusi untuk masalah salesman yang sedang bepergian), petunjuk arah bersepeda (dengan layer bersepeda), petunjuk arah angkutan umum, dan petunjuk arah yang bisa diseret.
  • Format Geocoding yang diperbarui menyediakan informasi tipe yang lebih akurat daripada nilai accuracy dari Google Maps Geocoding API v2.
  • Dukungan untuk beberapa jendela info pada sebuah Peta

Meningkatkan Versi Aplikasi Anda

Kunci Baru Anda

Google Maps JavaScript API v3 menggunakan sistem kunci baru. Ini berarti bahwa kunci v2 Anda tidak akan berfungsi dengan aplikasi v3 Anda. Menambahkan kunci v3 sebelum meluncurkan aplikasi Anda ke produksi akan:

Kuncinya akan diteruskan ketika memuat Google Maps JavaScript API v3. Untuk menghasilkan kunci:

  1. Kunjungi Google API Console dan masuk dengan Akun Google Anda.
  2. Klik tautan Services dari menu sebelah kiri, dan aktifkan layanan Google Maps JavaScript API v3.
  3. Setelah layanan diaktifkan, kunci API Anda tersedia dari laman API Access, di bagian Simple API Access. Aplikasi Maps API menggunakan Key for browser apps.

ID Klien untuk lisensi Maps APIs for Work

Jika Anda memiliki lisensi Google Maps APIs for Work, Anda harus menggunakan ID Klien sebagai pengganti Kunci. Perhatikan bahwa keduanya tidak bisa digunakan bersamaan. ID klien mirip dengan kunci, namun dengan beberapa perbedaan berikut:

  • Aplikasi Google Maps APIs yang menggunakan ID Klien mungkin memiliki akses ke fitur atau batas tambahan, seperti Maps Analytics.
  • ID klien dibuat oleh Google Cloud Support dan diberikan kepada Anda dalam surat selamat datang Maps APIs for Work Anda. Anda tidak menggunakan Google API Console untuk membuat atau menemukan ID klien Anda.
  • Ketika memuat Google Maps JavaScript API, Anda akan menggunakan parameter client bukan parameter key. Misalnya:
    <script src="//maps.googleapis.com/maps/api/js?v=3&client=gme-yourclientid&sensor=true_or_false" type="text/javascript"></script>
  • ID klien selalu diawali dengan gme-.

Memuat API

Modifikasi pertama yang harus Anda lakukan terhadap kode adalah bagaimana Anda memuat API. Pada v2, Anda memuat Google Maps JavaScript API melalui permintaan ke http://maps.google.com/maps. Jika Anda memuat Google Maps JavaScript API v3, Anda harus melakukan perubahan berikut:

  1. Muat API dari //maps.googleapis.com/maps/api/js
  2. Buang parameter file.
  3. Pastikan untuk menyertakan parameter sensor yang diperlukan.
  4. Perbarui parameter key dengan kunci v3 Anda yang baru. Pelanggan Google Maps APIs for Work harus menggunakan parameter client.
  5. (Google Maps APIs Premium Plan saja) Pastikan bahwa parameter client disediakan seperti yang dijelaskan dalam Panduan Developer Google Maps APIs Premium Plan.
  6. Buang parameter v untuk meminta versi rilis terbaru atau ubah nilainya sesuai dengan skema penetapan versi v3.
  7. (Opsional) Ganti parameter hl dengan language dan pertahankan nilainya.
  8. (Opsional) Tambahkan parameter libraries untuk memuat pustaka opsional.

Dalam kasus yang paling sederhana, bootstrap v3 hanya akan menetapkan kunci API dan parameter sensor Anda:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>

Contoh di bawah ini meminta versi (eksperimental) terbaru dari Maps JavaScript API v2 dalam bahasa Jerman:

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

Contoh di bawah adalah permintaan ekuivalen untuk v3.

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY&language=de"></script>

Penetapan Versi

Tidak perlu memuat versi khusus dalam v3. Jika Anda menghilangkan parameter versi, Anda akan mendapatkan versi eksperimental terbaru dari API. Jika suka, Anda bisa menetapkan nomor versi khusus, versi (eksperimental) terbaru, atau yang paling stabil, versi beku.

Tabel di bawah memetakan skema versi v2 ke v3.

v2 v3 Kasus penggunaan
2.s 3.0 Versi Dibekukan. Versi terlama yang tersedia.
2 3 Versi Rilis. Versi stabil terbaru.
2.x 3.exp Versi Eksperimental.

Penting: Google Maps APIs Premium Plan SLA tidak berlaku untuk versi Eksperimental. Aplikasi Google Maps APIs Premium Plan harus menggunakan versi Rilis atau Beku agar bisa tercakup oleh SLA.

Memperkenalkan namespace google.maps

Mungkin perubahan yang paling terlihat dalam Google Maps JavaScript API v3 adalah diperkenalkannya namespace google.maps. API v2 menempatkan semua objek di namespace global secara default, yang bisa mengakibatkan bentrokan penamaan. Dalam v3, semua objek yang berada dalam namespace google.maps.

Saat melakukan migrasi aplikasi ke v3, Anda harus mengubah kode untuk menggunakan namespace yang baru. Sayangnya, hanya menelusuri "G" dan menggantinya dengan "google.maps." tidak akan benar-benar bekerja; tapi, ini adalah kebiasaan baik yang bisa diterapkan ketika meninjau kode Anda. Berikut adalah beberapa contoh kelas ekuivalen 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

Google Maps JavaScript API v3 memiliki kesamaan dengan kebanyakan fungsionalitas dalam v2; Namun, ada beberapa kelas yang tidak lagi didukung. Sebagai bagian dari migrasi, Anda harus mengganti kelas-kelas ini dengan pustaka utilitas pihak ketiga, atau membuang referensi ini dari kode Anda. Banyak pustaka JavaScript yang menyediakan fungsionalitas yang sama, seperti Closure atau jQuery.

Kelas berikut tidak memiliki kesamaan dalam Google 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 agak sederhana yang ditulis dengan API v2 dan v3.

<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY&sensor=false"
        type="text/javascript"></script>
    <style type="text/css">
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script type="text/javascript">
    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?sensor=false"
        type="text/javascript"></script>
    <style type="text/css">
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script type="text/javascript">
    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 dua aplikasi tersebut. Perubahan penting meliputi:

  • Alamat dari mana API dimuat telah berubah.
  • Metode GBrowserIsCompatible() dan GUnload() tidak lagi diperlukan di v3, dan telah dibuang dari API.
  • Objek GMap2 digantikan oleh google.maps.Map sebagai objek pusat dalam 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 inline.
  • UI default aktif secara default dalam v3. Anda bisa menonaktifkan ini dengan menyetel properti disableDefaultUI ke true dalam objek MapOptions.

Rangkuman

Pada titik ini Anda akan merasakan beberapa poin kunci yang terlibat dalam migrasi dari Google Maps JavaScript API v2 ke Google Maps JavaScript API v3. Ada lebih banyak informasi yang mungkin perlu Anda ketahui, namun semuanya tergantung pada aplikasi Anda. Pada bagian berikut, kami telah menyertakan petunjuk migrasi untuk kasus-kasus tertentu yang mungkin Anda hadapi. Selain itu, ada beberapa sumber daya yang mungkin bisa membantu Anda selama proses peningkatan versi.

Jika Anda memiliki masalah atau pertanyaan tentang artikel ini, silakan gunakan tautan Send Feedback on this Document di bagian atas laman ini.

Referensi Terperinci

Bagian ini memberikan perbandingan terperinci tentang fitur yang paling populer dari Google Maps JavaScript API versi 2 dan versi 3. Setiap bagian dari referensi ini dirancang agar bisa dibaca secara tersendiri. Kami menyarankan agar Anda tidak membaca referensi ini secara keseluruhan; melainkan, gunakan materi ini untuk membantu migrasi dalam basis kasus-per-kasus.

  • Kejadian - mendaftar dan menangani kejadian.
  • Kontrol - memanipulasi kontrol navigasi yang muncul pada peta.
  • Overlay - menambahkan dan mengedit objek pada peta.
  • Tipe Peta - petak yang membentuk peta dasar.
  • Layer - menambahkan dan mengedit materi sebagai grup, seperti layer KML atau Lalu Lintas.
  • Layanan - bekerja dengan layanan geocoding, directions atau Street View Google.

Kejadian

Model kejadian untuk Google Maps JavaScript API v3 mirip dengan yang digunakan dalam v2, meskipun banyak yang berubah pada kode dasarnya.

Kontrol

Google Maps JavaScript API menampilkan kontrol UI yang memungkinkan pengguna untuk berinteraksi dengan peta Anda. Anda bisa menggunakan API untuk menyesuaikan bagaimana kontrol ini akan terlihat.

Overlay

Overlay mewakili objek yang Anda "tambahkan" ke peta untuk menunjuk titik, garis, bidang, atau kumpulan objek.

Tipe Peta

Tipe peta yang tersedia di v2 dan v3 sedikit berbeda, namun semua tipe peta dasar tersedia di kedua versi API. Secara default, v2 menggunakan petak peta jalan "diwarnai" standar. Namun, v3 membutuhkan peta tipe tertentu untuk diberikan saat membuat objek google.maps.Map.

Layer

Layer adalah objek di peta yang terdiri dari satu atau beberapa overlay. Mereka bisa dimanipulasi sebagai satu kesatuan dan biasanya menggambarkan kumpulan objek.

Layanan

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.