Googleマップのマーカーの色を変更するにはどうすればよいですか?


167

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


2
あなたは昨日からこの記事をチェックすることもできます。stackoverflow.com/questions/2467720/...
ダニエルVassallo氏

または、おそらくより良いポストstackoverflow.com/questions/7095574/...
Faizan

回答:


45

マップv2は非推奨であるため、おそらくv3マップに興味があります。https//developers.google.com/maps/documentation/javascript/markers#simple_icons

v2マップの場合:

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

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


24
今後の読者への注意:これは、廃止予定のGoogle Maps API v2用です。v3を使用している場合は、他の場所を調べる必要があります。
Priestc 2013

12
最初のリンクctrl-fをクリックして '色'を表示しました。結果はありません。実際に質問に回答するには、回答にさらに詳細を追加することをお勧めします。OPは、新しいアイコン作成せずに色を変更できるかどうかを具体的に尋ねます。
qwertzguy

125

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

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


6
この答えは素晴らしいです。受け入れられた答えがV2に対するものであることを私は悲しかったが、ありがたいことにスクロールダウンは報われた。ありがとう!
Adam Tuttle 2013

画像に依存しないバージョンを作成しました:stackoverflow.com/a/23163930/1689770
Jonathan

49

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」です。また、新しいアイコンで新しいマーカーを作成するのではなく、マーカーに画像を設定できます。したがって、関数を強調表示したい場合は、上記の関数を使用して、次のようなもので行くことができます。

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

StyledMarker:Googleマップv3のライブラリ

V2はV3に置き換えられたので、この答えを更新する必要があると思いました。ここで V3ユーティリティライブラリ(デッドリンク)にあるカスタムマーカーのライブラリを作成しました。さまざまな色や形が可能で、テキストをマーカーに配置することもできます。これは、Googleマップタイプマーカーを作成するためのメソッドを持つGoogle Charts APIを使用して機能します。Google Charts APIを直接使用する場合は、ソースコードを自由に見てください。

ただし、このライブラリの重要な点は、これらのマーカー画像のクリック可能な領域を自動的に定義することです。たとえばこの例のように、テキスト付きの長いバブルには、クリック可能な領域が表示されます(デッドリンク)。


3
これはGMaps API v2とのみ互換性があるようです?
Tigraine

7
@Tigraine実際に、v3で使用する「StyledMarker」と呼ばれるまったく新しいライブラリを作成しました。これは、v3ユーティリティライブラリにあります。code.google.com
Bob

Sean McMainsのv3の回答を見る
smp7d

@Mattもともとはい、v2のみでした。その後、v3ソリューションを含むように更新しました
ボブは

ちなみに、「setImage」はGoogle Maps API v3では市場の機能ではありません。「setIcon」は使用する正しい関数です。
Nick Bork 2013

39

ここに画像の説明を入力してください ここに画像の説明を入力してください 材料設計

EDITED MARCH 2019がプログラマティックピンカラーになりました。

純粋なJAVASCRIPT、画像なし、ラベルのサポート

廃止された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,
    });

2
この機能は、こちらで確認できるように、残念ながら非推奨になっています。これは非常に残念な状況で、これは非推奨であり、私が使用した以前のバージョンはMapIconMakerすでに非推奨となっています。
ゼロワード2014年

これはhttpsでは機能せず、httpでのみ機能することに注意してください。残念!
JoeGalind 2016

@JoeGalind色を取得するときに暗号化が必要な理由はありますか?httpつまり、私がヘッダーで気付いていない何かを公開していない限り、使用するセキュリティリスクはない
Jonathan

@JonathanLeaders:これは、https呼び出しではないため、プロジェクトのinfo.plistの許可リストにドメインを追加する必要があることを意味します。
JoeGalind 2017

6
2019年に更新、非推奨ではなくなりました
ジョナサン


12

私が見つけた最も簡単な方法は、BitmapDescriptorFactory.defaultMarker()を使用することです。ドキュメントには、色を設定する例も含まれています。私自身のコードから:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

これはアンドロイド専用ですか、それともウェブブラウザ用ですか?
ジョナサン

@ジョナサン-これはアンドロイド専用です-彼が投稿した例はJAVAにあります
dazza5000

2

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

あなたの場合、あなたは https//materialdesignicons.com/icon/map-markerで入手でき、オンラインでカスタマイズできるマップマーカーが必要です。

デフォルトの赤の色を青に変更したいだけの場合は、次のアイコンをロードできます:http : //maps.google.com/mapfiles/ms/icons/blue-dot.png

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


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.