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

Simbol

  1. Pengantar
  2. Properti simbol
  3. Simbol yang sudah ditentukan
  4. Menambahkan simbol ke marker
  5. Menambahkan simbol ke polyline
  6. Menganimasikan simbol

Pengantar

Simbol berguna bila Anda ingin menggunakan ikon berbasis vektor pada marker, atau menambahkan gambar ke polyline.

Symbol adalah gambar berbasis vektor yang bisa ditampilkan pada Marker atau objek Polyline. Bentuk simbol didefinisikan oleh jalur dengan menggunakan notasi jalur SVG. Walaupun path adalah satu-satunya properti yang diperlukan, objek Symbol mendukung berbagai properti yang memungkinkan Anda menyesuaikan aspek visual, seperti warna dan bobot garis luar serta isian. Lihat daftar properti di bawah ini.

Beberapa simbol yang sudah ditentukan tersedia melalui kelas SymbolPath. Lihat daftar di bawah ini.

Properti simbol

Perhatikan, perilaku default Symbol sedikit bervariasi, bergantung apakah simbol muncul di marker atau polyline. Varian-varian ini dijelaskan dalam daftar properti di bawah ini.

Symbol mendukung properti berikut:

  • path (diperlukan) adalah jalur yang mendefinisikan bentuk simbol. Anda bisa menggunakan salah satu jalur yang telah didefinisikan di google.maps.SymbolPath atau mendefinisikan jalur khusus menggunakan notasi jalur SVG. Catatan: Jalur vektor pada polyline harus muat dalam 22x22 px persegi. Jika jalur Anda menyertakan titik di luar kotak ini, maka Anda harus menyesuaikan properti scale simbol ke nilai pecahan, seperti 0,2, sehingga poin berskala yang dihasilkan bisa muat dalam kotak.
  • anchor menyetel posisi simbol sesuai dengan marker atau polyline. Koordinat jalur simbol masing-masing diterjemahkan ke kiri dan ke atas oleh koordinat x dan y jangkar. Secara default, simbol dijangkarkan di (0, 0). Posisi dinyatakan dalam sistem koordinat yang sama seperti jalur simbol tersebut.
  • fillColor adalah warna isian simbol (yaitu, region yang dibatasi dengan garis luar). Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai. Untuk simbol pada marker, default-nya adalah 'hitam'. Untuk simbol pada polyline, default-nya adalah warna garis luar polyline yang bersangkutan.
  • fillOpacity mendefinisikan opasitas relatif (yaitu, kurangnya transparansi) dari isian simbol. Nilainya berkisar dari 0,0 (sepenuhnya transparan) hingga 1,0 (sepenuhnya tidak tembus pandang). Default-nya adalah 0.0.
  • rotation adalah sudut yang digunakan untuk memutar simbol, dinyatakan searah jarum jam dalam derajat. Secara default, marker simbol memiliki rotasi 0, dan simbol pada polyline diputar oleh sudut dari tepi letaknya. Setelan rotasi simbol pada polyline akan menetapkan rotasi simbol sedemikian rupa sehingga tidak lagi mengikuti lekuk garis.
  • scale menyetel besarnya menskalakan ukuran simbol. Untuk marker simbol, skala default-nya adalah 1. Setelah diskalakan, ukuran simbol bisa berapa saja. Untuk simbol pada polyline, skala default-nya adalah bobot garis luar polyline. Setelah diskalakan, simbol harus diletakkan dalam segi empat 22x22px, yang berpusat di jangkar simbol tersebut.
  • strokeColor adalah warna garis luar simbol. Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai. Untuk simbol pada marker, default-nya adalah 'hitam'. Untuk simbol pada polyline, warna default-nya adalah warna garis luar polyline.
  • strokeOpacity menentukan opasitas relatif (yaitu, kurangnya transparansi) garis luar simbol. Nilainya berkisar dari 0,0 (sepenuhnya transparan) hingga 1,0 (sepenuhnya tidak tembus pandang). Untuk marker simbol, default-nya adalah 1.0. Untuk simbol pada polyline, default-nya adalah opasitas garis luar polyline.
  • strokeWeight mendefinisikan bobot garis luar simbol. Default-nya adalah scale simbol.

