серые окна google maps и угловые 2

Question

У меня проблема с угловыми 2 и API v3 карт Google, проблема в том, что при загрузке страницы через розетку маршрутизатора карта представляет собой серый квадрат, но когда я обновляю на странице правильно загружается карта, я использую импорт библиотеки js на индексной странице, а карта загружается в компонент.

this is the view of the map

Я попытался с триггерной rezise, ​​но не работают. Я думаю, что это проблема с загрузкой библиотеки или схожей.

это код:

import {Component, OnInit} from "angular2/core"; 
import {MapsService} from "../maps/maps.service"; 
import {mapsIconService} from "./maps.icon.service"; 
import {BrowserDomAdapter} from 'angular2/platform/browser'; 


@Component({ 
    selector: "div-map", 
    template: ` 
    <div id="map" style="height: 500px" class="maps"> </div> `, 
    providers: [MapsService, mapsIconService, BrowserDomAdapter], 
    style: ` 
     .maps{ 
      overflow:visible; 
     } 
    ` 

}) 

export class Maps { 
    map; 
    snappedCoordinates = []; 
    points:string = ""; 
    map:Map; 
    drawingManager; 
    placeIdArray = []; 
    polylines = []; 
    markers = []; 
    placeIds = []; 
    infoWindows = []; 
    snappedPolyline; 
    showMap = false; 

    lineSymbol = { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     strokeColor: '#005db5', 
     strokeWidth: '#005db5' 
    }; 

    mapOptions = { 
     zoom: 15, 
     center: {lat: 37.38658313258027, lng: -122.05207727132837}, 

    }; 

    constructor(private _dom:BrowserDomAdapter, private _mapService:MapsService, private _mapIconService:mapsIconService) { 
     // google.maps.visualRefresh = true; 
    } 


    drawSnappedPolyline(snappedCoordinates) { 
     this.snappedPolyline = new google.maps.Polyline({ 
      path: snappedCoordinates, 
      strokeColor: 'black', 
      strokeWeight: 3 
     }); 
     this.polylines.push(this.snappedPolyline); 
    } 


    animateCircle(polyline) { 
     var count = 0; 
     // fallback icon if the poly has no icon to animate 
     var defaultIcon = [ 
      { 
       icon: this.lineSymbol, 
       offset: '100%' 
      } 
     ]; 
     window.setInterval(function() { 
      count = (count + 1) % 300; 
      var icons = defaultIcon; 
      icons[0].offset = (count/3) + '%'; 
      polyline.set('icons', icons); 
     }, 300); 
    } 

    setMarker(lat, lng, id) { 
     var marker = new google.maps.Marker({ 
      position: this.map.getCenter()/*new google.maps.LatLng(lat, lng)*/, 
      icon: {url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(this._mapIconService.getIcon(id))}, 
      draggable: false, 
      map: this.map 
     }); 
    } 

    SetAllMarkers(points) { 
     for (var i in points) { 
      this.setMarker(points[i].lat, points[i].lng, points[i].id); 
     } 
    } 


    ngOnInit() { 


     this.map = new google.maps.Map(this._dom.query("#map"), this.mapOptions); 
     google.maps.event.trigger(this.map, 'resize'); 

     this._mapService.goData().subscribe(data=> { 
     this.drawSnappedPolyline(this._mapService.processSnapToRoadResponse(data)); 
     this.setMarker(37.38658313258027, -122.05207727132837, 0); 
     this.snappedPolyline.setMap(this.map); 
     this.animateCircle(this.snappedPolyline); 
     }); 

    } 


} 

любой иметь представление об этом? спасибо заранее

Answer 1

проблема семантическая UI, потому что он вставить код в «толкача», и эта причина проблемы с всеми элементами