SmoothState with Custom Google Map

I know this question has been asked a few times before, but looking through the answers I still can't figure out how to fix the issue, Would someone be able to help?

My map works when I refresh the page, but when I navigate to it from any other page the map doesn't load, as smoothState doesn't reload the page.

I've got the rest of my jS working, it's just the maps that won't load unless I refresh the page.

My jS for smoothState is: ``$(document).ready(function () {

var $body = $('body'), $main = $('#main'), $site = $('html, body'), transition = 'fade', smoothState;

smoothState = $main.smoothState({
    onBefore: function ($anchor, $container) {
        var current = $('[data-viewport]').first().data('viewport'),
            target = $anchor.data('target');
        current = current ? current : 0;
        target = target ? target : 0;
        if (current === target) {
            transition = 'fade';
        } else if (current < target) {
            transition = 'moveright';
        } else {
            transition = 'moveleft';
        }
    },
    onStart: {
        duration: 400,
        render: function (url, $container) {
            $main.attr('data-transition', transition);
            $main.addClass('is-exiting');
            $site.animate({scrollTop: 0});
        }
    },
    onReady: {
        duration: 0,
        render: function ($container, $newContent) {
            $container.html($newContent);
            $container.removeClass('is-exiting');
        }
    },
    onAfter: function ($container) {
        $container.onPageLoad();
    },
}).data('smoothState');

});``

and My google map:

``function init_map() { var myOptions = { zoom: 18, backgroundColor: "#212121",

        center: new google.maps.LatLng(53.4864171, -2.2338110000000597),
        mapTypeId: google.maps.MapTypeId.ROADMAP,

        styles: [
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#ccc'}]},
            {
                featureType: 'administrative.locality',
                elementType: 'labels.text.fill',
                stylers: [{visibility: 'none'}]
            },
            {
                featureType: 'poi',
                elementType: 'labels.text.fill',
                stylers: [{visibility: 'none'}]
            },
            {
                featureType: 'poi.park',
                elementType: 'geometry',
                stylers: [{color: '#263c3f'}]
            },
            {
                featureType: 'poi.park',
                elementType: 'labels.text.fill',
                stylers: [{visibility: 'none'}]
            },
            {
                featureType: 'road',
                elementType: 'geometry',
                stylers: [{color: '#38414e'}]
            },
            {
                featureType: 'road',
                elementType: 'geometry.stroke',
                stylers: [{color: '#212a37'}]
            },
            {
                featureType: 'road',
                elementType: 'labels.text.fill',
                stylers: [{color: '#9ca5b3'}]
            },
            {
                featureType: 'road.highway',
                elementType: 'geometry',
                stylers: [{color: '#ccc'}]
            },
            {
                featureType: 'road.highway',
                elementType: 'geometry.stroke',
                stylers: [{color: '#1f2835'}]
            },
            {
                featureType: 'road.highway',
                elementType: 'labels.text.fill',
                stylers: [{color: '#ccc'}]
            },
            {
                featureType: 'transit',
                elementType: 'geometry',
                stylers: [{color: '#2f3948'}]
            },
            {
                featureType: 'transit.station',
                elementType: 'labels.text.fill',
                stylers: [{color: '#ccc'}]
            },
            {
                featureType: 'water',
                elementType: 'geometry',
                stylers: [{color: '#17263c'}]
            },
            {
                featureType: 'water',
                elementType: 'labels.text.fill',
                stylers: [{color: '#515c6d'}]
            },
            {
                featureType: 'water',
                elementType: 'labels.text.stroke',
                stylers: [{color: '#17263c'}]
            }
        ]
    };

    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng()
    });
    infowindow = new google.maps.InfoWindow({
        content: ''
    });
    google.maps.event.addListener(
        marker, 'click', function () {
            infowindow.open(map, marker);
        }
    );
    infowindow.open(map, marker);
}

google.maps.event.addDomListener(window, 'load', init_map);``

miguel-perez / smoothState.js

SmoothState with Custom Google Map #359