google map infowindow не отображается правильно в fancybox

У меня есть карты google, которые работают очень хорошо в окне fancybox. Однако неверное отображение отображается неправильно, обратите внимание на то, что стрелка, указывающая на маркер, отсутствует, X закрыть ее отсутствует, а тень задней части не соответствует размеру. X может быть нажата (я угадал его скрытые в фоновом режиме)google map infowindow не отображается правильно в fancybox

ниже изображение, как оно отображается для меня

Valid XHTML http://www.tappertracker.com/ScreenShot2013-07-15.png

Функция, которая строит это ниже:

if (response["resp"].length > 0) { 

     frLocations = new Array(); 
     for (var i = 0; i < response["resp"].length; i++) { 
      var elements = new Array(); 

      elements[0] = response["resp"][i]["summary"]; 
      elements[1] = response["resp"][i]["latitude"]; 
      elements[2] = response["resp"][i]["longtitude"]; 
      elements[3] = i + 1; 
      elements[4] = "<h4>" + response["resp"][i]["summary"] + "</h4><p><i>" + response["resp"][i]["description"] + 
       "</i></p><p>Starting: " + String.createStringFromMysqlDateFormat(response["resp"][i]["startDate"]) + "</p>"+ 
       "<p>Ending: " + String.createStringFromMysqlDateFormat(response["resp"][i]["endDate"]) + "</p>"; 
      frLocations[i] = elements;     
     }   
    } 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom : 11, 
     center : new google.maps.LatLng(response["ha"]["lat"], response["ha"]["long"]), 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }); 
    if (response["resp"].length > 0) { 
     var infowindow = new google.maps.InfoWindow(); 

     var marker, i; 

     for(i = 0; i < frLocations.length; i++) { 
      marker = new google.maps.Marker({ 
       position : new google.maps.LatLng(frLocations[i][1], frLocations[i][2]), 
       map : map, 
       title : frLocations[i][0] 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(frLocations[i][4]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     }   
    }

EDIT: Fancy код коробка, который свойствен начать всплывало является

$("#fr-map").click(function(){ 
      $.fancybox({ 
       'href': '#fr_div', 
       'afterShow': function() { 
        getFundraisersNearMe(showFundRaisers);} 
      }); 
      return false; 
     });

HTML-

<div id="mapFormDiv" style="display:none"> 
    <div id="fr_div"> 
<h1>Fundraisers in your area</h1> 
<div id="map" style="width: 500px; height: 400px;"></div> 
</div>

источник

2013-07-15 sapatos

Это проблема CSS. – geocodezip

Как выглядит ваш код fancybox? – JFK

Как говорит Geocodezip, это (почти наверняка) вопрос CSS. Выделите все с помощью 'ctrl-A'. Отображаются ли отсутствующие элементы? Вам нужно будет настроить стили карт Google по умолчанию, чтобы предотвратить вмешательство fancybox. –

У меня точно такая же проблема. Это связано с тем, что стили бутстрапа мешают работе с Google. Я решил мину с помощью

/** FIX for Bootstrap and Google Maps Info window styes problem **/ 
img[src*="gstatic.com/"], img[src*="googleapis.com/"] { 
max-width: none; 
}

или просто

img { 
max-width: none; 
}

источник

2013-11-08 09:08:16

google map infowindow не отображается правильно в fancybox

ответ

Смежные вопросы