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

Marker

Pengantar

Marker mengidentifikasi lokasi pada peta. Secara default, marker menggunakan gambar standar. Marker bisa menampilkan gambar khusus, dalam hal ini maka biasanya disebut "ikon". Marker dan ikon adalah objek bertipe Marker. Anda bisa menyetel ikon khusus dalam konstruktor marker, atau dengan memanggil setIcon() pada marker. Lihat selengkapnya tentang menyesuaikan gambar marker di bawah ini.

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

Marker didesain agar interaktif. Misalnya, secara default marker menerima kejadian 'click', sehingga Anda bisa menambahkan event listener untuk memunculkan jendela info yang menampilkan informasi khusus. Anda bisa diperbolehkan pengguna memindah marker pada peta dengan menyetel properti draggable marker ke true. Untuk informasi selengkapnya tentang marker yang bisa diseret, lihat di bawah ini.

Menambahkan marker

Konstruktor google.maps.Marker mengambil literal objek Marker options tunggal, yang menetapkan properti awal marker.

Bidang-bidang berikut sangat penting dan biasanya disetel saat membuat marker:

  • position (diperlukan) menetapkan LatLng yang mengidentifikasi lokasi awal marker. Salah satu cara untuk mengambil LatLng adalah dengan menggunakan layanan Geocoding.
  • map (opsional) menetapkan Map untuk menempatkan marker. Jika Anda tidak menetapkan peta saat pembuatan marker, marker akan dibuat namun tidak dilekatkan pada (atau ditampilkan pada) peta. Anda bisa menambahkan marker belakangan dengan memanggil metode setMap().

Contoh berikut menambahkan marker sederhana ke peta di Uluru, di tengah-tengah Australia:

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<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>
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

Dalam contoh di atas, marker ditempatkan pada peta saat pembuatan marker dengan menggunakan properti map dalam opsi marker. Atau, Anda bisa menambahkan marker ke peta secara langsung dengan menggunakan metode setMap() marker, seperti yang ditampilkan dalam contoh di bawah ini:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Marker title akan muncul sebagai tooltip.

Jika Anda tidak ingin meneruskan Marker options di konstruktor marker, sebagai gantinya teruskan objek kosong {} dalam argumen terakhir konstruktor.

Tampilkan contoh (marker-simple.html).

Membuang marker

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

marker.setMap(null);

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

Jika ingin mengelola satu set marker, Anda harus membuat larik untuk menyimpan marker tersebut. Dengan menggunakan larik ini, Anda nanti bisa memanggil setMap() pada setiap marker dalam larik satu per satu bila Anda perlu membuang marker. Anda bisa menghapus marker dengan membuangnya dari peta kemudian menetapkan larik length ke 0, yang akan membuang semua referensi ke marker.

Tampilkan contoh (marker-remove.html).

Menganimasikan marker

Anda bisa menganimasikan marker agar menampilkan gerakan dinamis dalam berbagai macam situasi. Untuk menetapkan cara menganimasikan marker, gunakan properti animation marker, bertipe google.maps.Animation. Nilai-nilai Animation berikut ini telah didukung:

  • DROP menunjukkan bahwa marker harus turun dari puncak peta ke lokasi akhirnya saat pertama kali ditempatkan pada peta. Animasi akan berhenti begitu marker diam tidak bergerak dan animation akan kembali ke null. Tipe animasi ini biasanya ditetapkan selama pembuatan Marker.
  • BOUNCE menunjukkan marker akan memantul-mantul di tempat. Marker memantul terus menerus hingga properti animation-nya secara eksplisit disetel ke null.

Anda bisa memulai animasi pada marker yang ada dengan memanggil setAnimation() pada objek Marker.

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

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

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
<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>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

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

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Tampilkan contoh (marker-animations.html).

