Ubah ukuran gambar ikon penanda Google Maps

Ketika saya memuat gambar ke properti ikon marker, ia menampilkannya dengan ukuran aslinya, yang jauh lebih besar dari yang seharusnya.

Saya ingin mengubah ukuran ke standar ke ukuran yang lebih kecil. Apa cara terbaik untuk melakukan ini?

Kode:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

Jika ukuran asli adalah 100 x 100 dan Anda ingin skala ke 50 x 50, gunakan scaledSize sebagai ganti Ukuran.

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Seperti disebutkan dalam komentar, ini adalah solusi terbaru yang mendukung objek Icon dengan dokumentasi.

Gunakan objek Ikon

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });

MarkerImage telah ditinggalkan karena Ikon

Sampai versi 3.10 Google Maps JavaScript API, ikon kompleks didefinisikan sebagai objek MarkerImage. Literal objek Ikon ditambahkan pada 3.10, dan menggantikan MarkerImage dari versi 3.11 dan seterusnya. Literal objek Ikon mendukung parameter yang sama seperti MarkerImage, memungkinkan Anda untuk dengan mudah mengkonversi MarkerImage ke Ikon dengan menghapus konstruktor, membungkus parameter sebelumnya di {}, dan menambahkan nama-nama setiap parameter.

Kode Phillippe sekarang adalah:

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });

Hapus asal dan jangkar akan menjadi gambar yang lebih teratur

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });

Seorang pemula yang lengkap seperti saya untuk topik ini mungkin merasa lebih sulit untuk mengimplementasikan salah satu jawaban ini daripada, jika dalam kendali Anda, untuk mengubah ukuran gambar sendiri dengan editor online atau editor foto seperti Photoshop.

Gambar 500x500 akan tampak lebih besar di peta daripada gambar 50x50.

Tidak diperlukan pemrograman.

Jadi saya hanya punya masalah yang sama, tetapi sedikit berbeda. Saya sudah memiliki ikon sebagai objek seperti yang disarankan Philippe Boissonneault , tapi saya menggunakan gambar SVG.

Apa yang menyelesaikannya bagi saya adalah:
Beralih dari gambar SVG ke PNG dan mengikuti Catherine Nyo untuk memiliki gambar yang dua kali lipat dari ukuran yang akan Anda gunakan.

Jika Anda menggunakan vue2-google-maps seperti saya, kode untuk mengatur ukurannya terlihat seperti ini:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>