Карты Google не отображаются

Question

Я пытаюсь отобразить карту для местоположения с картами google в модальном формате с использованием fancybox, но он делает весь запрос веб-службы google maps, но не отображает карту. Heres мой код

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); 
      } 
     }) 
    } 

Когда я проверить режимные с помощью DOM Inspector Хрома я вижу сгенерированный HTML, но карта не показывает. Что может быть неправильным?

Answer 1

Вы, кажется, не добавили элемент map-canvas в дом. Поэтому API GoogleMap не может найти его. Попробуйте следующее:

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

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

Заменить divParentContainer с идентификатором контейнера, который выступает в качестве родителя для вашего дел.