2012-05-09 14 views
1

ファンシーボックスを使用してモーダルでGoogleマップを使用して場所のマップを表示しようとしていますが、GoogleマップのすべてのWebサービスにリクエストを行いますが、マップは表示しません。 HERESに私のコードGoogleマップはレンダリングされません

function show_map(options) { 
     var html = '<div id="map-canvas" style="width:100%; height=100%"></div>'; 
     $.fancybox({ 
      'width':550, 
      'height':450, 
      'content':html, 
      'modal' : false, 
      'transitionIn' : 'none', 
      'transitionOut': 'none', 
      'speedIn' : 300, 
      'speedOut' : 300, 
      'autoScale' : false, 
      'scrolling' : 'no', 
      'centerOnScroll':true, 
      'onComplete':function() 
      { 
       var myOptions = { 
       center: new google.maps.LatLng(options.lat,options.lng), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
      } 
     }) 
    } 

は私が見ChromeのDOMインスペクタを使用してモーダルを検査するときに生成されたHTMLが、マップは表示されません。 何が間違っている可能性がありますか?

答えて

1

DOMにmap-canvas要素を追加していないようです。したがって、GoogleMap APIはそれを見つけることができません。次のことを試してみてください。

var mapCanvas = document.createElement('div'); 
mapCanvas.setAttribute('id','map-canvas'); 
mapCanvas.setAttribute('style','width:100%; height=100%'); 

document.getElementById('divParentContainer').appendChild(mapCanvas); 

あなたのdivの親として動作するコンテナのIDでdivParentContainerを交換してください。

+0

大歓迎です! –

関連する問題