Googleは複数の文字でマーカーラベルを割り当てます

Question

カスタムパスで定義されたワイドアイコンを持つ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, 
    } 
}); 

marker label API

はこれだけ上記の例では「A」でマーカーを示し、単一の文字に制限されています。私は、gmapsによって作成されたhtmlをハックするためにクローム開発ツールを使用して、長いラベルを元に戻してみました。それは必要なCSSの変更なしで完全に表示されるので、私はちょうどGoogleマップが削除した他のラベルの文字を元に戻す方法を見つける必要があります。

私はGoogle Maps Issueを提出し、この制限を解除するようリクエストしました。上記のリンクにアクセスし、問題を主題にしてGoogleに解決を促すために、Googleの問題に投票することを検討してください - ありがとう！

しかし、その間に、1つの文字制限を削除するための回避策がありますか？

私の長いラベルを表示するためにgoogle.maps.Markerのカスタム拡張を作成する方法はありますか？

Answer 1

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

更新： GoogleマップのJavaScript API v3には、ネイティブにMarkerLabel

proof of concept fiddleに複数の文字をサポートしています（あなたのアイコンを提供しなかったので、私は1つのアップをした）

注：ありオーバーラップするマーカーのラベルには、this fixでアドレス指定されています。これは、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>

Answer 2

[OK]をクリックして、私はかなりうんざりしています。

私は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]; 
    } 
}); 

これはかなり脆いようです。それほどひどいことはありませんか？

Answer 3

ラベルは、次のコードであるとして、文字、数字、単語を可能にするこの問題にはるかに簡単な解決策。具体的には、「icon：」で始まるコード行です。任意の文字列または変数を 'k'に置き換えることができます。

for (i = 0; i < locations.length; i++) 
     { 
     k = i + 1; 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),  
     map: map, 
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000' 
}); 

--- locations配列はlatとlongを保持し、kはマッピングしていたアドレスの行番号です。言い換えれば、マップする100のアドレスがあれば、マーカーラベルは1〜100です。

Answer 4

まずは、コード作成者のおかげです！

私はグーグルで次のリンクを見つけました。それは非常に簡単で、最も効果的です。 SVGが推奨されない限り、決して失敗しないでしょう。

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

いくつかのjsのは、ここでのコードのエラーをロードするが、そのは完全に提供codepen.ioリンクに取り組んあります。 forループ中： "画像/ SVG + xmlのデータ"

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エンコードと後の画像変数に1を交換する必要があります。あなたはあなたが書かれているのより良い理解を得るために、まず既存のSVGコードをデコードすることができます uri-encoder-decoder

を使用することができますエンコードするURIの

。

Answer 5

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

試してみてください！

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

出典：//google-maps-utility-library-v3.googlecode： https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c30 （また、あなたは上記のリンクのスレッドでこのに関するすべての問題を報告することができます）