Menu
Hi there
I have gotten Google Maps to work by itself. But when I insert it into my page the map stops loading on a PNG that Google is trying to load. I know the problem is the fact that I have transparent PNGs on my site and I am using PNGfix to correct the fact that IE 6 does not render PNGs correctly. If I take off my PNGfix the map works correctly, but then I am left with boxes around the transparent PNGs on the page.
Does anyone know a fix for this? I am thinking that if I can get the PNGfix script to run and correct the PNGs on the page, then have Google create its map that could help. But, I am not a very good with javascript and I think in order for that to happen you would have to take out the <body onload=> tag which I think is required to run Google Maps.
Any suggestions would be fantastic. I have included my Google Maps code and PNGfix code. Thanks.
PNGfix.js
[CODE]function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src='” + img.src + “‘, sizingMethod=’scale’);”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(“onload”, correctPNG);
Google Maps Javascript
[CODE]<script src=”http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAi44TY0V29QjeejKd2l3ipRTRERdeAiwZ9EeJWta3L_JZVS0bOBQlextEji5FPvXs8mXtMbELsAFL0w”
type=”text/javascript”></script>
<script type=”text/javascript”>
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;
function initialize() {
map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
directionsPanel = document.getElementById(“route”);
directions = new GDirections(map, directionsPanel);
directions.load(“5320 Hudson Bend Road, Austin, TX 78734 to 5320 Hudson Bend Road, Austin, TX 78734”);
}
</script>
</head>
<body onload=”initialize()”>