コンテンツ
Google Maps 3.0 APIを使用すると、ウェブサイトのユーザーの特定のニーズに合わせてGoogleマップをカスタマイズできます。パーソナライズの1つの方法は、特定の場所の周囲の距離半径を示す円を挿入することです。たとえば、観光スポットの周囲5 kmの半径を表示して、訪問者が近くのホテルやレストランを見ることができるようにすることができます。場所またはポイントの周囲に距離半径を作成するには、Googleマップの「Circle」クラスを使用します。
ステップ1
HTMLファイルを開き、Googleマップコードを含むセクションに移動します。
ステップ2
マーカーの位置を定義するコードが見つかるまで、コードを下にスクロールします。ブックマークを簡単に見つけるには、HTMLファイルで「google.maps.Marker」という用語を検索します。
ステップ3
マーカーを定義する場所の下で、「Circle」レイヤーを作成し、それに貼り付けます。たとえば、次のように入力します。
var circleExample = new google.maps.Circle（{map：map
ステップ4
マーカーの周囲にある円の半径をメートル単位で追加します。
var circleExample = new google.maps.Circle（{map：map radius：5000
手順5
円の塗りつぶし色を作成します。 16進形式を使用して色を定義します。たとえば、次のように入力します。
var circleExample = new google.maps.Circle（{map：map radius：5000 fillColor = #FFFFFF}）;
手順6
マーカーに円を関連付ける、または追加します。
var circleExample = new google.maps.Circle（{map：map radius：5000 fillColor = #FFFFFF}）; circleExample.bindTo（ 'map'、marker）;
手順7
マップを保存してテストします。 Googleマップでは、マーカーの位置を中心に半径5,000メートルの白い円が表示されます。