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:


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

    var dataArray=[];

        $.getJSON(url, {}, function(data) {

            $.each(data, function(i,obj) {           
            }); //each
    return dataArray;
    }) // latlng       
    }); // getJSON 
    } // loadlist


  1. <!DOCTYPE>
    <html xmlns="">
    <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=""></script>

    <!-- =============== 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);

    <!-- =============== 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 id="map_canvas" style="width: 500px; height: 500px;">

    <!--               Map goes Here                -->


    <!-- ======= 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