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 퓨전 테이블로드 코드를 붙여 넣기 만하면됩니다.

그러나 퓨전 테이블을 사용하려는 이유가 궁금합니다. 나는 최근에 그것을 탐구했고 훨씬 더 유연하기 때문에 대신 KML을 사용했다. 그냥 제안.

행운을 빌어 요.