+ Start a Discussion
CoderCoder 

Problem with displaying Google Maps in Visualforce Page.

Hi,

 

I'm having problem with displaying google maps in visualforce page. Here its not taking the body onload function in visualforce page. i tried a example in that when i add the maps using the body onload() its not getting displayed, but when i call the unload function on button click i'm able to display the map.

 

Now, i want to display the map on onLoad() function.

 

 

<apex:page standardController="Contact" extensions="ContactSearch1"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps API Sample</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAAiEBi5EXD6nh-EO4LuyxtBQWey-B1ZKQhVHInL6_tETDfQStQxR6nhjXEiIksVJNl42THPBptibDMw"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } </script> </head> <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <input type="button" value="Show Map" Onclick="initialize()"> //When i click on the button i'm able to displayy the map in Visualforce page.... </body> </html> </apex:page>

 

 

Please help me to load the maps on visualforce page loads.

 

Thank You.

 

 

bob_buzzardbob_buzzard

I don't think you can use a body tag if you are using standard salesforce headers.

 

You'll need to set the showHeader attribute on the page tag to false to use a body tag in this way, or add the load/onload handlers using javascript instead.

Jon Mountjoy_Jon Mountjoy_

From this thread, it looks like what you want is something like the following code in your Visualforce page:

 

 

<script> var previousOnload = window.onload; window.onload = function() { if (previousOnload) { previousOnload(); } initialize(); }</script>

 

 That looks like it will hook into the body's onload function cleanly.