Google Maps API KML Balloons Not Visible

Question

I am using Google Maps JavaScript API v3 with a KML layer to display a map with custom markers.

My map links to the KML file I published as a Google Site attachment. Once loaded, the map shows each of the PlaceMarks from the KML file correctly, but will not display the popup balloons.

Rarely when I click a pin it shows the balloon (5% of the time), then none of the other pins work. When I zoom in and out my custom pin images sporadically revert to the default pin image.

I added the layerOptions to explicitly set clickable to true and suppressInfoWindows to false. It didn't change the balloon behavior.

I have tested with Chrome v19, Firefox v12, and IE8.

Update 1:

I found a typo in my KML, (bal*l*oon). Still not working right. Something is making the pins buggy.

Update 2:

v3 is now working. Google's caching made this difficult to test. Added '?nocache=0' to KML URL to prevent caching. BaloonStyle was the problem, but caching caused the typo to remain. Migrating KML to personal server.

Live HTML Map Page (Fixed)

Live KML Download (Fixed)

My references:

• http://developers.google.com/maps/documentation/javascript/reference
• http://ge.images.alaska.edu/workshop/advanced.htm

Answer 1

My problems:

• A typo in my BalloonStyle tag
• A stale cache of my KML file

This would have been easier if:

• Google Maps JS threw errors when parsing KML
• Google caching was reasonably fast
• I started testing on a server

Update:

I moved the KML file to my server, but the cache remained stale after the first change. It seems the caching occurs when my Google Map object loads the KML overlay. I made sure it was not my system or my server caching.

The pins start acting buggy if I make a change to my KML and the cache doesn't update. All my pins show in the correct location, but one of the pins won't have a balloon. Changed the file name, works fine!

Update 2:

I reported this caching behavior as a bug on Google Maps JS API.

http://code.google.com/p/gmaps-api-issues/issues/detail?id=4196

Conclusion:

I wrote the ASP.NET/C# class to geocode addresses and build the KML doc in less time than it took to find this error.

Stop caching so hard Google!

Answer 2

Google is caching your KML on purpose. The workaround is to append something like the current time to the end of your URL so that it is different every time:

var kmlFile = 'http://www.myserver.com/my.kml?'+(new Date()).getTime();
var kmlLayer = new google.maps.KmlLayer(kmlFile);
kmlLayer.setMap(myMap);

Answer 3

Your KML is invalid. <Name> is not part of the spec. Change it to <name> and you should be good to go.