SmoothStateJS with Custom Google Map

Question

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.

I've read almost all of the posts on github regarding this and a few on stackoverflow, but I keep going round in circles and not getting anyway.

My js for smoothState and google maps

No grey spaces or coloured boxes etc, and no errors in console.

$(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');
});

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);

Answer 1

This is because when the other page than contact is loaded the #gmap_canvas is not exist yet. You can see it if you will pause on this line:

So the solution is to init the map only when this div is exist and the map not yet initialised.

$(document).ready(function() {
  var $body = $('body'),
    $main = $('#main'),
    $site = $('html, body'),
    transition = 'fade',
    smoothState,
    // 1. declare this variable to know if the map is initialised
    initialisedMap = false;

  smoothState = $main.smoothState({
    //...
    onReady: {
      duration: 0,
      render: function($container, $newContent) {
        $container.html($newContent);
        $container.removeClass('is-exiting');
        // 2. call init_map() 
        init_map();
      }
    }
  });
});

function initMap() {
  // 3. if the map container is not exist do nothing
  if (!document.querySelector('#gmap_canvas')) {
    return;
  }
  //...
}