primefaces some components blank - jsf

Question

I created a local website to import a string of GPS coordinates.
The layout is basic but consists mostly of primefaces components:
p:layouts
p:layoutUnit
p:selectOneList
p:gMap
p:lineChart
after some coding I noticed the gMap and lineChart weren't working anymore. At first I thought it was cause of the empty objects related to it (defaultMapModel for gMap and CartesianChartModel for lineChart). Even creating new objects and associating example data to it, these components stay blank.
Even removing the model attribute in the gMap doesn't seem to work.
Here are the codes I think matters:
index.xhtml:
<p:layoutUnit position="west" size="255" header="Options" resizable="false" closable="false" collapsible="true">
<div class="row-fluid">
<h4><i class="icon-calendar icon-white"></i>Calendar</h4>
<p:calendar mode="inline" id="inlineCal"/>
</div>
<div class="row-fluid">
<h4><i class="icon-random icon-white"></i>Tracks</h4>
<h:form prependId="false">
<p:selectOneListbox id="basic" style="width: 97%;" value="#{geoTrackController.geoTrack}">
<f:selectItems value="#{geoTrackController.allGeoTracks}" itemLabel="#{geoTrackController.geoTrack.id}" itemValue="#{geoTrackController.geoTrack.id}" />
</p:selectOneListbox>
</h:form>
</div>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout fullPage="false">
<p:layoutUnit position="south" size="200" header="Speed (km/h)" resizable="false" closable="false" collapsible="true">
<p:lineChart id="linear" value="#{geoTrackController.linearModel}" legendPosition="e" zoom="true" minY="0" maxY="130" style="height:140px" widgetVar="chart" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:gmap id="geomap" center="50.52, 4.22" zoom="7" type="HYBRID" style="width:100%;height:97%;" model="#{geoTrackController.mapModel}" streetView="true" />
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
Controller
#Named
#SessionScoped
public class GeoTrackController implements Serializable {
#EJB
private GeoTrackBean tbean;
private GeoTrack geoTrack = new GeoTrack();
private CartesianChartModel linearModel;
private MapModel map;
;
private String center = "50.8333, 4";
private String gpsDump;
#PostConstruct
public void init() {
createMapModel();
createLinearModel();
}
public GeoTrackController() {
}
public GeoTrack getGeoTrack() {
return geoTrack;
}
public void setGeoTrack(GeoTrack geoTrack) {
this.geoTrack = geoTrack;
}
public void trackChangeEvent(ValueChangeEvent e) {
createMapModel();
createLinearModel();
}
public List<GeoTrack> getAllGeoTracks() {
return tbean.getAllGeoTracks();
}
public String getGpsDump() {
return gpsDump;
}
public void setGpsDump(String gpsDump) {
this.gpsDump = gpsDump;
}
public String getCenter() {
return center;
}
public void submit() {
tbean.addOrUpdateGeoTrack(geoTrack);
createMapModel();
createLinearModel();
}
public MapModel getMapModel() {
return map;
}
public void onPolylineSelect(OverlaySelectEvent event) {
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Polyline Selected", null));
}
public void addMessage(FacesMessage message) {
FacesContext.getCurrentInstance().addMessage(null, message);
}
public CartesianChartModel getLinearModel() {
return linearModel;
}
private void createMapModel() {
map = new DefaultMapModel();
if (this.geoTrack != null) {
Polyline path = new Polyline();
LatLng temp = new LatLng(0.00, 0.00);
for (GeoCoordinate c : this.geoTrack.getCoordinates()) {
LatLng coord = new LatLng(c.getLatitude(), c.getLongitude());
if (!temp.equals(coord)) {
path.getPaths().add(coord);
}
}
path.setStrokeWeight(4);
path.setStrokeColor("#FF9900");
path.setStrokeOpacity(0.7);
map.addOverlay(path);
}
}
private void createLinearModel() {
linearModel = new CartesianChartModel();
LineChartSeries speedChart = new LineChartSeries();
speedChart.setLabel("Speed");
if (this.geoTrack != null) {
for (GeoCoordinate c : this.geoTrack.getCoordinates()) {
speedChart.set(c.getDateTime().toString(), c.getSpeed());
}
linearModel.addSeries(speedChart);
} else {
speedChart.set(new Date(), 0);
}
}
}