I've just started using the google maps API for browsers but I can't seem to get it to work when I place variables in the longitude/latitude places instead of numbers directly.

I need the maps to populate from the value of two input elements.

It doesn't work with variables but if you change the variables in the function to numbers it works perfectly.

Yes I'm aware I shouldn't post my API key but this is one I use on an off account for testing and I will end up deleting it.

function initialize() {
        var userLng = $('#lng').val();
	var userLat = $('#lat').val();
  
	var mapOptions = {
	    center: { lat: userLat, lng: userLng },
	    zoom: 8
	};
	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=".1.1/jquery.min.js"></script>
<script src=""></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>

I've just started using the google maps API for browsers but I can't seem to get it to work when I place variables in the longitude/latitude places instead of numbers directly.

I need the maps to populate from the value of two input elements.

It doesn't work with variables but if you change the variables in the function to numbers it works perfectly.

Yes I'm aware I shouldn't post my API key but this is one I use on an off account for testing and I will end up deleting it.

function initialize() {
        var userLng = $('#lng').val();
	var userLat = $('#lat').val();
  
	var mapOptions = {
	    center: { lat: userLat, lng: userLng },
	    zoom: 8
	};
	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>

• javascript
• google-maps

2 Answers 2

You are using strings, please try with floats:

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

You shuld parseFloat() your input values, you need numbers not string.

function initialize() {
        var userLng = parseFloat($('#lng').val());
	var userLat = parseFloat($('#lat').val());
  
	var mapOptions = {
	    center: { lat: userLat, lng: userLng },
	    zoom: 8
	};
	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, sr parseFloat not parseInt