2012-01-10 4 views
2

지도라고하는 div 중 하나에 Google지도가있는 html 페이지가 있습니다.javascript를 사용하여 외부 HTML 페이지에서 div를로드하는 방법은 무엇입니까?

var map = new google.maps.Map(document.getElementById('map'),mapOptions); 

이제 여러 웹 페이지에서 동일한 Google지도를 만들고 싶습니다. 다른 페이지에서이 div를 어떻게 참조합니까?

예 :

나는이

<html><head></head> 
<body><div><!--How do I get the map here--></div> 
</body></html> 

같은 다른 HTML 파일은 추적 할 수없는 가망 jQuery를 사용하고 있습니까? 차례로

var map = new google.maps.Map(document.getElementById('map'),mapOptions); 

이있는

jQuery(document).ready(function(){

있다

--- 편집 ----

그래서 스크립트를 불렀다 myscript.js 그렇다면이 스크립트를 다른 곳에로드하려면 어떻게해야합니까?

+0

실례가 있습니까? 감사합니다. – andresf

답변

1

이 div는 참조하지 않습니다. 지도는 페이지가로드 될 때 즉석에서 생성됩니다.

$('#element').load('map.html #map)을 사용하면로드 된 콘텐츠의 모든 스크립트가 스트라이프되므로 생성 스크립트를 실행할 수 없습니다.

동일한 맵으로되어 있으므로 jQuery.getScript()를 사용 하시겠습니까?

// gmaps.js 
function generateMap() { 
    //your custom logic 
} 

// html file 
<html><head></head> 
<body><div id="gmap"></div> 
<script> 
$.getScript('gmaps.js', function() { 
    // Call custom function defined in script 
    generateMap(); 
}); 

</script> 
</body></html> 

또한 jQuery.getScript() 사용의 유래 여기에 예를 보면 구글 수지도 :

편집 - 업데이트 예를

// map.js 
function generateMap() 
{ 
    map = new GMap2(document.getElementById("div_map")); 
    map.addControl(new GSmallMapControl()); 
    map.addControl(new GMapTypeControl()); 
    var latLong = new GLatLng(parseFloat(52.2322549), parseFloat(21.0387957)); 
    var marker = new GMarker(latLong, {draggable : false}); 
    map.addOverlay(marker); 
    map.setCenter(latLong, 15); 
} 


// map.html - ! CHANGE API KEY ! 
<html> 
    <head> 
     <title>Google Map sample</title> 
     <script type="text/javascript" src="js/jquery-1.7.1-min.js"></script> 
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=PUT_YOUR_KEY_HERE&sensor=false" type="text/javascript"></script> 
    </head> 
<body> 
<div id="div_map" style="width:500px;height:400px;background-color:red;"></div> 
<script type="text/javascript"> 
$.getScript('map.js', function() { 
    generateMap(); 
}); 
</script> 
</body> 
</html> 
+0

. DIT를 확인해 주시겠습니까? –

+0

전체 자바 스크립트 파일은 어떻게 생겼습니까? 거기에지도 생성 기능 만 넣으십시오. 예제를 업데이트했습니다. – BartekR

0

당신이 실제로 다른 페이지에지도 인스턴스 자체를 복제하고자하지 않는 것을 가정하면, 난 당신이 다음 <iframe>를 통해 참조 할 수있는 독립 페이지를 만들어 제안했다. 당신은 jQuery를 통해 시도 할 수 있지만지도가 중단 될 가능성이 있습니다.

관련 문제