Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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>
share|improve this question
up vote 3 down vote accepted

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.

share|improve this answer

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

share|improve this answer
    
It is not working.:) – Andrejs Igumenovs Feb 26 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 at 12:06
    
Sorry, I put the window.onload outside the <script> content. You're right, thanks!!! – Andrejs Igumenovs Feb 26 at 12:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.