Angular 2 e API di Google Maps. Manipolare l'oggetto della mappa dal componente

Question

Uso Angular 2 e devo lavorare con Google Map. Devo inizializzare una mappa, creare alcuni array con le coordinate del percorso, aggiungere un Custom HTML Marker, aggiungere alcuni listerer di eventi, disegnare una polilinea, ecc. Tutti questi possono essere fatti con il JS nativo sulla pagina web. Nel mio lavoro ho bisogno di usare Angular2. Come posso avviare un oggetto mappa all'interno del componente e manipolarlo all'interno di un componente come con un oggetto?

C'è una libreria angular2-google-maps, ma ha funzionalità limitate. Per esempio non riesco a creare una polilinea con angular2-google-maps, non riesco a integrare alcune delle librerie, per esempio HTML personalizzato Marker, cSnapToRoute, ecc

Answer 1

Si può rendere semplice script JS che caricherete sulla pagina senza angolare. È possibile init GMaps in questo modo:

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 
      } 
     }; 
} 

E si può quindi innescare evento quando GMaps terminerà l'inizializzazione:

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

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

}); 

E poi si può prendere in angolare:

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

E quindi puoi usarlo normalmente, impostando lo zoom ad esempio:

mapData.map.setZoom(50);