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

Bentuk

Anda bisa menambahkan berbagai bentuk ke peta Anda. Bentuk adalah sebuah objek pada peta, yang terikat dengan koordinat garis lintang/garis bujur. Tersedia bentuk berikut ini: garis, poligon, lingkaran dan persegi panjang. Anda juga bisa mengonfigurasi bentuk agar pengguna bisa mengedit atau menyeretnya.

Polyline

Untuk menggambar garis pada peta Anda, gunakan polyline. Kelas Polyline mendefinisikan overlay linier segmen garis yang terhubung di peta. Sebuah objek Polyline terdiri dari larik lokasi LatLng, dan membuat serangkaian segmen garis yang menghubungkan lokasi-lokasi itu secara berurutan.

Menambahkan polyline

Konstruktor Polyline mengambil satu set PolylineOptions dengan menetapkan koordinat LatLng garis dan satu set gaya untuk menyesuaikan perilaku visual polyline.

Objek Polyline digambar sebagai serangkaian segmen lurus pada peta. Anda bisa menetapkan warna khusus, bobot, dan opasitas garis luar suatu garis dalam PolylineOptions saat membuat garis, atau Anda bisa mengubah properti tersebut setelah pembuatan. Polyline mendukung gaya garis luar berikut ini:

  • strokeColor menetapkan warna HTML heksadesimal dengan format "#FFFFFF". Kelas Polyline tidak mendukung warna yang dinamai.
  • strokeOpacity menetapkan nilai numerik antara 0.0 dan 1.0 untuk menentukan opasitas warna garis. Default-nya adalah 1.0.
  • strokeWeight menetapkan lebar garis dalam piksel.

Properti editable polyline menetapkan apakah pengguna bisa mengedit bentuk atau tidak. Lihat bentuk yang bisa diedit pengguna di bawah ini. Demikian pula, Anda bisa menyetel properti draggable yang memungkinkan pengguna untuk menyeret garis.

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.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 creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Tampilkan contoh (polyline-simple.html).

Membuang polyline

Untuk membuang polyline dari peta, panggil metode setMap() dan meneruskan null sebagai argumen. Dalam contoh berikut, flightPath adalah objek polyline:

flightPath.setMap(null);

Perhatikan, metode di atas tidak menghapus polyline. Ini hanya membuang polyline dari peta. Jika ingin menghapus polyline, Anda harus membuangnya dari peta, kemudian menyetel polyline itu sendiri ke null.

Tampilkan contoh (polyline-remove.html).

Memeriksa polyline

Polyline menetapkan serangkaian koordinat sebagai larik objek LatLng. Koordinat ini menentukan jalur garis. Untuk mengambil koordinat, panggil getPath(), yang akan mengembalikan larik bertipe MVCArray. Anda bisa memanipulasi dan memeriksa larik menggunakan operasi berikut:

  • getAt() mengembalikan LatLng pada nilai indeks berbasis nol yang diberikan.
  • insertAt() memasukkan LatLng yang diteruskan pada nilai indeks berbasis nol yang diberikan. Perhatikan, setiap koordinat yang ada pada nilai indeks tersebut akan dipindah maju.
  • removeAt() membuang LatLng pada nilai indeks berbasis nol yang diberikan.
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: 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 creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

Tampilkan contoh (polyline-complex.html).

Menyesuaikan polyline

Anda bisa menambahkan gambar berbasis vektor ke polyline dalam bentuk simbol. Dengan kombinasi simbol dan kelas PolylineOptions, Anda bisa lebih mengontrol tampilan dan cara kerja polyline pada peta. Lihat Simbol untuk informasi tentang panah, garis putus-putus, simbol khusus dan simbol animasi.

Poligon

Poligon merupakan bidang yang dikurung oleh jalur tertutup (atau loop), yang didefinisikan dengan serangkaian koordinat. Objek Polygon serupa dengan objek Polyline karena keduanya terdiri dari serangkaian koordinat yang berurutan. Poligon digambar dengan garis luar dan pengisi. Anda bisa mendefinisikan warna khusus, bobot, dan opasitas untuk tepi poligon (garis luar) dan warna khusus serta opasitas untuk bidang tertutup (pengisi). Warna harus ditunjukkan dalam format HTML heksadesimal. Nama warna tidak didukung

