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 Bumi

  1. Pengantar
  2. Menambahkan overlay bumi
  3. Membuang overlay bumi

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. Jika ingin menempatkan gambar pada peta, Anda bisa menggunakan objek GroundOverlay.

Untuk informasi tentang tipe overlay lainnya, lihat Menggambar pada peta.

Menambahkan overlay bumi

Konstruktor untuk GroundOverlay menetapkan URL gambar dan LatLngBounds gambar sebagai parameter. Gambar akan dirender pada peta, dengan batas yang diberikan, dan disesuaikan dengan proyeksi peta.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

Lihat contoh (groundoverlay-simple.html).

Membuang overlay bumi

Untuk membuang overlay dari peta, panggil metode setMap() overlay, dengan meneruskan null. Perhatikan, memanggil metode ini tidak menghapus overlay. Ini hanya membuang overlay dari peta. Jika ingin menghapus overlay, Anda harus menghapusnya dari peta, kemudian mengatur overlay itu sendiri ke null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Lihat contoh (overlay-remove.html).

Kirim masukan tentang...

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