角度2とGoogleマップAPI。コンポーネントからマップのオブジェクトを操作する

Question

私は角度2を使用しています。私はGoogleマップで作業する必要があります。私はマップを初期化し、ルート座標でいくつかの配列を作成し、Custom HTML Markerを追加し、イベントリスナーを追加し、ポリラインを描画する必要があります。これらのすべては、Webページ上のネイティブJSで行うことができます。私の仕事では、Angular2を使う必要があります。どのように私はコンポーネント内のマップオブジェクトを初期化し、オブジェクトのようなコンポーネント内でそれを操作することができますか？

ライブラリはangular2-google-mapsですが、機能は限定されています。たとえば、私は、angular2-グーグルマップでポリラインを作成することはできません、私は一部のライブラリを統合することができない、など例えばカスタムHTMLマーカー、cSnapToRoute、

Answer 1

あなたはそれが簡単なJSスクリプトすることができますあなたはAngularなしでページにロードされます。

var mapData; 
    container.gmap(
    { 
     'zoomControl': true, 
     'zoomControlOptions': { 
      'style': google.maps.ZoomControlStyle.SMALL, 
      'position': google.maps.ControlPosition[ options.mapZoomPosition ] 
     }, 
     'panControl': false, 
     'streetViewControl': false, 
     'mapTypeControl': false, 
     'overviewMapControl': false, 
     'scrollwheel': false, 
     'draggable': options.draggable, 
     'mapTypeId': google.maps.MapTypeId[ options.mapType ], 
     'zoom': options.mapZoom, 
     'styles': styles[ options.mapStyle ] 
    }) 
    .bind('init', function() { 

     mapData = { 
      container: container, 
      map: map, 
      options: options, 
      addMarker: addMarker, 
      library: library, 
      iw: { 
       data: infoWindowData, 
       window: infoWindow, 
       content: infoWindowContent, 
       open: infoWindowOpen, 
       close: infoWindowClose 
      } 
     }; 
} 

をそしてGMapsは初期化終了しますときには、イベントをトリガすることができます： あなたはこのようGMapsを初期化することができます

google.maps.event.addListenerOnce(map, 'idle', function() { 

$(document).trigger('map.init', mapData); 

}); 

をそして、あなたは、角度でそれをキャッチすることができます

var mapData; 
$(document).on('map.init', function (event,data) { 
    mapData = data; 
}); 

ズームを設定すると、通常どおりに使用できます。

mapData.map.setZoom(50);