Issue with angular2-google-maps

locations.component.html

<!-- Also reduced for readability. -->

<div style="padding: 20px;">
  <div class="row">
    <h4 style="color: grey;">Locations</h4>
  </div>

  <div class="row">
    <div class="col s12">
      <ul class="tabs" materialize="tabs">
        <li class="tab col s3"><a href="#dynamic-map">Dynamic Map</a></li>
      </ul>
    </div>
   
    <div id="dynamic-map" class="col s12">

<!--    We even have a checker in here only adding the element if we were able to get long/lat    -->
      <div *ngIf="_displayLocations?.length > 0">
        <h5>This should be a map</h5>

        <sebm-google-map [latitude]="_lastLatitude" [longitude]="_lastLongitude" style="height: 300px;" [zoom]="15">
          <sebm-google-map-marker [latitude]="_lastLatitude" [longitude]="_lastLongitude"></sebm-google-map-marker>
        </sebm-google-map>
      </div>
      
    </div>
  </div>

</div>


<!-- Here's the form getting passed the same long/lat used above, just in case you're curious... -->
<div *ngIf="_toggleForm">

  <div class="row" style="padding-top: 20px; padding-bottom: 100px;">
    <div class="col s6 offset-s1">
      <new-location-form
        [latitude]="_lastLatitude"
        [longitude]="_lastLongitude"
        (formSubmitted)="toggleForm()"
      ></new-location-form>
    </div>
  </div>
</div>

locations.component.ts

// lots of imports

@Component({
  selector: 'locations',
  templateUrl: './locations.component.html',
  styleUrls: ['./locations.component.css']
})
export class LocationsComponent implements OnInit, OnDestroy {

  private _lastLongitude: number = null;
  private _lastLatitude: number = null;

  constructor(
    private _locationsService: LocationsService,
    private _store: AppStore,
  ) { }

  ngOnInit() {

    this._store.changes.takeUntil(this._destroyed$).subscribe(s => {
      this._organizationId = s.currentOrgId;


      this._locationsService.findForOrganizationId(this._organizationId).takeUntil(this._destroyed$).subscribe(locations => {

        if (locations.length > 0) {
          let mostRecentLocation = locations.sort((a, b) => {
            return a._createdAt - b._createdAt;
          }).pop();

          // Here's the important bit proving we have real long/lot being passed to the map.
          this._lastLatitude = mostRecentLocation.latitude;
          this._lastLongitude = mostRecentLocation.longitude;

          console.log("coords are: ", this._lastLongitude, this._lastLatitude);
        }

      });
    });
  }

  // lots of code ommitted for readability

}

module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LocationsComponent } from './locations/locations.component';
import {locationsRouting} from "./locations.routing";
import { LocationComponent } from './location/location.component';
import { NewLocationComponent } from './new-location/new-location.component';
import { NewLocationFormComponent } from './forms/new-location-form/new-location-form.component';
import {Md2Module} from "md2";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {CustomFormsModule} from "ng2-validation";
import { LocationsListComponent } from './presentation/locations-list/locations-list.component';
import {MaterializeModule} from "angular2-materialize";
import {AgmCoreModule} from "angular2-google-maps/core";

@NgModule({
  imports: [
    CommonModule,
    locationsRouting,
    Md2Module.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    CustomFormsModule,
    MaterializeModule,
    AgmCoreModule.forRoot({
      apiKey: 'mine'
    })
  ],
  declarations: [LocationsComponent, LocationComponent, NewLocationComponent, NewLocationFormComponent, LocationsListComponent]
})
export class LocationsModule { }

new-location-form.component.html

<form [formGroup]="myForm">
<!--  Again, redically reduced for relevance and readability  -->
  
  <div>

    <sebm-google-map [latitude]="latitude" [longitude]="longitude" style="height: 300px;" [zoom]="15">
      <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"></sebm-google-map-marker>
    </sebm-google-map>
  </div>





</form>

new-location-form.component.ts

// imports

@Component({
  selector: 'new-location-form',
  templateUrl: './new-location-form.component.html',
  styleUrls: ['./new-location-form.component.css']
})
export class NewLocationFormComponent implements OnInit {

  @Input() location: Location = new Location();

  // This is really the only important part - receiving the same exact long/lat as used to display the map in the locations.component.html
  @Input() longitude: number = null; // <- yes I know these are null, but they get overridden when set by the template this template is created from...and can be seen in the logs...besides this is the map that works...
  @Input() latitude: number = null;
  @Input() mode: string = null;

  constructor(
    private _fb: FormBuilder,
    private _locationsService: LocationsService,
  ) { }

 

}