1つの位置に2つのマーカーを作成できますか？

Question

Iamは基本的にバケーションパークの地図であるGoogleマップの実装に取り​​組んでいます。ここに私はそこにある家を見せなければなりません。私は、マーカーとしての家でGoogleマップを作成していますが、顧客はこのようにそれを望んでいる：

var locations = [ 
    [{id: 1, lat: 51.52382330377623, lng: 5.137980404243535, content: 'Kids Jungalow A'}], 
    [{id: 2, lat: 51.52365641932812, lng: 5.138034048423833, content: 'Kids Jungalow B'}], 
    [{id: 3, lat: 51.523512898213674, lng: 5.138157430038518, content: 'Kids Jungalow C'}], 
    [{id: 4, lat: 51.523356025780366, lng: 5.138221803054876, content: 'Kids Jungalow D'}], 
    [{id: 5, lat: 51.52321917917386, lng: 5.13836664234168, content: 'Kids Jungalow E'}], 
    [{id: 6, lat: 51.52306230572866, lng: 5.138559761390752, content: 'Kids Jungalow F'}], 
] 

：

だから、基本的に次のように与えられた番号/ idを印刷し、その上に円が必要です

divにマーカーを追加することは可能でしょうか？それは私がhtmlマーカーを作ることです

Answer 1

カスタムHTMLでマーカーを作成することができます。 Rich MarkerライブラリまたはMarker With Labelライブラリを見てみましょう

独自のカスタムマーカーを作成するために再利用することができ、クラスのプロトタイプである両方のライブラリを活用google.maps.OverlayViewを、（あなたは番号の泡のように見えるようにスタイルすることができます）。マーカーの内容に制限はなく、あなた自身のHTMLを内部、画像、svgで表示することができます...上記の参照サイトのUSGSOverlay.prototype.onAdd関数内のサンプルコードを見てください。

MyOverlay.prototype.onAdd = function() { 

    var div = document.createElement('div'); //marker container div 
    div.style.borderStyle = 'none'; 
    div.style.borderWidth = '0px'; 
    div.style.position = 'absolute'; 

    var img = document.createElement('img'); //house image icon 
    img.src = "myimages/house.png"; 
    img.style.width = '100%'; 
    img.style.height = '100%'; 
    img.style.position = 'absolute'; 
    div.appendChild(img); 

    var circle = document.createElement('div'); //house image icon 
    circle.style.position = 'absolute'; 
    //..other circle styles/css classes to style the div in the shape of circle 
    circle.innerHTML = this.number_inside_circle; //here you can set number inside the circle 
    div.appendChild(circle); 

    this.div_ = div; 

    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
}; 

Answer 2

マーカーラベルを見てみましょう： https://developers.google.com/maps/documentation/javascript/markers#marker_labels 例： https://developers.google.com/maps/documentation/javascript/examples/marker-labels

をマーカーはAのみ受け付けしかしあなたは、たとえば持つことができるようにするには、このようなものは、あなたが内側にしたい任意の構造を作成することができますデフォルトでは1文字のラベルです。 Marker Clustererはこれを行うことができ、support ticketには他の解決策があります。