Utilizzo di variabili per longitudine e latitudine con google maps api

Question

Ho appena iniziato a utilizzare l'API di google maps per i browser ma non riesco a farlo funzionare quando inserisco le variabili nei posti di longitudine/latitudine invece dei numeri direttamente .

Ho bisogno che le mappe vengano compilate dal valore di due elementi di input.

Non funziona con le variabili ma se si modificano le variabili nella funzione in numeri funziona perfettamente.

Sì, sono a conoscenza del fatto che non dovrei pubblicare la mia chiave API ma questa è una che uso su un account spento per il test e finirò per eliminarla.

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

Si sta utilizzando corde, prova con i galleggianti:

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

Answer 2

È shuld) i valori immessi parseFloat (, non c'è bisogno di numeri stringa.

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>

Modifica, sr parseFloat non parseInt