Recently, I had a client who wanted a map of Israel on their site. I started out using Google Maps as I always do for this process, but the Israel map contains no details when embedded (even though it’s fully detailed – cities, roads, etc – in the Google Maps application). The reason for this is unclear, though some have speculated it’s due to licensing issues with the Google Maps API. So, I decided to use Bing Maps instead.
Embedding a Bing Map is not nearly as straightforward as embedding Google Maps. Luckily for me, there’s a great WordPress plugin called Bing Maps for WordPress which provides a simple-to-use shortcode. I installed the plugin and had the map working very quickly.
[bingMap location="Israel"]Simple. However, a few days later I noticed that when I loaded the page in IE7 during testing, the following message popped up, and the page, which had previously loaded almost entirely, redirects to a “Page Cannot be Displayed” screen (now that’s dumb):
Internet Explorer cannot open the Internet Site
Operation Aborted
After swearing at Internet Explorer for a few minutes as usual, I proceeded to find that this has to do with adding DOM elements to the body element… incorrectly. Of course, it works just fine in Firefox, Chrome, and every other browser.
Getting past the irony of Microsoft’s Bing Maps nuking Microsoft’s Internet Explorer when embedded, the solution is fairly simple. The basic idea is to defer the loading of the map till the DOM is ready. The Defer a script until the page has loaded solution is detailed as such:
if (window.attachEvent) {
window.attachEvent("onload", GetMap);
} else {
window.addEventListener("load", GetMap, false);
}
To accomplish this with the Bing Maps for WordPress plugin, I edited the plugin’s content.php file. As the site already used jQuery, I just added a jQuery(document).ready() around the function call. The edits look like this:
//line 331
$string .= '<script type="text/javascript">jQuery(document).ready(
function(){
map = new VEMap('bingMapsForWordpress'.$this->mapCount.'');
map.SetCredentials("'.$this->apiKey.'");
map.LoadMap(new VELatLong('.$this->lat.', '.$this->long.', 0, VEAltitudeMode.RelativeToGround), '.$this->atts['zoomDynamic'].', VEMapStyle.'.$this->maptypesDynamic[strtolower($this->atts['maptype'])].', false, VEMapMode.Mode2D, true, 1);
var layer = new VEShapeLayer();';
//line 398
$string .= '}); </script>';
And that’s it! Now it works like a charm. If only we could rename Internet Explorer “Operation Aborted”…
Photo by jeffwilcox