Simbol yang sudah ditentukan

Google Maps JavaScript API menyediakan beberapa simbol bawaan yang bisa Anda tambahkan ke marker atau polyline melalui kelas SymbolPath.

Simbol default berisi sebuah lingkaran dan dua tipe panah. Tersedia panah yang menghadap ke depan dan ke belakang. Hal ini khususnya berguna untuk polyline, karena orientasi simbol pada polyline adalah tetap. Panah menghadap ke depan dianggap arah ujung polyline.

Anda bisa memodifikasi garis luar atau isian simbol yang sudah ditentukan dengan salah satu opsi simbol default.

Simbol yang sudah ditentukan berikut ini telah disertakan:

Nama Keterangan Contoh
google.maps.SymbolPath.CIRCLE Lingkaran.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Panah menunjuk ke belakang yang tertutup pada semua sisinya.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Panah menunjuk ke depan yang tertutup pada semua sisinya.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Panah menunjuk ke belakang yang terbuka pada satu sisi.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Panah menunjuk ke depan yang terbuka pada satu sisi.

Menambahkan simbol ke marker

Untuk menampilkan ikon berbasis vektor pada marker, teruskan sebuah literal objek Symbol bersama jalur yang diinginkan ke properti icon marker.

Contoh di bawah ini membuat ikon menggunakan salah satu jalur vektor yang sudah ditentukan.

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    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 uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

Tampilkan contoh (marker-symbol-predefined).

Contoh berikut menggunakan notasi jalur SVG untuk membuat ikon khusus bagi marker.

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    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 uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

Tampilkan contoh (marker-symbol-custom).

Menambahkan simbol ke polyline

Untuk menampilkan simbol pada polyline, setel properti icons[] objek PolylineOptions. Larik icons[] mengambil satu atau beberapa literal objek IconSequence, dengan properti berikut:

  • icon (diperlukan) adalah simbol yang akan dirender pada garis.
  • offset menentukan jarak dari awal garis tempat merender ikon. Jarak ini mungkin dinyatakan berupa persentase panjang garis (misalnya, '50%') atau dalam piksel (misalnya, '50px'). Default-nya adalah '100%'.
  • repeat menentukan jarak antara ikon berurutan pada garis. Jarak ini mungkin dinyatakan berupa persentase panjang garis (misalnya, '50%') atau dalam piksel (misalnya, '50px'). Untuk menonaktifkan pengulangan ikon, tetapkan '0'. Default-nya adalah '0'.

Dengan kombinasi simbol dan kelas PolylineOptions, Anda bisa lebih mengontrol tampilan dan cara kerja polyline pada peta. Di bawah ini adalah beberapa contoh penyesuaian yang bisa Anda terapkan.

Panah

Gunakan properti IconSequence.offset untuk menambahkan panah ke awal atau akhir polyline Anda.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Tampilkan contoh (overlay-symbol-arrow).

Garis putus-putus

Anda bisa mendapatkan efek garis putus-putus dengan menetapkan opasitas polyline Anda ke 0, dan melapiskan simbol opaque ke atas garis dengan interval teratur.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Tampilkan contoh (overlay-symbol-dashed).

Jalur khusus

Simbol khusus memungkinkan Anda menambahkan banyak bentuk berbeda ke polyline.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Tampilkan contoh (overlay-symbol-custom).

Menganimasikan simbol

Anda bisa menganimasikan simbol sepanjang jalur dengan fungsi window.setInterval() DOM untuk mengubah offset simbol dalam interval tetap.

// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<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 an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

Tampilkan contoh (overlay-symbol-animate).

Kirim masukan tentang...

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