Używanie zmiennych dla długości i szerokości geograficznej z mapami google api

Question

Właśnie zacząłem używać google maps API dla przeglądarek, ale wydaje mi się, że nie działa, gdy umieszczam zmienne w miejscach długości/szerokości geograficznej zamiast liczb bezpośrednio .

Potrzebuję map do wypełnienia z wartości dwóch elementów wejściowych.

Nie działa ze zmiennymi, ale jeśli zmienisz zmienne w funkcji na liczby, to działa idealnie.

Tak, mam świadomość, że nie powinienem publikować mojego klucza API, ale jest to taki, którego używam na koncie zewnętrznym do testowania i skończę, usuwając go.

function initialize() { 
 
     var userLng = $('#lng').val(); 
 
\t var userLat = $('#lat').val(); 
 
    
 
\t var mapOptions = { 
 
\t  center: { lat: userLat, lng: userLng }, 
 
\t  zoom: 8 
 
\t }; 
 
\t var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 30em; 
 
    width: 30em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script> 
 
<form> 
 
    <input type="text" id="lng" name="lng" value="30"> 
 
    <input type="text" id="lat" name="lat" value="40"> 
 
</form> 
 

 
<div id="map-canvas"></div>

Answer 1

Używasz ciągi, spróbuj z pływaków:

var userLng = parseFloat($('#lng').val()); 
var userLat = parseFloat($('#lat').val()); 
var mapOptions = { 
     center: { lat: userLat, lng: userLng }, 
     zoom: 8 
    }; 

Answer 2

Ty shuld parseFloat() Twoje wartości wejściowe, trzeba nie ciąg liczb.

function initialize() { 
 
     var userLng = parseFloat($('#lng').val()); 
 
\t var userLat = parseFloat($('#lat').val()); 
 
    
 
\t var mapOptions = { 
 
\t  center: { lat: userLat, lng: userLng }, 
 
\t  zoom: 8 
 
\t }; 
 
\t var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 30em; 
 
    width: 30em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script> 
 
<form> 
 
    <input type="text" id="lng" name="lng" value="30"> 
 
    <input type="text" id="lat" name="lat" value="40"> 
 
</form> 
 

 
<div id="map-canvas"></div>

Edit, nie sr parseFloat parseInt