FusionMaps v3 Fails - Object doesn't support this property or method - IE 7

[mdeangelis]

I'm a web developer working on an application that provides reports for an international consortia on reproductive health aid. We've just introduced a beta where we have added a new mapping feature to the site ( http://rhi.rhsupplies.org - see geographic summary report "Show Map" feature ). The feature works fine on FireFox 3.0 but fails under Internet Explorer 7.0. We are running version 3.1 of FusionCharts and FusionMaps. I have boiled down the problem and created a much simplified sample page (see below) that illustrates the problem.

 

 

 

In IE, when map is rendered, the "Object doesn't support this property or method" error message first appears for this line of code during rendering:

 

 

 

try { document.getElementById("mapdiv").SetReturnValue(__flash__toXML(SWFInfo.locateSWF("swf615053.262646243")) ); } catch (e) { document.getElementById("mapdiv").SetReturnValue(""); }

 

 

 

If you click through all of the rendering errors and then click the button to save the map, you get the same error - the object returned from getMapFromId() method does not appear to support the saveAsImage() method.

 

 

 

- - - - - - - - - - - - - - - - - - SAMPLE SCRIPT - - - - - - - - - - - - - - -

 

 

 

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

< html>

 

< head>

 

< meta http-equiv=Content-Type content='text/html; charset=UTF-8'>

 

< script type='text/javascript' src='/js/FusionMaps.js'>

 

< script type='text/javascript'>

 

< !--

 

var myMap; // the Map object

 

var myMapXML;

 

 

 

// Button handler to exercise the SaveAsImage method on object

 

function saveMap()

 

{

 

var o = getMapFromId('mapdiv');

 

o.saveAsImage();

 

}

 

 

 

// Event handler for rendering the map

 

function showMap()

 

{

 

myMap = new FusionMaps('/fg_maps/FCMap_Africa.swf', 'mapdiv', '600', '500', '0', '1');

 

 

 

myMapXML = "< map borderColor='C0C0C0' imageSave='1' imageSaveURL='FCExporter.jsp' showLabels='1' showShadow='0' showBevel='0' formatNumber='1' numberPrefix='$' baseFontSize='10'>" +

 

"< data>" +

 

"< entity id='018' displayValue='ET' toolText='Ethiopia: $30,137,371' value='30137371' />" +

 

"< entity id='023' color='FFFFFF' displayValue='KE' toolText='Kenya' value='' />" +

 

"< /data>< /map>";

 

 

 

myMap.setDataXML(myMapXML);

 

 

 

// we always render the version that saves as JPG

 

myMap.render('mapdiv');

 

}

 

//-->

 

< /script>

 

< /head>

 

 

 

< body onload="showMap();">

 

< input type="button" value="save as image" onclick="javascript:saveMap()"/>

 

 

 

 

 

 

 

< table border='0' cellpadding='0' cellspacing='0' align='center' width='95%'>

 

< tr>

 

< td colspan='2' align='left' width='100%'>

 

< div id='mapdiv'>

 

Please wait while map is created ...

 

< /div>

 

< /td>

 

< /tr>

 

< /table>

 

< /body>

 

< /html>

 

< /code>

Edited December 18, 2009 by Guest

[FusionCharts Support]

Hi,

Please set unique and different names for the map's DOMId, DIV in which map will be rendered and the JavaScript object used to create the map.

As of now, I find that you are using same name to declare the map's DOMId as well as the DIV's id. Hence, this issue.

myMap = new FusionMaps('/fg_maps/FCMap_Africa.swf', 'mapdiv', '600', '500', '0', '1');

...

myMap.render('mapdiv');

 

Please try changing this to something like:

myMap = new FusionMaps('/fg_maps/FCMap_Africa.swf', 'mapDOMId', '600', '500', '0', '1');

...

myMap.render('mapdiv');

 

[mdeangelis]

That seems to be exactly it - thank you!

[Guest Rajroop]

Most welcome there!