Google Maps API V3の新しい描画ライブラリ

最近、新しい描画ライブラリがGoogle Maps API V3に登場しました。 ユーザーがマーカーを配置し、線、円、長方形、多角形をマップ上に描画して、マップ上のさまざまな場所を強調表示できるツールのセットを提供します。







これらのツールを使用して、ユーザーからさまざまな情報を収集できます。 アプリケーションは、イベントをリッスンし、それに応じて、たとえば、検索クエリを作成したり、データベースに情報を保存したりすることで応答できます。



描画ライブラリを使用するには、js Googleマップに接続するときに、 library = drawingパラメーターを追加します。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

DrawingManager：

このライブラリのDrawingManagerクラスは、ユーザーにグラフィカルインターフェイスを提供します。 マップ上のポリゴン、長方形、破線、円、マーカーが含まれます。



DrawingManagerは次のように作成されます。

 var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、カスタム描画ツールがマップに表示されています。

オプション：

ユーザーに提供するツールと、マップおよびビュー上の位置を正確に構成できます。

drawingControl-マップ上のツールの可視性を決定します。 ブール値true / falseを取ります。



drawingControlOptions-マップ上のツールの位置と、含めるツールのリストを決定します。

-position-描画ツールの位置。 デフォルトはTOP_LEFTです。

-drawingModes-表示用のツールとその順序。 手のアイコンは常に使用可能であり、この配列には示されていません。 デフォルトは[MARKER、POLYLINE、RECTANGLE、CIRCLE、POLYGON]です。



drawingMode-デフォルトで選択されるツールを定義します。



circleOptions {}

markerOptions {}

polygonOptions {}

polylineOptions {}

rectangleOptions {}

ツールごとに、独自の特定のオプションを指定できます。 たとえば、マーカーアイコン、図形の塗りつぶしの色、zindex、クリック可能性など。 各オプションの詳細については、APIドキュメントをご覧ください。



ユーザーが作成後に図形を編集できるかどうかも指定できます。 これを行うには、編集可能なオプションをtrueに設定します。



たとえば、地図上にマーカーを配置し、円と多角形を描画し、ツールバーを上部中央に設定し、マーカーのアイコンと円のいくつかのオプションを設定する機能を追加しましょう。

 var drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON] }, drawingMode: google.maps.drawing.OverlayType.MARKER, markerOptions: { icon: new google.maps.MarkerImage('http://www.example.com/icon.png') }, circleOptions: { fillColor: '#ffffff', fillOpacity: 1, strokeWeight: 5, clickable: false, zIndex: 1, editable: true } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプションを変更します。

DrawingManagerが作成されると、 setOptions（）関数を使用して更新できます。

たとえば、ツールの新しい位置を設定できます。

 drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、円の塗りつぶしの色を変更します。

 drawingManager.setOptions({ circleOptions: { fillColor: '#000000' } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、たとえば、ボタンをクリックして、ツールバーを非表示または表示します。

 // To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ツールバーが表示された後、ツールバーに設定したすべてのオプションが保存されます。



ツールバーを完全に削除する場合は、次を呼び出す必要があります。

 drawingManager.setMap(null);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベント：

ユーザーが地図上に描画し、マーカーを設定すると、2つのイベントがトリガーされます。

1） {overlay} complete- {overlay}は、ユーザーが作成したオブジェクトのタイプです（たとえば、circlecomplete、polygoncompleteなど）。 このオブジェクトへの参照は引数として渡されます。

2） overlaycomplete -OverlayTypeと作成されたオブジェクトへのリンクが引数として渡されます。



たとえば、ユーザーがマーカーを設定すると、座標を取得して表示したり、データベースに保存したりできます。

 google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) { console.log(marker.getPosition().toString()) }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { if (event.type == google.maps.drawing.OverlayType.MARKER) { console.log(' ') } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

参照：

ライブラリ操作例

ドキュメント