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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.