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

https://stackoverflow.com/questions/2472957

20-09-2019
|

質問

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

解決

マップV2が廃止されましたので、あなたはおそらくv3のマップに興味がある：ます。https： //developers.google.com/maps/documentation/javascript/markers#simple_iconsする

v2のマップの場合：

http://code.google.com/apis/maps/ドキュメント/ overlays.html＃Icons_overviewする

あなたは定義された新しいマーカーを使用して「特別な」ピン（複数可）を行い1つのすべての「定期的な」ピンを行うロジックのセット、および別のものを持っているでしょう。

他のヒント

GoogleマップAPIのバージョン3では、これを行うための最も簡単な方法は、ベンジャミン・キーンは、ここで作成したものと同じように、カスタムアイコンセットをつかんによるものであってもよいです

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

あなたのマップページと同じ場所で、それらのすべてのアイコンを置く場合、あなたは、単にそれを作成するときに適切なアイコンオプションを使用してマーカーを色分けすることができます：

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

これは超簡単で、そして私は、私が現在働いているプロジェクトのために使っていたアプローチである。

MapIconMaker：Googleマップ用のライブラリV2

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

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

それは私が個人的に私が作成したすべてのマーカーに使用するものです。私は気まぐれの色を変更するオプションを持っていることを好むます。

更新：デフォルトのアイコンの六角色は「＃1 FE7569」です。また、あなたはかなり新しいアイコンで新しいマーカーを作成するよりも、マーカーの上にsetImageことができます。

：あなたは機能があなたを強調したいのであれば上記の関数を使用して、このようなもので行くことができます

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

StyledMarker：Googleマップ用のライブラリV3

V2は、いつか前V3に置き換えられましたので、私はこの答えを更新してくださいと思いました。私はV3ユーティリティライブラリで見つけることができるカスタムマーカー用のライブラリを作成したここを。これは、さまざまな色や形を可能にし、あなたにも、マーカーの上にテキストを配置することができます。これは、Googleマップのタイプのマーカーを作成するための方法を持っているGoogleのチャートAPIを使用して動作します。あなたではなく、直接GoogleのチャートAPIを使用したい場合は、ソースコードを見てお気軽ます。

そのライブラリについての事は、しかし、それはあなたのためにこれらのマーカー画像のクリック可能な領域を定義するの世話をするということですので、例えば、テキストと長いバブルは、hrefの<のようなものが期待するクリック可能な領域を、持っています= "https://github.com/googlemaps/v3-utility-library/tree/master/styledmarker/examples/elevation.htm" REL = "nofollowをnoreferrer">この例を

こちら</a >「ここに画像の説明を入力します」材料設計

の 2019年3月EDITED の今プログラムピン色で、

の PURE JAVASCRIPT、NO画像は、LABELSをサポートする

もはや非推奨のチャート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,
    });

個人的に、私はGoogleのチャートAPIによって生成されたアイコンは素晴らしい見て、動的にカスタマイズが容易だと思います。

<のhref = "https://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker/7686977#7686977" に私の答えを参照してください。 > GoogleマップAPI 3 - デフォルト（ドット）のカスタムマーカー色マーカーの

私が見つけた最も簡単な方法は、BitmapDescriptorFactory.defaultMarkerを（使用する場合）は、ドキュメントは、色を設定する例を有していてもをご覧ください。私自身のコードから：

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

マーカーをカスタマイズするには、次のオンラインツールから実行できます。 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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow