GoogleマップAPI v3の色のカスタマイズ

Question

私は、Googleマップを使用して上記の画像のようなマップを達成しようとしています。私は、StyledMapTypeオブジェクトで-100に彩度を与えてマップのグレースケールを作成し、サークルオブジェクトを使用してマーカーの周りに半径を描画しました。私は円の中に別の彩度レベルを設定することができないので、今度は地図全体がグレイスルです。これを達成する方法はありますか？

Answer 1

私の知る限り、これをAPI内で直接行う方法はありません。私は過去にも同様の効果を達成しなければならず、円ではなく「ドーナツ」を作ることになったのです。

効果的には、中央の円形領域を除外する大きな形状を作成することです。このようにして、ポリゴンの不透明度をかなり低く設定して、この場合は「関心領域」を強調表示することができます。明らかにあなたのケースでは、あなたが色を変更したいとしてますがhttp://www.geocodezip.com/v3_polygon_example_donut.html

：

これはおそらく、良い出発点です。また、サイズが固定されているので、地図の境界を制限しない限り、ユーザーはエッジを見るほど遠くにズームすることができます（幻影を台無しにする）。そしてポリゴンは極に向かって歪んでしまいます。

これが役に立ちます。

Answer 2

別のアイデアは、2番目のマップを作成し、別の方法でStyledMapTypeでスタイルを設定し、絶対配置し、最初のグレースケールマップの前に配置することです。

あなたはそれが同じ位置に中心すなわち、それらが一致なるようにhere

あなたはまた、マップ間のイベントを同期させる必要があります説明と常に同じズームレベルを持っているように-webkit-マスクを使用してラウンド見えるようにすることができます。 あなたは両方のマップのために、再帰呼び出し

同じことが（中心にマップを制御するために）「center_changed」のためと「zoom_changed」のために行われるべき

var block = false; 
google.maps.event.addListener (thismap, 'center_changed', function(event) { 
    if (block) return; 
    block = true; 
    othermap.setCenter(thisMap.getCenter()); 
    block=false; 
}); 

は（制御マップがズーム）を回避するために、ブロッカーのいくつかの種類を作成することも必要ここで

私が設定したexample

あなたは方法は、あなたがそれらを必要な箇所に固執するために多くの作業を行う必要があります複数のマップを作成する必要があります場合は