gmap3 / jquery where does fusion table layer fit in?

Question

below is a gmap3 jquery plug in for a google maps code. I am struggling to get a google fusion layer added into the code without breaking anything else. how does the example on adding a fusion table layer fit into my code below? Thanks

<div id="gMap"></div>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){  
    //MAP ZOOM (0 to 20)
    var zoomLevel = 14,
    gMap = jQuery("#gMap"),
    //iPad,iPhone,iPod...
    deviceAgent = navigator.userAgent.toLowerCase(),
    iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);

//iPad Stuff
if (iPadiPhone) {
    //ADD MAP CONTROLS AND POST ARROWS
    jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">&lsaquo;</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">&rsaquo;</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div>');
} else {//IF NOT iPad
    jQuery('#zoomIn').live('click',function(){
        zoomLevel += 1;
        gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
    });
    jQuery('#zoomOut').live('click',function(){
        zoomLevel -= 1;
        gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
    });
    //ADD MAP CONTROLS AND POST ARROWS
    jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">&lsaquo;</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">&rsaquo;</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div><div class="zoomControl" title="Zoom Out" id="zoomOut"><img src="images/zoomOut.png" alt="-" /></div><div class="zoomControl" title="Zoom In" id="zoomIn"><img src="images/zoomIn.png" alt="+" /></div>');
}    
    jQuery('body').prepend("<div id='target'></div>");

then it continues my making markers and loading them with a pan through functionality

gMap.gmap3({ 
        action: 'init',
        onces: {
          bounds_changed: function(){
            var number = 0;
            jQuery(this).gmap3({
              action:'getBounds', 
              callback: function (){

                add(jQuery(this), number += 1, "marker1", "map_post.html", "Steve", "40.48805717","-80.24950375", '<img width="95" height="95"  alt="" />');
                add(jQuery(this), number += 1, "marker2", "map_post.html","Steve","40.48973507","-80.19283214", '<img width="95" height="95" src="" alt="" />');
              }
            });
          }
        }
      },{ 
        action: 'setOptions', args:[{
            zoom:zoomLevel,
            scrollwheel:true,
            disableDefaultUI:true,
            disableDoubleClickZoom:false,
            draggable:true,
            mapTypeControl:false,
            panControl:false,
            scaleControl:false,
            streetViewControl:false,
            zoomControl:false,
            //MAP TYPE: 'roadmap', 'satellite', 'hybrid'
            mapTypeId:'roadmap'
        }]
    });

    function add(jQuerythis, i, title, link, excerpt, lati, longi, img){
      jQuerythis.gmap3({
        action : 'addMarker',
        lat:lati,
        lng:longi,
        //PIN MARKER IMAGE
        options: {icon: new google.maps.MarkerImage('images/pin.png')},
        events:{
            mouseover: function(marker){
                jQuerythis.css({cursor:'pointer'});
                jQuery('#markerTitle'+i+'').fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
                jQuery('.markerInfo').removeClass('activeInfo').hide();
                jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
                jQuery('.marker').removeClass('activeMarker');
                jQuery('#marker'+i+'').addClass('activeMarker');
            },
            mouseout: function(){
                jQuerythis.css({cursor:'default'});
                jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
            },
            click: function(marker){window.location = link}
        },
        callback: function(marker){
          var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><h2>'+title+'</a></h2><p>'+excerpt+'</p><div class="markerTotal">'+i+' / <span></span></div></div></div>');
          jQuerybutton.mouseover(function(){
              jQuerythis.gmap3({
                action:'panTo', 
                args:[marker.position]
              });
              jQuery("#target").stop(true,true).fadeIn(1200).delay(500).fadeOut(1200);
           });
          jQuery('#markers').append(jQuerybutton);
          var numbers = jQuery(".markerInfo").length;
          jQuery(".markerTotal span").html(numbers);
          if(i == 1){
            jQuery('.marker:first-child').addClass('activeMarker').mouseover();
          }
          jQuerythis.gmap3({
            action:'addOverlay',
            content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',
            latLng: marker.getPosition()
           });
        }           
      });
    }

with all this code I am lost on where to add the piece to overlay my fusion table and keep the markers.

this is the example of adding a fusion table to a new map. not an existing one:

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4, -122.1),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoWindow = new google.maps.InfoWindow();

    // Initialize the first layer
    var firstLayer = new google.maps.FusionTablesLayer({
      query: {
        select: 'geometry',
        from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
      },
      map: map,
      suppressInfoWindows: true
    });
    google.maps.event.addListener(firstLayer, 'click', function(e) {
      windowControl(e, infoWindow, map);
    });

Answer 1

it was the wrong version of gmap3. I was trying to put newer version code into older version. So I just looked up the code for the correct version. Thanks everyone.

Answer 2

It should work simply by tacking the regular Google Fusion tables loading code on the end.

However, I'm wondering why you want to use Fusion tables. I explored it recently and ended up using KML instead because it's much more flexible. Just a suggestion.

Good luck :)