가상 요소에서 Google지도를 만들 수 있습니까?

Question

가상 요소에서 작동하는 Google지도를 만들면 언제든지 어느 페이지 에든 붙여 넣을 수 있습니다.

내 JS가 페이지에 이미 존재하는 요소를 타겟팅 할 때 여기 있습니다. 내가 원하는 무엇

var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081); 
var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416); 

var mapOptions = { 
    zoom: 16, 
    center: mapLatLong, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

var map = new google.maps.Map($('#map_canvas'), mapOptions); 

var contentString = '<div id="content">'+ 
         '<div id="siteNotice">'+ 
         '</div>'+ 
         '<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+ 
         '<div id="bodyContent">'+ 
          '<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+ 
          '<p>+44 (0)20 3137 7034</p>'+ 
         '</div>'+ 
        '</div>'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

var marker = new google.maps.Marker({ 
    position: markerLatlng, 
    map: map, 
    title: 'BrocklebankPenn' 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
}); 

infowindow.open(map,marker); 

이 같은 것입니다 : 기본적으로

this.mapCanvas = document.createElement('div'); 
this.mapCanvas.setAttribute('id', 'map_canvas'); 

var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081); 
var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416); 

var mapOptions = { 
    zoom: 16, 
    center: mapLatLong, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

var map = new google.maps.Map($(this.mapCanvas), mapOptions); 

var contentString = '<div id="content">'+ 
         '<div id="siteNotice">'+ 
         '</div>'+ 
         '<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+ 
         '<div id="bodyContent">'+ 
          '<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+ 
          '<p>+44 (0)20 3137 7034</p>'+ 
         '</div>'+ 
        '</div>'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

var marker = new google.maps.Marker({ 
    position: markerLatlng, 
    map: map, 
    title: 'BrocklebankPenn' 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
}); 

infowindow.open(map,marker); 

this.$el.html(this.mapCanvas); 

똑같은 대신 #map_canvas의 variable으로, 나는 과거에 JS으로이 방법을 촬영했지만 그것은 않습니다 Google지도에서 작동하지 않는 것 같습니다. 다음 오류가 발생합니다.

Uncaught TypeError: Cannot set property 'position' of undefined 

나는 잘 모릅니다.

누군가가 도움이된다면 도움이 될 것입니다.

건배, 루크.

Answer 1

는 기본적으로이 가능, 데모 : 코드와 http://jsfiddle.net/doktormolle/5SjnK/

이슈 :

var map = new google.maps.Map($(this.mapCanvas), mapOptions); 

$(this.mapCanvas)는 jQuery를 객체이지만,가 될 것으로 예상의 HTML 요소

this.$el.html(this.mapCanvas); 

html을 설정하지 마십시오. 원래 노드를 문서에 삽입해야합니다.

그러나 나는 그것을 제안하지 않을 것이다. 더 많은 이슈가있을 것이다. map-div의 parentNode에 접근하려는 API 메소드 나 문서 내의 위치를 ​​계산해야하는 메소드를 사용할 때 (노드가 문서에 삽입되기 전에 모두 실패 할 것이다).

관련에 는 모든 페이지에 붙여 넣을 : 그것은 불가능

, 당신이지도를 사용하는 문서가 당신이 API를로드 같은 문서해야합니다, API는 내부적으로/윈도우에 대한 참조를 사용합니다 API가로드 된 문서 Marker drag not working in iframe under Chrome and Firefox

그러나 한 모든 페이지는 "모든 문서"를 의미하지 않는 것이 가능하다 (당신의 묘사는 항상 같은 문서의에 대한) :이 질문을 참조하십시오.