web-dev-qa-db-ja.com

GoogleマップV3でマーカーのラベル/タイトルを永続的に表示するにはどうすればよいですか

Googleマップにマーカーを表示したい Sample in ver 2

今、これはELabelを使用してv2で読むことができましたが、v3では非推奨です。 Google Maps V3のマーカーのアイコンの下にテキストを表示する方法はありますか？

google-maps-api-3labelgoogle-maps-markers
22
Adeem

私にとって完璧に機能した別の投稿で解決策を見つけました。

Googleマップマーカーに番号ラベルを追加

5
Adeem

少なくとも2016年10月以降、公式APIは、1文字より長い永続的に表示されるラベルを追加する方法を提供します。 Googleプロジェクトメンバーによるこの返信 を参照してください。

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: 'Hello world',
});

デフォルトでは、結果は次のようになります。

Example image

かなり読めない。幸いなことに、APIはプレーンストリングの代わりに MarkerLabel オブジェクトも許可します。

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
});

上記のスニペットでは、次の結果が得られます。

A white, bold label at the middle of the marker

ただし、元の質問では、ラベルをマーカーの下に配置できるかどうかを尋ねました。 MarkerLabelのドキュメントでは、カスタムアイコンとlabelOriginプロパティを使用するとこれが可能であると記載されています。デフォルトのアイコンを使用する場合、1つは GitHubで利用可能 です。アイコンオブジェクトを追加しましょう。

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
  icon: {
    labelOrigin: new google.maps.Point(11, 50),
    url: 'default_marker.png',
    size: new google.maps.Size(22, 40),
    Origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(11, 40),
  },
});

この結果：

A white, bold label below the marker

かなり良い！ただし、このアプローチ全体には、元の質問のボックスにはないという欠点があります。各マップタイプでの読みやすさです。マップタイプが衛星からデフォルトに変更された場合、結果のラベルは読みにくくなります。

A white, bold label below the marker against white background

両方のタイプの低コントラストを回避するための簡単ですが完璧ではない方法は、color: 'gray'を設定することです：

Grey labels

ただし、グレーの色は都市部の近くでは機能しません。より良いオプションは、text-shadow CSSプロパティを適用して、白いテキストに黒い裏地を描画することです。ただし、Googleマップで作成されたDOM要素のほとんどがクラスを定義していないため、ラベルにプロパティを適用する方法を見つけることができません。

DOM elements

私が思いついた最良のオプションは、マップタイプの変更を検出し、各マーカーのラベルの色を更新することです。

map.addListener('maptypeid_changed', function () {
  var typeToColor, type, color, k, label;

  typeToColor = {
    'terrain': 'black',
    'roadmap': 'black',
    'hybrid': 'white',
    'satellite': 'white',
  };

  type = map.getMapTypeId();
  color = typeToColor[type];

  for (k in markers) {
    if (markers.hasOwnProperty(k)) {
      label = markers[k].getLabel();
      label.color = color;
      markers[k].setLabel(label);
    }
  }
});

ただし、これでも雪や曇りの衛星画像では失敗します。ほとんどの場合、それでもまだ十分だと思います。それにもかかわらず、プラグインなしで、公式のAPIを使用して可視ラベルを表示できることは素晴らしいことです:)

45
Akseli Palén

できません！ただし、マーカーに永続的に表示されるテキストを（サードパーティのコンポーネントを必要とせずに）添付するために使用できるマップAPIの別の部分があり、それはinfoWindowと呼ばれます。サンプルコードについてはこちらをご覧ください。実際の動作をご覧ください。 https://developers.google.com/maps/documentation/javascript/examples/event-closure

サードパーティのコードを敢えて使用する場合は、希望のルックアンドフィールから近いものを以下に示します。 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/ docs/examples.html

3
Pr Shadoko

私は次を使用します：

MarkerWithLabel.js

example （画像はflag.pngファイルです）

X.htmlドキュメントでJavaScriptを使用する

このように見えます。

    <style type="text/css">
        .labels {
            color: black;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 0.8em;
            font-weight: bold;
            text-align: center;
            width: 6em;
            border: 1px solid black;
            white-space: normal;
        }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=true"></script>
    <!--MarkerwithLabelClass - adjust the path!! -->
    <script src="YourPathHere/markerwithlabel.js"></script>

<script type="text/javascript">
//insert standaard initializing of googlemaps here
//and other windows.onload function
window.onload = function Initialize() {
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
         function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){

                   var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string)
                    var marker = new MarkerWithLabel({
                        zIndex: 1,
                        title: titel,
                        position: latlng,
                        draggable: false,
                        icon: image,
                        labelContent: label,
                        labelAnchor: new google.maps.Point(30, -2),
                        labelClass: "labels", // the CSS class for the label
                        labelStyle: { opacity: 0.80 }
                    });

                    return marker;
    }
 </script>

Google Maps APIのライセンス情報については、こちらをご覧ください： https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

3
Sven Dhaens

これと同じ原則を使用できるはずです 例 。マウスイベントをリッスンする代わりに、マーカーごとに新しいカスタムコントロールを作成し、マーカーの下に配置する必要があります。それがうまくいくことを願っています。

1
Björn