Googleマップのマーカーアイコン画像のサイズ変更


141

マーカーのアイコンプロパティに画像を読み込むと、元のサイズで表示されます。これは本来のサイズよりもはるかに大きくなります。

標準よりも小さいサイズに変更したい。これを行う最良の方法は何ですか?

コード:

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"
  });
}

回答:


317

元のサイズが100 x 100で、50 x 50にスケーリングする場合は、サイズの代わりにscaledSizeを使用します。

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
});

これは、API v3でそれを行う方法です。
Dean_Wilson

scaledSize代わりにscale= love
Made in Moon

アイコンを位置に正しく合わせるために、アンカーポイントをいじるようにしてください。
bluedot 2017

64

コメントで述べたように、これはドキュメント付きのIconオブジェクトを支持する更新されたソリューションです。

アイコンオブジェクトを使用する

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
 });

12
MarkerImageは非推奨です。代わりにアイコンオブジェクトを使用してください!
Bertaud

8
これは画像のサイズを変更しませんが、トリミングしますか?
Luis A. Florit 14

使用icon objectscaledSize: new google.maps.Size(h, w)そのオブジェクトのプロパティ
Sverrir Sigmundarson '28

2
@SverrirSigmundarsonそれはnew google.maps.Size(w, h)h、w であるべきではありません
Ravi Ram

@RaviRam 確かにそうです。この修正に感謝します。
Sverrir Sigmundarson 2017年

14

MarkerImageはIconで非推奨になりました

Google Maps JavaScript APIのバージョン3.10までは、複雑なアイコンがMarkerImageオブジェクトとして定義されていました。Iconオブジェクトリテラルは3.10で追加され、バージョン3.11以降のMarkerImageを置き換えます。IconオブジェクトリテラルはMarkerImageと同じパラメーターをサポートしているため、コンストラクターを削除し、以前のパラメーターを{}でラップし、各パラメーターの名前を追加することで、MarkerImageをIconに簡単に変換できます。

フィリップのコードは次のようになります。

 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
 });

3
これは画像のサイズを変更しないと思いますが、トリミングします。
Luis A. Florit 14

9
あなたが欲しいとscaledSizeいうよりsize
bbodenmiller 14

うん、@ bbodenmillerに同意する。scaledSizeがあなたが探しているものかもしれない。私のプロジェクトでは、scaledSizeを使用しています。var icon = {url:imageName、scaledSize:new google.maps.Size(8、12)};
user908645

7

原点とアンカーを削除すると、より規則的な画像になります

  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
 });

これは私のために働いた!マーカーコード内でscaledImageパラメータを設定しようとしても、機能しません。
Dumber_Texan2

1

トピックの私のような完全な初心者は、オンラインエディターやPhotoshopのような写真エディターで画像のサイズを自分変更するよりも、これらの答えの1つを実装するのが難しい場合があります。

500x500の画像は、50x50の画像よりもマップ上に大きく表示されます。

プログラミングは必要ありません。


1

だから私はこれと同じ問題を抱えていましたが、少し異なります。Philippe Boissonneaultが示唆するように、私はすでにアイコンをオブジェクトとして持っていましたが、SVG画像を使用していました。

私にとってそれを解決したのは
、SVG画像からPNGに切り替え、Catherine Nyoを使用する画像の2倍のサイズの画像を作成することでした。


0

私のようにvue2-google-mapsを使用している場合、サイズを設定するコードは次のようになります。

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.