Google지도 API의 infoWindow 표시가 잘못되었습니다.

Question

누군가 나를 도울 수 있습니까?

Google지도 API에 infoWindow를 표시하는 데 문제가 있습니다. 배경 그림자가 올바르게 표시되지 않습니다. 그림자의 투명도는 작동하지 않습니다.

var geocoder; 
var map; 
function initialize() { 
var pinkParksStyles = [ 
{ 
featureType: "all", 
stylers: [ 
{ saturation: -80 } 
] 
}, 
{ 
featureType: "landscape.man_made", 
stylers: [ 
{ hue: "#ed1c26" }, 
{ saturation: 100 }, 
{ gamma: 0.2 } 
] 
} 
]; 

var pinkMapType = new google.maps.StyledMapType(pinkParksStyles, 
{name: "Architektonická mapa"}); 

geocoder = new google.maps.Geocoder(); 
var latlng = new google.maps.LatLng(49.830896,15.331421); 


var myOptions = { 
    zoom: 7, 
    center: latlng, 
    mapTypeControlOptions: { 
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "pink_parks"] 
    } 
} 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

var hvezdo = new google.maps.LatLng(49.872623,14.769359); 

map.mapTypes.set("pink_parks", pinkMapType); 
map.setMapTypeId("pink_parks"); 

var image = "http://www.cka2011.cz/archbook/wp-content/plugins/Ada_archmapa/icon-arch.png"; 

var hvezdo = new google.maps.LatLng(49.872623,14.769359); 

    var marker = new google.maps.Marker({ 
    position: hvezdo, 
    map: map, 
    title:"matomas.cz", 
    icon: image, 
}); 

var contentString = "<div id=content>"+ 
"<div id= siteNotice >"+ 
"</div>"+ 
"<h2 id= firstHeading class= firstHeading >Uluru</h2>"+ 
"<div id= bodyContent >"+ 
"<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " + 
"sandstone rock formation in the southern part of the "+ 
"Northern Territory, central Australia. It lies 335 km (208 mi) "+ 
"south west of the nearest large town, Alice Springs; 450 km "+ 
"(280 mi) by road. Kata Tjuta and Uluru are the two major "+ 
"features of the Uluru - Kata Tjuta National Park. Uluru is "+ 
"sacred to the Pitjantjatjara and Yankunytjatjara, the "+ 
"Aboriginal people of the area. It has many springs, waterholes, "+ 
"rock caves and ancient paintings. Uluru is listed as a World "+ 
"Heritage Site.</p>"+ 
"<p>Attribution: Uluru, <a href= http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194 >"+ 
"http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>"+ 
"</div>"+ 
"</div>"; 

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

google.maps.event.addListener(marker, "click", function() { 

infobox.open(map,marker); 
}); 
} 

function codeAddress() { 
var address = document.getElementById("address").value; 
geocoder.geocode({ "address": address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
    map.setCenter(results[0].geometry.location); 
    map.setZoom(14); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location 
    }); 
    } else { 
    alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
    } 

Answer 1

귀하의 CSS는지도 방해 :

코드가 여기에있다 [1] (문제를 보여주기 위해 원에 빨간색 저 작은 A를 클릭) 당신은 웹 페이지에서 문제를 볼 수 있습니다]

.entry img, img.thumbnail { 
    background-color: #FFFFFF; 

당신은지도의 이미지 배경색을 해제해야합니다

#map_canvas img { 
    background-color: transparent; 
    } 

는 (귀하의 페이지는 매초 datetime is undefined 오류를 랙.)

Answer 2

스타일 시트는 정보창의 렌더링 영향을 미치고있다. stylesheet이의

라인 285 :

.entry img, img.thumbnail { padding: 5px; background:#FFF; }

계단식와 정보창을 포함, 모든 요소에 영향을 미치는 것입니다. 모든 하위 img 요소에 영향을 미치지 않도록 스타일 시트를보다 구체적으로 만들 것을 제안하십시오.