Response title
This is preview!
return from function creates: detailed error: TypeError: retData is undefined
in Using jQuery
•
7 years ago
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:
SIMPLEMAP.HTML
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:
- 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
- <!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>
1