IndexedDB error: Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned

Question

I am using the Google maps API along with the HTML 5 geolocation API to display my position as a marker on a map. Once this marker is displayed I have a simple on marker double click function that saves a new marker to my current position using indexedDB. Everything goes well until the Object is about to be stored, then I recieve the message "Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned." in the console. my code is as follows:

        function initialize() {
          var mapProperties = { // Set the maps properties
            center:new google.maps.LatLng(55.8580,-4.2590),
            zoom:8,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };    

          var map=new google.maps.Map(document.getElementById("map-overview"),mapProperties);   //Display the map in the map-overview div








          function NogeoLocation(e) {   //A function to handle users that do not have Geolocation
          if (e) {
            var content = 'Error: Unfortunately the Geolocation service failed.';
          } else {
            var content = 'Error: Sorry, Your web browser doesn\'t support geolocation.';
          }

            var options = { //Error options
            map: map,
            position: new google.maps.LatLng(60, 105), //Set new position on Error
            content: content    //Display error message
          };

          var infowindow = new google.maps.InfoWindow(options); 
          map.setCenter(options.position);


         }  


           //Using HTML5 Geolocation
          if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var position = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);







            var contentString = "Here is your current location!" + "<button onclick='myBtn()'>Save</button>"

             var infowindow = new google.maps.InfoWindow({
              content: contentString
          });


          var marker = new google.maps.Marker({
              position: position,
              map: map,
              title: 'My House'
          });




            google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });

        var db;

        function indexedDBOk() {
            return "indexedDB" in window;
        }

        google.maps.event.addListener(marker, 'dblclick', function() {

        alert("dbl Click");

        console.log(position);



            if(!indexedDBOk) return;

            var openRequest = indexedDB.open("idarticle_people",1);

            openRequest.onupgradeneeded = function(e) {
                var thisDB = e.target.result;

                if(!thisDB.objectStoreNames.contains("people")) {
                    thisDB.createObjectStore("people");
                }
            }

            openRequest.onsuccess = function(e) {
                console.log("running onsuccess");

                db = e.target.result;




            var transaction = db.transaction(["people"],"readwrite");
            var store = transaction.objectStore("people");

            //Define a marker
             var marker = {
             position: position,
             map: map,
            title: 'New Marker'
         }
         console.log(marker);
         console.log("about to perform add");
            //Perform the add
            var request = store.put(marker,1);

            console.log("added");

            request.onerror = function(e) {
                console.log("Error",e.target.error.name);
                //some type of error handler
            }

            request.onsuccess = function(e) {
                console.log("Woot! Did it");
            }



            }

            openRequest.onerror = function(e) {
                //Do something for the error
            }





        });













              map.setCenter(position);
            }, function() {
              NogeoLocation(true); // Refers to NogeoLocation function
            });
          } else {
            // If the user's browser doesn't support Geolocation
            NogeoLocation(false);
          } //End of HTML5 GeoLocation










          } // End of the function that initializes Google Maps


        google.maps.event.addDomListener(window, 'load', initialize);   //On page load, execute initialize()

Answer 1

marker can't be cloned because the object stored in the map-property contains a reference to a DOMNode(#map-overview), which can't be cloned (see:Things that don't work with structured clones ).

Remove the map-property, it will not be re-usable at all because the google.maps.Map-instance will not exist when you retrieve the marker later.

Answer 2

I discovered that the reason for the error was to try to add an object that was not recognized to a cache.

this.storage.set ("page", HomePage);

I switched to a string and it worked

this.storage.set ("page", "HomePage");