2

Using the following code on a Visualforce page does not load the map:

<apex:page doctype="xhtml-1.0-transitional" showHeader="true" sidebar="true">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>

        <script type="text/javascript">
        function GetMap()
        {
            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"My_Secret_Bing_Maps_Key"});
        }
        </script>
    </head>

    <body onload="GetMap();"> 
        <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
    </body>
 </html>
</apex:page>

2 Answers 2

3

The problem is that Visualforce does not preserve your body onload replacing that with its own logic. (Worth using your browser's "View Source" or "Inspect" feature to look at the HTML that the Visualforce is translated into.)

You can use this window.onload approach instead:

<script>
window.onload = GetMap;
</script>

that does result in the map being displayed.

3

Keith C is right. <body onload= will not work. You can call your GetMap method from window.onload as below. I just updated your code and it is working. Also you need a key to use the Map.

<apex:page doctype="xhtml-1.0-transitional" showHeader="true" sidebar="true">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>

        <script type="text/javascript">
        function GetMap(){
            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"My_Secret_Bing_Maps_Key"});
        }
        window.onload = function() {
            GetMap();
        };        
        </script>        
    </head>
    <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
 </html>
</apex:page>

Screens:-

enter image description here

3
  • It is not working.:)
    – Andrew
    Feb 26, 2016 at 12:01
  • 1
    @AndrejsIgumenovs It is working for me. Please find the above scrrens. As I mentioned you need a key to get the actual result.
    – Saroj Bera
    Feb 26, 2016 at 12:06
  • Sorry, I put the window.onload outside the <script> content. You're right, thanks!!!
    – Andrew
    Feb 26, 2016 at 12:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .