2 maps (one for loading page & one for main application) coordinates changing themselves? (Laravel)

I am trying to create a loading page in Laravel while the main application renders.

The loading page is simply a map using the same coordinates as the map on the main API.

The loading map will render fine with the coordinates I want, the code is below.

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

<script>
function init() {
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates
    var mapOptions = {
        center: myLatlng,
        zoom: 6, // The initial zoom
        maxZoom: 15 // Maximum zoom
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div
}
</script>

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

But once the main application is rendered and transitions into the main map the map shifts slightly and the initial load is looking at Germany even though it's the exact same coordinates as the loading map (it should be looking at the UK). When I comment out my loading map the issue of it shifting to Germany goes away, it'll render the correct coordinates.

In the console it says:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Does anyone know of a fix for this weird bug? Thanks in advance.