Не удалось повторно инициализировать карты Google, получив широту и долготу из переменных

У меня есть следующий HTML на моей веб-странице:

<p id = "info-1"> My Title</p>
<button type = "button" id = "showMap-1" class = "btn btn-primary btn-xs">Show On Map</button>
<input type = "hidden" id = "lat-1" value = "32.3396528">
<input type = "hidden" id = "lon-1" value = "-111.0118179">

И у меня есть следующий скрипт:

$(document).on( 'click','button[id^ = "showMap-"]', function(event) {
    event.preventDefault();
    var arr = this.id.split('-');
    var count = arr[1];
    var latVal = $("#lat-"+count).val();
    var lonVal = $("#lon-"+count).val();
    var titleVal = $("#info-"+count).text();
    var newCenter = {lat: latVal, lng: lonVal};
    var map = new google.maps.Map(
    document.getElementById('map'), {zoom: 4, center: newCenter});
    var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal});
});

Я пытаюсь повторно инициализировать карту Google на основе выбранного местоположения. Но я получаю следующую ошибку:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

Но тот же скрипт работает, если я устанавливаю значения напрямую

var latVal = -25.344;
var lonVal = 131.036;
var titleVal = "test";
var newCenter = {lat: latVal, lng: lonVal};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: newCenter});
var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal}); 

Я должен установить значения динамически и повторно инициализировать карту на основе выбранного местоположения.