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
        geolocation.on('change', function (evt) {

            var pos = geolocation.getPosition();
            iconFeature.setGeometry(new ol.geom.Point(pos));


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/


1 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) {


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

          function updateLoc(pos) {
            iconFeature.setGeometry(new ol.geom.Point(pos));

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

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .