핸들 막대를 사용하여 div에 여러 개의 Google지도 영역을 추가하는 방법

Question

정보를보고 싶은 항목을 클릭 할 때 Google지도 미니 맵 옆에 데이터를 표시해야하는 프로젝트를 진행 중입니다.

은 기본적으로는 다음과 같이 작동

1. 사용자는 그가 약
2. 브라우저가있는이 있어야 jQuery를하고 핸들 바을 사용하여 화면의 측면에 별도의 테이블을 추가 정보를 참조하기를 원하는 라벨을 클릭 :
3. 에서 정보
를 정보가있는 위치를 표시
• Google지도 인스턴스

어떻게 든 JS + jQuery + Handlebars 조합을 사용할 수 없지만 제대로 작동하지는 않습니다. Handlebars 템플릿에서 JavaScript 코드를 실행하는 도우미를 만들어야하지만 HB 템플릿의 테이블 내에서 Google지도 인스턴스를 추가하는 것이 효과가 없다는 것을 알고 있습니다.

다음은 현재 작업중인 코드입니다. 어떤 도움을 주셔서 감사합니다!

템플릿 파일 :

<script id="entry-template" type="text/x-handlebars-template"> 
<section class="Info" id={{id}}> 
    <header class="InfoHeader small" onclick="collapseInfobox(this)"> 
     <p class=""></p> 
    </header> 

    <article class="hidden"> 
     <table class="Analyses" border="1"> 
     <tr> 
      <td class="minimap"><div id="minimap_1_{{id}}" class="minimap">{{miniMap_1 context}}</div></td> 
      <td class="graph"><div>{{ graph_1 }}</div></td> 
     </tr> 
     </table> 
    </article> 
</section> 
</script> 
<script type="text/javascript"> 
var HTMLsource = $("#entry-template").html(); 
var HTMLtemplate = Handlebars.compile(HTMLsource); 
</script> 

자바 스크립트 코드 :

function addInfo(id, start, end) { 

var context = { 
    id: id, 
}; 

Handlebars.registerHelper('miniMap_1', function(data) { 
    var minimapOptions = { 
     disableDefaultUI: true, 
     center: new google.maps.LatLng(_Coords.lat, _Coords.lon), 
     zoom: 13, 
    }; 
    var minimap1 = new google.maps.Map(document.getElementById(this), minimapOptions); 

}); 

// contentArea is a div section in the page to which the info div should be appended 

$("#contentArea").append(HTMLtemplate(context)); 
} 

Answer 1

좋아, 나는 이미 내가 며칠에 고생이 문제를 해결하기 위해 관리되는 것 같아요.

Google지도 인스턴스를 테이블에 구현하는 데 실제 헬퍼를 사용하지 않고 대신 jQuery의 ready() 함수 호출을 사용합니다. 도우미를 사용할 때 Google Maps JS 라이브러리는 도우미가 실행될 때지도를 작성할지도 캔버스 div를 찾지 못하는 것으로 보입니다. ready() 함수를 호출하면 div가 실제로 삽입되기 전에 실제로 호출됩니다.

템플릿 파일 :

<script id="entry-template" type="text/x-handlebars-template"> 
<section class="Info" id={{id}}> 
    <header class="InfoHeader small" onclick="collapseInfobox(this)"> 
     <p class=""></p> 
    </header> 

    <article class="hidden"> 
     <table class="Analyses" border="1"> 
     <tr> 
      <td class="minimap"><div id="minimap_1_{{id}}" class="minimap"></div></td> 
      <td class="graph"><div>{{ graph_1 }}</div></td> 
     </tr> 
     </table> 
    </article> 
</section> 
</script> 
<script type="text/javascript"> 
var HTMLsource = $("#entry-template").html(); 
var HTMLtemplate = Handlebars.compile(HTMLsource); 
</script> 

자바 스크립트 코드 :

function addInfo(id, start, end) { 

    var context = { 
     id: id, 
    }; 

    // contentArea is a div section in the page to which the info div should be appended 

    $("#contentArea").append(HTMLtemplate(context)).ready(function() { 
     var minimapOptions = { 

      // All options you'd like the map to have, e.g. 

      disableDefaultUI: true, 
      draggable: false, 
      disableDoubleClickZoom: true, 
      center: new google.maps.LatLng(_Coords.lat, _Coords.lon), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 

     }; 
     var minimap1 = new google.maps.Map(document.getElementById("minimap_1_"+context.id), minimapOptions); 
}); 
} 

이 해결 방법은 나를 위해 일한

는 희망이이 문제를 발생할 수있는 다른 사람을 helpes