title: IndexedDB error: Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned
body: <p>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 "<strong>Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned.</strong>" in the console. my code is as follows:</p>
  
  <pre><code>        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!" + "&lt;button onclick='myBtn()'&gt;Save&lt;/button&gt;"
  
               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()
  </code></pre>