OpenLayers 3 geolocation update

Question

I'm having an issue with geolocation from OpenLayers. I used the example from http://openlayers.org/en/latest/examples/geolocation.html It works fine until I leave the page I'm on and then try to enter the page again. I don't get my location until I refresh the page. I get the following error:

 angular.js:14362 Possibly unhandled rejection: Your maps are not found we have checked the maximum amount of times. :)

I'm using an Angular,

 <a href="" ui-sref="venues.create">  Create New Venue   </a>

Map code when I am on the venues create page :

var map,geolocation;

    var view = new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 17
    });

    var raster = new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'ApwK1WfFWCTGox_FfcbOJrt5b0UBoem7K87N0lXgy6H9vC2ygvEg4iDP4dtFP6_o',
        imagerySet: 'Road',
        maxZoom: 19
        }),
        preload: Infinity,
    });

    var source = new ol.source.Vector({wrapX: false});  
    var vector = new ol.layer.Vector({
      source: source
    });

            map = new ol.Map({
              layers: [raster, vector],
              // Improve user experience by loading tiles while dragging/zooming. Will make
              // zooming choppy on mobile or slow devices.
              loadTilesWhileInteracting: true,
              target: 'map',
              view: view,
              controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                  collapsible: false
                  })
              }),
          });
var init = function (){

        geolocation = new ol.Geolocation({
            projection: map.getView().getProjection(),
            tracking: true,
            trackingOptions: {
                enableHighAccuracy: true,
                maximumAge: 2000
            }
        });

        // handle geolocation error.
        geolocation.on('error', function (error) {
            console.log = error.message;

        });
        var iconFeature = new ol.Feature();
        var iconSource = new ol.source.Vector({
            features: [iconFeature]
        });

        var iconStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: '#3399CC'
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                })
            })
        });

        var iconLayer = new ol.layer.Vector({
            source: iconSource,
            style: iconStyle
        });
        map.addLayer(iconLayer);
        geolocation.on('change', function (evt) {


            var pos = geolocation.getPosition();
            iconFeature.setGeometry(new ol.geom.Point(pos));
            view.setCenter(pos);
            view.setZoom(18);
        });


    }
    init();

I created a plunker to demonstrate the issue/

Plunker will open Route 1 as default, if you go to Route 2 the map will load with your location, then go back to route 1 and then back to route 2 location will not show/

https://plnkr.co/edit/s4gLV3xaENThGiXhCi1D

Answer 1

I finally managed to sort it out thanks to a friend

in the venue state config add data.currentlocation

state('route2', {
      url: "/route2",
      data: {
        currentLocation: null
      },

we store geoposition is state.data and inside init function add the following

if ($state.current.data.currentLocation != null) {

            updateLoc($state.current.data.currentLocation);
          }

          geolocation.on('change', function(evt) {
            var pos = $state.current.data.currentLocation = geolocation.getPosition();
            updateLoc(pos);
          });

          function updateLoc(pos) {
            iconFeature.setGeometry(new ol.geom.Point(pos));
            view.setCenter(pos);
            view.setZoom(18);
          }

Working example here https://plnkr.co/edit/MVBqWKgjPMmuylcSePDq