Map location changes as page transitions from loading stage to main page (Same coordinates)

I am working on a web application that uses google maps API with quite alot of custom data on it, causing the load time to be quite long.

Because of the load time I am working on making the UI of the loading page better, I want to add a google map on it which has the exact coordinates as the main map.

The loading-map renders fine with the coordinates I want, but when it then transitions into the main map the location changes and I have no idea why this is happening (this doesn't happen if I remove the loading-map script).

I am using Ember for the front-end and Laravel for the back-end.

This is the code snippet I have placed in the loading-map Laravel blade page:

<div id="map"></div>

<script>
function init() {
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); 
    var mapOptions = {
        center: myLatlng,
        zoom: 6, //Initial zoom
        maxZoom: 15 // Maximum zoom
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
</script>

 <script src="http://ift.tt/29jAQqU"
    async defer></script>
</div>

When I remove this from the Laravel blade it will render the main map as usual with the correct coordinates, this has really confused me I can't think at all why the map would shift when the coordinates are set, the zoom is set, the max zoom is set.

My assumption is it has something to do with the Ember side of the application but I have no clue why. It's supposed to render the map at a zoom level of 6 over the UK but it's loads the map over Germany.

Any ideas at all if you have experience working within a Ember/Laravel environment would be great. I feel like I'm banging my head against a brick wall with this.

I've also added in below the root.js for the main map from the ember side of the application.

"use strict";

// --------------------------------------------------
// Imports
// --------------------------------------------------
import $ from 'jquery';
import Point from '../../lib/maps/point.js';
import ElasticMixin from '../../mixins/elastic.js';
import { debounce } from '../../util.js';
import { Component, Binding, run } from 'ember';
import App from 'app';

// --------------------------------------------------
// Main
// --------------------------------------------------
var GsMapComponent = Component.extend(ElasticMixin, {

// Static CSS class names.
classNameBindings: ['trackMap', 'trackMiniMap'],

trackMap: true,

trackMiniMap: false,

// Should expand horizontally.
resizeRight: true,

// Should expand vertically.
resizeDown: true,

// Central latitude.
lat: 54.559322,

// Central longitude.
lng: -4.174804,

// The starting zoom level.
initialZoom: 6,

// The maximum zoom to use.
maxZoom: 15,

// The current ember markers to display on the map.
markers: null,

// The Speed of the journey report markers
markerSpeed: 300,

// The current regions to display on the map.
regions: null,

// View class to use to render out popup widget content.
infoViewClass: null,

// If the map should rerender.
isDirty: false,

// Bindings from component to map. Require delay in activating.
_bindings: function() {
    return [];
}.property(),

mode: null,

onClick: null,

onDragEnd: null,

onShapeComplete: null,

onShapeChange: null,

points: null,

droppedPin: null,

showGeofences: false,

showPois: false,

pois: null,

// Called when map is inserted into page.
didInsertElement: function() {
    var map = this.get('map');
    var lat = this.get('lat');
    var lng = this.get('lng');
    var bindings = this.get('_bindings');
    var clearMarkers = this.get('clearGoogleMarkers');

    this._super();

    map.set('centerPoint', Point.create({ lat: lat, lng: lng }));

    // Bindings to connect component properties with those of the underlying
    // map.
    bindings.pushObject(Binding.oneWay('infoViewClass').to('map.infoViewClass').connect(this));
    bindings.pushObject(Binding.oneWay('initialZoom').to('map.initialZoom').connect(this));
    bindings.pushObject(Binding.oneWay('maxZoom').to('map.maxZoom').connect(this));
    bindings.pushObject(Binding.oneWay('markers').to('map.markers').connect(this));
    bindings.pushObject(Binding.oneWay('markerSpeed').to('map.markerSpeed').connect(this));
    bindings.pushObject(Binding.oneWay('regions').to('map.regions').connect(this));
    bindings.pushObject(Binding.oneWay('mode').to('map.mode').connect(this));
    bindings.pushObject(Binding.oneWay('onClick').to('map.onClick').connect(this));
    bindings.pushObject(Binding.oneWay('onDragEnd').to('map.onDragEnd').connect(this));
    bindings.pushObject(Binding.oneWay('onShapeComplete').to('map.onShapeComplete').connect(this));
    bindings.pushObject(Binding.oneWay('onShapeChange').to('map.onShapeChange').connect(this));
    bindings.pushObject(Binding.oneWay('points').to('map.points').connect(this));
    bindings.pushObject(Binding.oneWay('droppedPin').to('map.droppedPin').connect(this));
    bindings.pushObject(Binding.oneWay('showGeofences').to('map.showGeofences').connect(this));
    bindings.pushObject(Binding.oneWay('showPois').to('map.showPois').connect(this));
    bindings.pushObject(Binding.oneWay('pois').to('map.pois').connect(this));


    this.forceResize();
    run.next(this, function() {
        map.attach(this.get('element'));
    });
},

// Called when the map is removed from the page.
willDestroyElement: function() {
    this._super();
    this.get('map').detach();
    this.get('_bindings').invoke('disconnect', this);
},

// Re-focus the map whenever the content changes (only if there is some).
// Or when content moves.
onContentChange: function() {
    if (!this.get('markers.length')) {
        return;
    }

    this.get('map').center();
}.observes('markers.[]'),

// Called if dirty flag changes.
onDirtyChange: function() {
    var map;

    if (this.get('isDirty')) {
        this.willDestroyElement();
        this.didInsertElement();

        this.set('isDirty', false);
    }
}.observes('isDirty').on('init'),

// Resize map if needed.
_resize: function() {
    var map = this.get('map');
    this._super();

    if (map.get('isAttached')) {
        map.resize();
    }
}

});


 // --------------------------------------------------
 // Exports
 // --------------------------------------------------
App.GsMapComponent = GsMapComponent;
export default GsMapComponent;