grey box google maps and angular 2 - google-maps

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