Objek Polygon bisa menjelaskan bentuk yang rumit, termasuk:

  • Beberapa bidang tidak-bersebelahan yang didefinisikan dengan satu poligon.
  • Area dengan lubang di dalamnya.
  • Perpotongan dari satu atau beberapa bidang.

Untuk mendefinisikan bentuk rumit, Anda menggunakan poligon dengan beberapa jalur.

Catatan: Layer data menyediakan cara yang mudah untuk menggambar poligon. Itu menangani pelilitan poligon untuk Anda, sehingga lebih mudah saat menggambar poligon dengan lubang. Lihat dokumentasi untuk layer Data.

Menambahkan poligon

Karena bidang poligonal bisa mencakup beberapa jalur terpisah, properti paths objek Polygon menetapkan susunan larik, masing-masing bertipe MVCArray. Setiap larik mendefinisikan urutan terpisah koordinat LatLng.

Untuk poligon sederhana yang hanya terdiri dari satu jalur, Anda bisa membuat sebuah Polygon menggunakan satu larik koordinat LatLng. Google Maps JavaScript API akan mengonversi larik sederhana menjadi susunan larik saat pembuatan ketika menyimpannya dalam properti paths. API menyediakan metode getPath() sederhana untuk poligon yang terdiri dari satu jalur.

Properti poligon editable menetapkan apakah pengguna bisa mengedit bentuk. Lihat bentuk yang bisa diedit pengguna di bawah ini. Demikian pula, Anda bisa menyetel properti draggable yang memungkinkan pengguna menyeret bentuk.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.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 creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Tampilkan contoh (polygon-simple.html).

Penyelesaian poligon otomatis

Polygon dalam contoh di atas terdiri dari empat set koordinat LatLng, namun perhatikan bahwa set pertama dan terakhir mendefinisikan lokasi yang sama, sehingga menyempurnakan loop. Akan tetapi dalam praktiknya, karena poligon mendefinisikan bidang tertutup, Anda tidak perlu menetapkan set koordinat terakhir. Google Maps JavaScript API akan secara otomatis melengkapi setiap poligon dengan menggambar garis luar yang menghubungkan lokasi terakhir dengan lokasi pertama untuk jalur yang diberikan.

Contoh berikut identik dengan sebelumnya, hanya saja LatLng terakhir dihilangkan: Tampilkan contoh (polygon-autoclose.html).

Membuang poligon

Untuk membuang poligon dari peta, panggil metode setMap() dan meneruskan null sebagai argumen. Dalam contoh berikut, bermudaTriangle adalah objek poligon:

bermudaTriangle.setMap(null);

Perhatikan, metode di atas tidak menghapus poligon. Ini hanya membuang poligon dari peta. Jika ingin menghapus poligon, Anda harus membuangnya dari peta, kemudian menyetel poligon itu sendiri ke null.

Memeriksa poligon

