return from function creates: detailed error: TypeError: retData is undefined

return from function creates: detailed error: TypeError: retData is undefined

Yesterday I submitted a question 'Google Map Not Loading'.  A disaster!!  Before I can deal with the google mapping issues I have to be able to pass the data properly from the database.

The idea is to access a MySql database containing Marker information, create a 'dynamic select options list', make a choice, create an array of data from the choice  and return the results as an array to a function which will create a  'google map'.

This is my re-write and  I can't get the data to pass the array from 'MAPPING.JS' back to the calling  program SIMPLEMAP.HTML. Code is:


MAPPING.JS:

  1. function loadlist(selobj, url, nameattr) {

    var dataArray=[];

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

            $.each(data, function(i,obj) {           
                $(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
            }); //each
        
      $(selobj).change(function(){
     
          name=$(this).val();
          index=this.selectedIndex;
          address=data[index]['address'];
          lat=data[index]['lat'];        
          lng=data[index]['lng'];        
       
          dataArray.push(name);
          dataArray.push(address);     
          dataArray.push(lat);
          dataArray.push(lng);
            
    return dataArray;
            
    }) // latlng       
    }); // getJSON 
    } // loadlist


SIMPLEMAP.HTML

  1. <!DOCTYPE>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SimpleMap - With marker selection </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="js/mapping.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    </head>
     
    <body>

    <!-- =============== Google Maps Function  ============================== -->

    <script type="text/javascript">

    function mapIt() {

        var a=48.3;   // this is to be replaced w/retData passed from loadlist() below
        var b=-116.54;

         var myLatLng=new google.maps.LatLng(a, b);

        var myOptions = {
            zoom: 12,
            center: myLatLng, //new google.maps.LatLng(42.351420812410865, -83.07237023559571),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    </script>

    <!-- =============== End Google maps Function ================================ -->

    <div id="loadListWrapper">

        <!--   Create Select/Options List here    -->

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

    <div id="map_canvas" style="width: 500px; height: 500px;">

    <!--               Map goes Here                -->


    </div>

    <!-- ======= Call to Create Select/Options & Pass data to mapIt ============ -->

    <script type="text/javascript">

    var retData=[]; // array to pass to mapIt()

        retData=loadlist($('#latlng').get(0),    // mapping.js supposed to return dataArray
     'getMarkers.php?getlist=latlng', 'name');

        alert(retData[0]);   // detailed error: TypeError: retData is undefined

        //mapIt(retData lat and Lng);  call to create map with Lat & Lng data
       
    </script>
     
    </body>
    </html>