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

Overlay Khusus

  1. Pengantar
  2. Menambahkan overlay khusus
    1. Subkelas overlay
    2. Melakukan inisialisasi overlay
    3. Menggambar overlay
  3. Membuang overlay khusus
  4. Menyembunyikan dan menampilkan overlay khusus

Pengantar

Overlay adalah objek di peta yang terikat dengan koordinat garis lintang/garis bujur, sehingga ikut bergerak bila Anda menyeret atau memperbesar/memperkecil tampilan peta. Untuk informasi tentang tipe overlay yang telah didefinisikan, lihat Menggambar pada peta

Google Maps JavaScript API menyediakan kelas OverlayView untuk membuat overlay khusus Anda sendiri. OverlayView adalah kelas dasar yang menyediakan beberapa metode yang harus Anda implementasikan saat membuat overlay sendiri. Kelas ini juga menyediakan beberapa metode yang memungkinkannya menerjemahkan koordinat layar dan lokasi pada peta.

Menambahkan overlay khusus

Inilah rangkuman langkah yang diperlukan untuk membuat overlay khusus:

  • Atur prototype objek overlay khusus Anda ke instance baru google.maps.OverlayView(). Akibatnya, ini akan menjadi subkelas dari kelas overlay.
  • Buat konstruktor untuk overlay khusus Anda, dan atur parameter inisialisasi.
  • Implementasikan metode onAdd() dalam prototipe Anda, dan lekatkan overlay ke peta. OverlayView.onAdd() akan dipanggil bila peta siap untuk overlay yang akan dilekatkan.
  • Implementasikan metode draw() dalam prototipe Anda, dan tangani tampilan visual objek Anda. OverlayView.draw() akan dipanggil bila objek pertama kali ditampilkan.
  • Anda juga harus mengimplementasikan metode onRemove() untuk membersihkan setiap elemen yang Anda tambahkan dalam overlay.

Di bawah ini adalah detail selengkapnya tentang setiap langkah. Anda juga bisa melihat contoh lengkap yang sudah berjalan: Lihat contoh (overlay-simple.html)

Subkelas overlay

Contoh di bawah ini menggunakan OverlayView untuk membuat overlay gambar sederhana.

// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 62.323907, lng: -150.109291},
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(62.281819, -150.287132),
      new google.maps.LatLng(62.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/' +
      'javascript/examples/full/images/talkeetna.png';

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);
}

Sekarang kita buat konstruktor untuk kelas USGSOverlay, dan lakukan inisialiasi parameter yang diteruskan sebagai properti objek baru.

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

Kita belum bisa melekatkan overlay ini ke peta dalam konstruktor overlay tersebut. Pertama-tama, kita perlu memastikan bahwa semua panel peta tersedia, karena itu menetapkan urutan objek yang akan ditampilkan pada peta. API menyediakan metode helper yang menunjukkan hal ini telah terjadi. Kita akan menangani metode itu di bagian berikutnya.

Melakukan inisialisasi overlay

Bila overlay telah dibuat untuk pertama kali dan siap ditampilkan, kita perlu melekatkannya ke peta melalui DOM browser. API menunjukkan bahwa overlay telah ditambahkan ke peta dengan memanggil metode onAdd() overlay. Untuk menangani metode ini, kita buat <div> untuk menyimpan gambar, tambahkan sebuah elemen <img>, lekatkan ke <div>, kemudian lekatkan overlay ke salah satu panel peta. Panel adalah simpul dalam struktur hierarki DOM.

Panel, tipe MapPanes, menetapkan urutan tumpukan untuk layer berbeda pada peta. Panel berikut tersedia, dan disebutkan sesuai urutan tumpukannya dari bawah ke atas:

  • mapPane adalah panel terendah dan berada di atas petak. Ini mungkin tidak menerima kejadian DOM. (Panel 0).
  • overlayLayer berisi polyline, poligon, overlay bumi dan overlay layer petak. Ini mungkin tidak menerima kejadian DOM. (Panel 1).
  • overlayShadow berisi bayangan marker. Ini mungkin tidak menerima kejadian DOM. (Panel 2).
  • overlayImage berisi gambar latar depan marker. (Panel 3).
  • floatShadow berisi bayangan jendela informasi. Panel ini berada di atas overlayImage, sehingga marker bisa berada dalam bayangan jendela informasi. (Panel 4).
  • overlayMouseTarget berisi elemen yang menerima kejadian mouse DOM, seperti target transparan untuk marker. Panel ini berada di atas floatShadow, sehingga marker yang berada dalam bayangan jendela informasi bisa diklik. (Panel 5).
  • floatPane berisi jendela informasi. Panel ini berada di atas semua overlay peta. (Panel 6).

Karena gambar kita adalah "overlay bumi", maka kita akan menggunakan panel overlayLayer . Bila memiliki panel tersebut, kita akan melekatkan objek kita ke panel itu sebagai anak.

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

Menggambar overlay

Perhatikan, kita tidak memanggil tampilan visual khusus dalam kode di atas. API memanggil metode draw() yang terpisah pada overlay kapan saja dibutuhkan untuk menggambar overlay pada peta, termasuk saat pertama kali ditambahkan.

Karena itu kita akan mengimplementasikan metode draw() ini, mengambil overlay MapCanvasProjection menggunakan getProjection() dan menghitung koordinat yang tepat untuk mengaitkan titik kanan atas dan titik kiri bawah objek. Kemudian kita bisa mengubah ukuran <div>. Pada gilirannya ini akan mengubah ukuran gambar agar sesuai dengan batas-batas yang kita tetapkan dalam konstruktor overlay tersebut.

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

Membuang overlay khusus

Kita juga menambahkan metode onRemove() untuk membuang overlay dari peta sampai bersih.

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

Menyembunyikan dan menampilkan overlay khusus

Jika Anda ingin menyembunyikan atau menampilkan overlay, daripada cuma membuat atau membuangnya, Anda bisa mengimplementasikan metode hide() dan show() untuk mengatur visibilitas overlay tersebut. Atau, Anda bisa melepaskan overlay dari DOM peta, meskipun operasi sedikit lebih mahal. Perhatikan, jika nanti Anda memasang kembali overlay ke DOM peta, hal itu akan memanggil ulang metode onAdd() overlay.

Contoh berikut menambahkan metode hide() dan show() ke prototipe overlay yang beralih visibilitas kontainer <div>. Selain itu, kita menambahkan metode toggleDOM(), untuk melekatkan atau melepaskan overlay ke/dari peta.

// Set the visibility to 'hidden' or 'visible'.
USGSOverlay.prototype.hide = function() {
  if (this.div_) {
    // The visibility property must be a string enclosed in quotes.
    this.div_.style.visibility = 'hidden';
  }
};

USGSOverlay.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = 'visible';
  }
};

USGSOverlay.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility === 'hidden') {
      this.show();
    } else {
      this.hide();
    }
  }
};

// Detach the map from the DOM via toggleDOM().
// Note that if we later reattach the map, it will be visible again,
// because the containing <div> is recreated in the overlay's onAdd() method.
USGSOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
    // Note: setMap(null) calls OverlayView.onRemove()
    this.setMap(null);
  } else {
    this.setMap(this.map_);
  }
};

Perhatikan antarmuka pengguna:

<!-- Add an input button to initiate the toggle method on the overlay. -->
    <div id="floating-panel">
      <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
      <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
    </div>

Lihat contoh (overlay-hideshow.html)

Kirim masukan tentang...

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