javascript - JQuery function doesn't print out anything -

javascript - JQuery function doesn't print out anything -

i'm trying allow work jquery function without results. here it. receive setmap (a servlet) list formatted in json. i'm totally sure list unfortunately don't see map appearing in screen.

$(document).ready(function(){ $("#airports").click(function(){ $.getjson('setmap', function(list) { var mapoptions = { zoom: 2, maptypeid: new google.maps.maptypeid.terrain }; $('.grid_12').append($("<div id='mapcanvas'></div>")); var map = new google.maps.map(mapcanvas, mapoptions); if(list.length > 0) { (var = 0; < list.length; i++) { var latlng = new google.maps.latlng(list[i].latitude,list[i].longitude); var marker = new google.maps.marker({ position: latlng, map: map }); } } }); }); });

html

<article> <section class="grid_12"></section> </article>

in line:

var map = new google.maps.map(mapcanvas, mapoptions);

mapcanvas not defined. might implicitly work in browsers because browsers define symbol every id, shouldn't rely on that. i'm assuming want pass dom element there (that's google maps wants), can more explicitly this:

var mapcanvas = ($("<div id='mapcanvas'></div>").appendto('.grid_12'))[0]; var map = new google.maps.map(mapcanvas, mapoptions);

since haven't provided runnable demonstration, there may other errors too.

javascript jquery