Poligon menetapkan rangkaian koordinatnya sebagai susunan larik, dengan setiap larik bertipe MVCArray. Setiap larik "daun" merupakan larik koordinat LatLng yang menetapkan satu jalur. Untuk mengambil koordinat ini, panggil metode getPaths() objek Polygon. Karena larik adalah MVCArray Anda harus memanipulasi dan memeriksanya menggunakan operasi berikut:

  • getAt() mengembalikan LatLng pada nilai indeks berbasis nol yang diberikan.
  • insertAt() memasukkan LatLng yang diteruskan pada nilai indeks berbasis nol yang diberikan. Perhatikan, setiap koordinat yang ada pada nilai indeks tersebut akan dipindah maju.
  • removeAt() membuang LatLng pada nilai indeks berbasis nol yang diberikan.
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(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 creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

Tampilkan contoh (polygon-arrays.html).

Menempatkan lubang di poligon

Untuk membuat area kosong di dalam poligon, Anda harus membuat dua jalur, satu berada di dalam yang lain. Untuk membuat lubang, koordinat yang mendefinisikan jalur bagian dalam harus dalam urutan kebalikan dengan koordinat yang mendefinisikan jalur bagian luar. Misalnya jika koordinat jalur bagian luar memiliki urutan berputar ke kanan maka jalur bagian dalam harus berputar ke kiri.

Catatan: Layer Data menangani urutan jalur bagian dalam dan luar untuk Anda, sehingga lebih mudah untuk menggambar poligon berlubang. Lihat dokumentasi untuk layer Data.

Contoh berikut menggambar poligon dengan dua jalur, dengan singgungan jalur bagian dalam di arah yang berlawanan terhadap jalur bagian luar.

// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.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 creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Tampilkan contoh (polygon-hole.html).

Persegi panjang

Selain kelas Polygon generik, Google Maps JavaScript API menyertakan kelas spesifik bagi objek Rectangle, untuk menyederhanakan konstruksinya.

Menambahkan persegi panjang

Sebuah Rectangle mirip dengan Polygon karena Anda bisa mendefinisikan warna khusus, bobot, dan opasitas untuk tepi persegi panjang (garis luar) dan warna khusus serta opasitas untuk bidang dalam persegi panjang (pengisi). Warna harus ditunjukkan dalam gaya HTML numerik heksadesimal.

Tidak seperti Polygon, Anda tidak bisa mendefinisikan paths untuk Rectangle. Sebagai gantinya, persegi panjang memiliki properti bounds yang mendefinisikan bentuknya dengan menetapkan google.maps.LatLngBounds untuk persegi panjang.

Properti persegi panjang editable menetapkan apakah pengguna bisa mengedit bentuk. Lihat bentuk yang bisa diedit pengguna di bawah ini. Demikian pula, Anda bisa menyetel properti draggable yang memungkinkan pengguna menyeret persegi panjang.

// This example adds a red rectangle to a map.

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

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<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 adds a red rectangle to a map.

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

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

Tampilkan contoh (rectangle-simple.html).

Kode berikut membuat sebuah persegi panjang setiap kali pengguna mengubah zoom pada peta. Ukuran persegi panjang ditentukan oleh viewport.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<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 creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

Tampilkan contoh (rectangle-zoom.html).

Membuang persegi panjang

Untuk membuang persegi panjang dari peta, panggil metode setMap() dan meneruskan null sebagai argumen.

rectangle.setMap(null);

Perhatikan, metode di atas tidak menghapus persegi panjang. Ini hanya membuang persegi panjang dari peta. Jika ingin menghapus persegi panjang, Anda harus membuangnya dari peta, kemudian menyetel persegi panjang itu sendiri ke null.

Lingkaran

Selain kelas Polygon generik, Google Maps JavaScript API menyertakan kelas spesifik bagi objek Circle, untuk menyederhanakan konstruksinya.

Menambahkan lingkaran

Sebuah Circle mirip dengan Polygon karena Anda bisa mendefinisikan warna khusus, bobot, dan opasitas untuk tepi lingkaran (garis luar) dan warna khusus serta opasitas untuk bidang dalam lingkaran (pengisi). Warna harus ditunjukkan dalam gaya HTML numerik heksadesimal.

Tidak seperti Polygon, Anda tidak bisa mendefinisikan paths untuk Circle. Sebagai gantinya, lingkaran memiliki dua properti tambahan yang mendefinisikan bentuknya:

  • center menetapkan google.maps.LatLng dari tengah lingkaran.
  • radius menetapkan radius lingkaran, dalam meter.

Properti lingkaran editable menetapkan apakah pengguna bisa mengedit bentuk. Lihat bentuk yang bisa diedit pengguna di bawah ini. Demikian pula, Anda bisa menyetel properti draggable yang memungkinkan pengguna menyeret lingkaran.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<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 creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

Tampilkan contoh (circle-simple.html).

Membuang lingkaran

Untuk membuang lingkaran dari peta, panggil metode setMap() dan meneruskan null sebagai argumen.

circle.setMap(null);

Perhatikan, metode di atas tidak menghapus lingkaran. Ini hanya membuang lingkaran dari peta. Jika ingin menghapus lingkaran, Anda harus membuangnya dari peta, kemudian menyetel lingkaran itu sendiri ke null.

Bentuk yang bisa diedit pengguna dan bisa diseret

Membuat bentuk agar bisa diedit mengharuskan penambahan handle pada bentuk, yang bisa digunakan orang untuk memosisikan, membentuk ulang, dan mengubah ukuran bentuk secara langsung pada peta. Anda juga bisa membuat bentuk agar bisa diseret, sehingga orang bisa memindahkannya ke tempat yang berbeda pada peta.

Perubahan yang dibuat pengguna pada objek tidak bertahan antar sesi. Jika ingin menyimpan editan pengguna, Anda harus menangkap dan menyimpan sendiri informasi tersebut.

Membuat bentuk agar bisa diedit

Setiap bentuk (polyline, poligon, lingkaran, dan persegi panjang) bisa disetel sebagai bisa-diedit-pengguna, dengan menetapkan editable ke true dalam opsi bentuk.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Tampilkan contoh (user-editable-shapes.html).

Membuat bentuk agar bisa diseret

Secara default, bentuk yang digambar di peta akan berada pada posisi tetap. Untuk memungkinkan pengguna menyeret bentuk ke lokasi yang berbeda di peta, setel draggable ke true dalam opsi bentuk.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Saat mengaktifkan penyeretan pada poligon atau polyline, Anda juga harus mempertimbangkan untuk membuat poligon atau polyline sebagai geodesi, dengan menyetel properti geodesic ke true.

Sebuah poligon geodesi akan mempertahankan bentuk geografisnya sesungguhnya saat dipindah, sehingga menyebabkan poligon tampak terdistorsi saat dipindah ke utara atau selatan dalam proyeksi Mercator. Poligon non-geodesi akan selalu mempertahankan penampilan awalnya di layar.

Dalam polyline geodesi, segmen polyline digambar sebagai jalur terpendek antara dua titik pada permukaan bumi, dengan anggapan Bumi adalah sebuah bola, yang berlawanan dengan konsep garis lurus pada proyeksi Mercator.

Untuk informasi selengkapnya tentang sistem koordinat, lihat dokumentasi MapTypes.

Peta berikut ini menampilkan dua segi tiga dengan ukuran dan dimensi yang kurang-lebih sama. Segi tiga merah memiliki properti geodesic yang disetel ke true. Perhatikan perubahan bentuknya saat bergerak ke utara.

Tampilkan contoh (polygon-draggable.html).

Memantau kejadian pengeditan

Bila sebuah bentuk diedit, sebuah kejadian akan dipicu setelah proses edit selesai. Kejadian tersebut tercantum di bawah ini:

Bentuk Kejadian
Lingkaran radius_changed
center_changed
Poligon insert_at
remove_at
set_at

Listener harus disetel pada jalur poligon. Jika poligon memiliki beberapa jalur, maka listener harus disetel pada setiap jalur.

Polyline insert_at
remove_at
set_at

Listener harus disetel pada jalur polyline.

Persegi panjang bounds_changed

Beberapa cuplikan kode yang berguna:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Lihat contoh penanganan kejadian pengeditan pada persegi panjang: Tampilkan contoh (rectangle-event.html).

Memantau kejadian penyeretan

Bila sebuah bentuk diseret, kejadian akan dipicu di awal dan di akhir tindakan penyeretan serta selama menyeret. Kejadian berikut akan dipicu untuk polyline, poligon, lingkaran dan persegi panjang.

Kejadian Keterangan
dragstart Dipicu bila pengguna mulai menyeret bentuk.
drag Dipicu berulang kali bila pengguna menyeret bentuk.
dragend Dipicu bila pengguna berhenti menyeret bentuk.

Untuk informasi selengkapnya tentang menangani kejadian, lihat dokumentasi mengenai kejadian.

Kirim masukan tentang...

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