CODEWITHSUNDEEP
javascriptgoogle-maps
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Using variables for longitude and latitude with google maps api

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>

Upvotes: 8

Views: 11645

Answers (2)

Griva
Griva

Reputation: 1738

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

Upvotes: 2

n00dl3
n00dl3

Reputation: 21584

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

Upvotes: 14

Related Questions