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

Question

На моей веб-странице есть следующий 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: не LatLng или LatLngLiteral: in свойство lat: не число

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

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}); 

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

Answer 1

Как говорится в ошибке, latVal и lonVal не являются числами.Они представляют собой строку.

Вы можете преобразовать строку в число, поставив + перед строкой.Как:

var latVal = +$("#lat-"+count).val();
var lonVal = +$("#lon-"+count).val();

.. Или вы также можете использовать parseFloat() как:

var latVal = parseFloat( $("#lat-"+count).val() );
var lonVal = parseFloat( $("#lon-"+count).val() );