gmap3/jquery融合表層適合哪裏？

Question

下面是一個用於google地圖代碼的gmap3 jquery插件。我很努力地將谷歌融合圖層添加到代碼中，而不會破壞其他任何東西。如何在下面的代碼中添加融合表圖層的示例？由於

<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>"); 

然後繼續我的製作標記，並通過功能與泛加載它們

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() 
      }); 
     }   
     }); 
    } 

與所有這些代碼我迷失在哪裏添加一塊覆蓋我的融合表和保留標記。

這是將融合表添加到新地圖的示例。不是現有的：

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

這是gmap3的錯誤版本。我試圖將更新的版本代碼放入舊版本。所以我只是查找了正確版本的代碼。感謝大家。

Answer 2

它應該簡單地通過在最後加上常規Google Fusion表格加載代碼來工作。

但是，我想知道你爲什麼要使用Fusion表。我最近研究了它，最終使用了KML，因爲它更靈活。只是一個建議。

祝你好運:)