Load coordinates to Google Maps from localstorage with Google Maps API

When a user clicks a button, it will keep refreshing their location and pushing it to an array and in the end when the user clicks another button,it should show their path from the time the start button was clicked:

    var refreshIntervalId = setInterval(recordtrip, 5000);

function recordtrip(){
if (navigator.geolocation) {        
    navigator.geolocation.getCurrentPosition(function(position){
    x = position;

    triplog.push(new google.maps.LatLng(x.coords.latitude,x.coords.longitude));

$('#stoptrip').click(function(){
clearInterval(refreshIntervalId);

});
});
$('#showtrip').click(function(){
var lenoftrip = triplog.length - 1 ;

var mapProp = {
  center:triplog[lenoftrip],
  zoom:20,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:triplog[lenoftrip],
  });

marker.setMap(map);
var flightPath=new google.maps.Polyline({
  path:triplog,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

flightPath.setMap(map);

});

It works well before saving to localstorage, but after saving and loading it,it doesn't work anymore. I realized then when i call the array from localstorage,it removes the new google.maps.LatLng. this is the saving function:

$('#savetrip').click(function(){
localStorage.setItem(titleoftrip,JSON.stringify(triplog));
alert("Saved!");
triplog = [];
}

How do you fix this?