私は私のWebアプリケーションでは、この正確なマーカーをやろうとしている

Question

ダイナミック長方形（AirBNB参照）のようにGoogleマップの市場にする方法：私は2つの主要な問題を提示してい

しかし、 ：

第1回：私はそれと同じように見えるカスタムマーカーを作る方法を知らない。

2番目：私はそのプロパティの幅を可変にしたいので、私のプロパティのコストが$ 1234または$ 56の場合、バブルはサイズを変更する必要があります。

誰でも手伝ってもらえますか？

私はインターネット上で見つけたこのコードを使用しましたが、パスは要件に合わないバブルを作成します。代わりにシンボルを作成する

var marker = new MarkerWithLabel({ 
       position: myLatLng, 
       map: map, 
       labelContent: "$1234", 
       labelAnchor: new google.maps.Point(15, 65), 
       labelClass: "labels", // the CSS class for the label 
       labelInBackground: false, 
       icon: pinSymbol('#F48600'), 
       id: obj['Property']['id'], 
       html: someHTML 
      }); 

//The responsible for making the marker look "pretty". 
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: '#F48600', 
     strokeWeight: 2, 
     scale: 2 
    }; 
} 

Answer 1

1. あなたがイメージのコピーを取得する場合、あなたは、マーカーオプション[ref. google]のアイコンオブジェクトを探索してみてください。イメージにgoogle.maps.Icon.urlを設定します。

2. アイコンオブジェクトの指定もこの問題に役立ちます。 google.maps.Icon.scaledSizeを参照してください。これはあなたの画像を拡大または縮小します。 icon.scaledSizeはgoogle.maps.Sizeオブジェクトである必要があります。したがって、コストスケールに基づいて新しいサイズのオブジェクトを返すカスタムメソッドを作成してみます。

   var marker = new MarkerWithLabel({ 
   
       ... 
   
       icon: { 
       url: 'marker.jpg', 
       scaledSize: iconSize(1234)    
       }, 
   
       ... 
   }); 
   
   // a crude scale solution 
   var WIDTH_RANGE = { 
       min: 50, // pixels 
       max: 200, 
   }; 
   var HEIGHT_RANGE = { 
       min: 20, 
       max: 50 
   }; 
   var COST_RANGE = { 
       min: 0, 
       max: <max cost> // dynamically set a max cost somehow 
   }; 
   
   function iconSize (cost) { 
       var scaleFactor = cost/(COST_RANGE.max - COST_RANGE.min); 
       var width = (WIDTH_RANGE.max - WIDTH_RANGE.min) * scaleFactor + WIDTH_RANGE.min; 
       var height = (HEIGHT_RANGE.max - HEIGHT_RANGE.min) * scaleFactor + HEIGHT_RANGE.min; 
   
       return new google.maps.Size(width, height); 
   }