Jika memiliki banyak marker, Anda mungkin tidak ingin menempatkan semuanya di peta sekaligus. Anda bisa menggunakan setTimeout() untuk memberikan ruang bagi animasi marker dengan menggunakan pola yang ditampilkan di bawah ini:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Tampilkan contoh (marker-animations-iteration.html).

Menyesuaikan gambar marker

Jika ingin menampilkan satu huruf atau angka pada marker, Anda bisa menggunakan label marker. Jika memerlukan penyesuaian lebih besar, Anda bisa mendefinisikan ikon yang akan ditampilkan sebagai ganti gambar marker default. Mendefinisikan sebuah ikon melibatkan setelan sejumlah properti yang menentukan perilaku visual marker.

Bagian di bawah ini menjelaskan label marker, ikon sederhana, ikon rumit, dan simbol (ikon vektor).

Label marker

Label marker adalah huruf atau angka yang muncul di dalam marker. Gambar marker di bagian ini menampilkan label marker dengan huruf 'B' di atasnya. Anda bisa menetapkan label marker baik sebagai string atau objek MarkerLabel yang menyertakan string dan properti label lainnya.

Saat membuat marker, Anda bisa menetapkan properti label dalam objek MarkerOptions. Atau, Anda bisa memanggil setLabel() pada objek Marker untuk menyetel label pada marker yang ada.

Contoh berikut menampilkan marker berlabel saat pengguna mengeklik pada peta:

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
<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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Tampilkan contoh (marker-labels.html).

Ikon sederhana

Dalam kasus paling dasar, ikon hanya bisa menunjukkan gambar yang akan digunakan sebagai ganti ikon paku tekan default Google Maps. Untuk menetapkan ikon tersebut, setel properti icon marker ke URL gambar. Google Maps JavaScript API akan mengatur ukuran ikon secara otomatis.

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}
<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 marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}

Tampilkan contoh (icon-simple.html).

Ikon rumit

Anda mungkin perlu menetapkan bentuk rumit untuk menunjukkan region yang bisa diklik, dan cara menampilkan ikon sesuai dengan overlay lainnya ("urutan tumpukan"nya). Ikon yang ditetapkan dengan cara ini harus disetel properti icon-nya ke objek bertipe Icon.

Objek icon mendefinisikan sebuah gambar. Juga mendefinisikan size ikon, origin ikon (jika gambar yang Anda inginkan adalah bagian dari gambar yang lebih besar dalam sprite, misalnya), dan anchor tempat hotspot ikon akan berada (berdasarkan asalnya).

Jika Anda menggunakan label dengan marker khusus, Anda bisa memosisikan label dengan properti labelOrigin dalam objek Icon.

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}
<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>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Tampilkan contoh (icon-complex.html).

Mengonversi objek MarkerImage ke tipe Icon

Hingga Google Maps JavaScript API versi 3.10, ikon rumit didefinisikan sebagai objek MarkerImage. Literal objek Icon telah ditambahkan di versi 3.10, dan menggantikan MarkerImage mulai versi 3.11 dan seterusnya. Literal objek Icon mendukung parameter yang sama seperti MarkerImage, sehingga memudahkan Anda mengonversi MarkerImage menjadi Icon dengan menghilangkan konstruktor, membungkus parameter sebelumnya dalam {}, dan menambahkan nama-nama setiap parameter. Misalnya:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

menjadi

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Simbol

Selain gambar raster, marker mendukung tampilan jalur vektor yang disebut Symbols. Untuk menampilkan jalur vektor, teruskan sebuah literal objek Symbol bersama jalur yang diinginkan ke properti icon marker. Anda bisa menggunakan salah satu jalur yang telah didefinisikan di google.maps.SymbolPath atau mendefinisikan jalur khusus menggunakan notasi jalur SVG.

Untuk informasi selengkapnya, lihat dokumentasi untuk simbol.

Membuat marker bisa diseret

Untuk diperbolehkan pengguna menyeret marker ke lokasi yang berbeda di peta, setel draggable ke true dalam opsi marker.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Kirim masukan tentang...

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