web-dev-qa-db-ja.com

Googleマップマーカーラベルに複数の文字

カスタムパスで定義された幅の広いアイコンを持つGoogleマップマーカーに4文字のラベル（「A123」など）を追加しようとしています。

var marker = new google.maps.Marker({
  position: latLon,
  label: { text: 'A123' },
  map: map,
  icon: {
    path: 'custom icon path',
    fillColor: '#000000',
    labelOrigin: new google.maps.Point(26.5, 20),
    anchor: new google.maps.Point(26.5, 43)
    scale: 1,
  }
});

マーカーラベルAPI は1文字に制限されているため、上記の例ではマーカーを「A」で表示しています。 chrome開発者ツールを使用して、gmapsで作成されたhtmlをハックし、長いラベルを元に戻しました。 cssを変更することなく完全に表示されるため、Googleマップが削除した他のラベル文字を元に戻す方法を見つける必要があります。

Google Maps Issue を提起して、この制限の解除を要求しました。上記のリンクにアクセスして問題にスターを付けてGoogleの問題への投票を検討してください。Googleに修正を促してください。ありがとうございます。

しかし、その間に、1文字の制限を削除するために使用できる回避策はありますか？

Google.maps.Markerのカスタム拡張機能を作成して、長いラベルを表示する方法はありますか？

google-mapsgoogle-maps-api-3
41
robd

SVGアイコンでMarkerWithLabelを使用できます。

更新：Google Maps Javascript API v3は、 MarkerLabel で複数の文字をネイティブにサポートするようになりました

概念実証フィドル （アイコンを提供しなかったため、作成しました）

注： この修正 、 robd にクレジットされている重複マーカーのラベルに問題がありますコメント

コードスニペット：

function initMap() {
  var latLng = new google.maps.LatLng(49.47805, -123.84716);
  var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new MarkerWithLabel({
    position: homeLatLng,
    map: map,
    draggable: true,
    raiseOnDrag: true,
    labelContent: "ABCD",
    labelAnchor: new google.maps.Point(15, 65),
    labelClass: "labels", // the CSS class for the label
    labelInBackground: false,
    icon: pinSymbol('red')
  });

  var iw = new google.maps.InfoWindow({
    content: "Home For Sale"
  });
  google.maps.event.addListener(marker, "click", function(e) {
    iw.open(map, this);
  });
}

function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 2
  };
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
.labels {
  color: white;
  background-color: red;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  text-align: center;
  width: 30px;
  white-space: nowrap;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
49
geocodezip

まず、コード作成者に感謝します！

グーグル検索中に以下のリンクを見つけましたが、これは非常にシンプルで最適です。 SVGが非推奨でない限り、失敗することはありません。

https://codepen.io/moistpaint/pen/ywFDe/

ここのコードにはjsロードエラーがありますが、提供されているcodepen.ioリンクで完全に機能しています。

var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(-37.808846, 144.963435)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);


var pinz = [
    {
        'location':{
            'lat' : -37.807817,
            'lon' : 144.958377
        },
        'lable' : 2
    },
    {
        'location':{
            'lat' : -37.807885,
            'lon' : 144.965415
        },
        'lable' : 42
    },
    {
        'location':{
            'lat' : -37.811377,
            'lon' : 144.956596
        },
        'lable' : 87
    },
    {
        'location':{
            'lat' : -37.811293,
            'lon' : 144.962883
        },
        'lable' : 145
    },
    {
        'location':{
            'lat' : -37.808089,
            'lon' : 144.962089
        },
        'lable' : 999
    },
];

 

for(var i = 0; i <= pinz.length; i++){
   var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';

  
   var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon);
   var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}
html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtc3qowwB96ObzSu2vvjEoM2pVhZRQNSA&signed_in=true&callback=initMap&libraries=drawing,places"></script>

SVG htmlをuriエンコードし、forループで「data：image/svg + xml」の後にあるimage変数の1つを置き換えるだけです。

Uriエンコードの場合は、 ri-encoder-decoder を使用できます

最初に既存のsvgコードをデコードして、記述内容をよりよく理解することができます。

24
jaspreet21anand

OK、私が思いついた1つの解決策がありますが、これはかなりめちゃくちゃです。

FontFamilyラベル属性を使用して、ラベルテキスト全体をdivに配置します。次に、querySelectorAllを使用して結果のスタイル属性を照合し、参照を引き出して、マップが読み込まれたらタグを書き換えます。

var label = "A123";
var marker = new google.maps.Marker({
  position: latLon,
  label: {
    text: label,
    // Add in the custom label here
    fontFamily: 'Roboto, Arial, sans-serif, custom-label-' + label
  },
  map: map,
  icon: {
    path: 'custom icon path',
    fillColor: '#000000',
    labelOrigin: new google.maps.Point(26.5, 20),
    anchor: new google.maps.Point(26.5, 43), 
    scale: 1
  }
});

google.maps.event.addListener(map, 'idle', function() {
  var labels = document.querySelectorAll("[style*='custom-label']")
  for (var i = 0; i < labels.length; i++) {
    // Retrieve the custom labels and rewrite the tag content
    var matches = labels[i].getAttribute('style').match(/custom-label-(A\d\d\d)/);
    labels[i].innerHTML = matches[1];
  }
});

これはかなり脆いようです。それほどひどくないアプローチはありますか？

7
robd

APIバージョン3.26.10では、マーカーラベルに複数の文字を設定できます。制限が解除されます。

それを試して、それは動作します！

さらに、単なる文字列の代わりにMarkerLabelオブジェクトを使用して、外観のいくつかのプロパティを設定できます。カスタムアイコンを使用する場合、labelOriginプロパティを設定してラベルの位置を変更できます。

ソース： https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c （また、これに関する問題は上記のリンクで報告できます糸）

3
Apostolis