grey box google maps and angular 2

Question

I have a problem with angular 2 and the API v3 of google maps, the problem is that when I load the page through the router outlet, the map is a grey box, but when I refresh the page the map load correctly, I'm using the js library import on the index page, and the map is loaded in a component.

this is the view of the map

I tried with trigger rezise but don't work. I think that is a problem with the library load or similar.

this is the code:

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

    }


}

any one have a idea about this? thank in advance

Answer 1

the problem was semantic UI, because he insert the code into a "pusher" and this cause a problem with the all elements