google-maps - div ホバーで Google マップが読み込まれない

Question

このコードブロックは、ページの読み込み時にうまく機能しています--

   <script type="text/javascript">
    google.load("visualization", "1", { packages: ["map"] });
    google.setOnLoadCallback(drawMap);
    function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Lon', 'Name'],
          [22.1589, 90.1165, 'BARGUNA'],
          [22.6953, 90.3538, 'BARISAL'],
         ]);
        var options = {
            showLine: false,
            showTip: true,
            zoomLevel: 7,
            mapType: 'terrain'
        };
        var map = new google.visualization.Map(document.getElementById('map_canvas'));
        map.draw(data, options);
    }
</script>

このコード ブロックは、特定の div ホバー イベント用です。しかし、それは機能していません--

<script>
      $(function () {
          $('#tab-dhakadivision').hover(function () {

              google.load("visualization", "1", { packages: ["map"] });
              google.setOnLoadCallback(drawMap);
              function drawMap() {
                  var data = google.visualization.arrayToDataTable([
                     ['Lat', 'Lon', 'Name'],
                      [23.78069, 90.41932, 'DHAKA'],
                      [23.60113, 89.83923, 'FARIDPUR'],
                      [24.11119, 90.42584, 'GAZIPUR']
                  ]);

                  var options = {
                      showLine: false,
                      showTip: true,
                      zoomLevel: 7,
                      mapType: 'terrain'
                  };

                  var dmap = new google.visualization.Map(document.getElementById('map_canvas'));
                  dmap.draw(data, options);
              }

          });

      });

  </script>

なにか提案を ？