title: Using variables for longitude and latitude with google maps api
body: <p>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.</p>
  
  <p>I need the maps to populate from the value of two input elements.</p>
  
  <p>It doesn't work with variables but if you change the variables in the function to numbers it works perfectly.</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map-canvas {
    height: 30em;
    width: 30em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"&gt;&lt;/script&gt;
  &lt;form&gt;
    &lt;input type="text" id="lng" name="lng" value="30"&gt;
    &lt;input type="text" id="lat" name="lat" value="40"&gt;
  &lt;/form&gt;
  
  &lt;div id="map-canvas"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>