Google map not loading

Google map not loading

Am feeding lat and lng variables to google map from dynamic select/options. I am seeing that the correct lat and lng are being produced but when fed to mapOptions map doesn't load.



Here is my code:

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Google Maps API getting Lat and Long with Geocoding</title>
        
       <link rel="stylesheet " type="text/css" href="css/loadList.css" />
       <link rel="stylesheet " type="text/css" href="css/gps.css" /> 
       
        <script src="../jquery/jquery-2.1.4.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script type="text/javascript" src="../jquery/getHtmlParams.js"></script>     
     
    <script type="text/javascript">
          var name;
          var index;
          var address;
          var lat;
          var lng;
          
    $(document).ready(function(){

    loadlist($('#latlng').get(0),                   /*the 'select' object*/
     'getMarkers.php?getlist=latlng', 'name');
         
    function loadlist(selobj, url, nameattr) {

        $(selobj).empty();
        $.getJSON(url, {}, function(data) {

            $.each(data, function(i,obj) {          
                $(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
            }); //each
        
      $("#latlng").change(function(){
     
          name=$(this).val();
          index=this .selectedIndex;
          address=data[index]['address'];
          lat=data[index]['lat'];
          lng=data[index]['lng'];
      
          mapIt(name, address, lat, lng);              // off to load google maps
               
    }) // latlng
               
    }); // getJSON 
    } // loadlist
    }); // doc ready

    </script>

    </head>

    <body>

    <div id="loadListWrapper">
     
    <label id="markerLbl" >Select Marker For:</label><br>
    <select name='latlng' id='latlng' size='5'></select>

    </div> <!-- loadListWrap -->

    <!-- ====================================================== -->

    <script type="text/javascript">
       
        function mapIt(a, b, c, d) {              // c & d are lat an lng
        var latlng=c+", "+d;
       
    alert(latlng);        // shows lat & lng

    var mapOptions={
    zoom:8,
    center: new google.maps.LatLng(latlng),
    mapTypeId: google.maps.MapTypeId.ROADMAP

    }; // mapOptions

    var map=new google.maps.Map($("#map").get(0), mapOptions);    // doesn't load
               
    }; // mapIt


    /*   
    function mapIt(a, b, c, d){    // testing stuff

          document.write(a+"/ ");
          document.write(b+"/ ");
          document.write(c+"/ ");
          document.write(d);

    }*/
         
    </script>

    <!-- ============================================================= -->

    <div id="map" >  <!-- where map goes -->

    </div>
     
    </body>
    </html>