web-dev-qa-db-ja.com

Googleマップのマーカーの色を変更する方法

Google Maps APIを使用してマーカーでいっぱいの地図を作成していますが、1つのマーカーを他のマーカーよりも目立たせたいです。最も簡単なのは、マーカーの色を赤ではなく青に変更することです。これは簡単なことですか、それともまったく新しいアイコンを作成する必要がありますか。新しいアイコンを作成する必要がある場合、それを行うための最も簡単な方法は何ですか？

google-mapsgoogle-maps-api-2
162
abeger

Maps v2は廃止予定なので、おそらくv3 mapsに興味があるでしょう。 https://developers.google.com/maps/documentation/javascript/markers#simple_icons

V2マップの場合：

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

あるロジックセットですべての「通常の」ピンを実行し、別のロジックセットで新しいマーカーを使用して定義されたピンを実行します。

45
Kevin

Google Maps APIのバージョン3では、これを行う最も簡単な方法は、Benjamin Keenが作成したカスタムアイコンセットのようなカスタムアイコンセットを取得することです。

http://www.benjaminkeen.com/?p=105

これらのアイコンをすべてマップページと同じ場所に配置した場合は、作成時に適切なアイコンオプションを使用するだけでマーカーの色を変更できます。

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

これは非常に簡単で、現在取り組んでいるプロジェクトに私が使っているアプローチです。

119
Sean McMains

MapIconMaker：Google Maps v2用のライブラリ

1つの方法は MapIconMaker を使うことです。ここに例 があります 。 Googleマップのデフォルトアイコンは幅20ピクセル、高さ34ピクセルです。そのため、次のようなものをエミュレートすることができます。

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

あなたは物事を自分自身でさらに容易にするためにそれを何らかの関数で包むことさえできます：

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

それが私が個人的に私が作成するすべてのマーカーに使うものです。私は気まぐれの色を変更するオプションがあるのが好きです。

更新：デフォルトアイコンの16進数の色は "＃FE7569"です。また、新しいアイコンで新しいマーカーを作成するのではなく、マーカーにsetImageを設定することもできます。そのため、関数を強調表示したい場合は、上記の関数を使用して、次のようなことを実行できます。

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker：Google Maps v3用のライブラリ

いつかV2がV3に置き換えられたので、私はこの答えを更新するべきだと思いました。私はV3 Utility Library にあるカスタムマーカー用のライブラリを作成しました 。色や形を変えることができ、マーカー上にもテキストを配置できます。それはグーグルマップタイプマーカーを作成するためのメソッドを持っているグーグルチャートAPIを使うことによって働きます。 Google Charts APIを直接使用する場合は、ソースコードを自由に参照してください。

ただし、このライブラリについての問題は、これらのマーカー画像のクリック可能領域を自動的に定義することです。たとえば、テキスト付きの長いほうのバブルには、クリック可能領域が必要になります 。例 .

49
Bob

enter image description hereenter image description here 材料設計

2019年3月改訂プログラムによるピンカラーで、

ピュアジャバスクリプト、画像なし、サポートラベル

廃止予定のCharts APIに依存しなくなりました

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });
31
Jonathan

個人的には、Google Charts APIによって生成されたアイコンは見栄えがよく、動的にカスタマイズするのは簡単だと思います。

私の答えを参照してください Google Maps API 3 - デフォルト（ドット）マーカーのカスタムマーカーの色

23
matt burns

私が見つけた最も簡単な方法はBitmapDescriptorFactory.defaultMarker（）を使うことです--- ドキュメンテーション 色さえ設定する例さえ持っています。私自身のコードから：

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_Azure))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))
11
Michael Hamilton

マーカーをカスタマイズするには、このオンラインツールからそれを行うことができます。 https://materialdesignicons.com/

あなたのケースでは、あなたはここで利用可能である地図マーカーが欲しいです： https://materialdesignicons.com/icon/map-マーカー とあなたがオンラインでカスタマイズすることができます。

単にデフォルトの赤を青に変更したい場合は、次のアイコンを読み込むことができます。 http://maps.google.com/mapfiles/ms/icons/blue-dot.png

それはこのスレッドで言及されています： https://stackoverflow.com/a/32651327/6381715

2
GuGuss