+ Start a Discussion

Showing header on visual force page with google map...


How can I show header on visual force page with google map in the page. Now if I try to set shoheader to true in <apex:page> tag it stops displaiyng the header.. Please if anyone can give any idea it will be great..
Norm Sherman SFNorm Sherman SF
showHeader="true" should most definately show the salesforce tabs and such.

Make sure you load Google Maps inside a container DIV that has position relative style.

Hello Sherman,

Thanks for your reply. I am doing it the same way by setting showheader='true' and google maps I am displaying inside a div tage. Here is my code

<apex:page showheader="true" cache="false" controller="GoogleMap_Controller" sidebar="false" tabStyle="contact">

         html, body, #map {
              margin: 0;
              padding: 0;
              height: 100%;

function initialize() {
               geocoder = new google.maps.Geocoder();
               //set the map options in the format that V3 of googlemaps expects
               var mapOptions = {
                  zoom: 7,
                    //center: new google.maps.LatLng(32.5206608,-86.80249),
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  streetViewControl: false
               // attach our map to the map div
               map = new google.maps.Map(document.getElementById('map'),mapOptions);
               codeAddress() ;

function codeAddress() {
               var adresse = document.getElementById('adresse').value;
               geocoder.geocode( { 'address': adresse}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                         var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                         document.getElementById('position').value = results[0].geometry.location;
                    } else {
                         alert('Geocode was not successful for the following reason: ' + status);

<div id="map" style="width: 100%; height: 100%" >  </div>

But it does display google map after showheader='true' is set.
Kathir DevanKathir Devan
Hi virk,
Some browser is not supported google map,Just change to your browser.

Hello Kathir,

I tried changing the browser but can't see Google Map. The problem is only when I try to set showheader="true" without it works fine.

Thanks in advance.
Norm Sherman SFNorm Sherman SF
Google maps requires an explicit height and width. Just for demo purposes, try
<div id="map" style="width: 800px; height: 800px" >  </div>

And I bet it should work.

From the looks of your code, you want to have google maps take up the entire screen, yet you also want to have the header show ...

Do you see a problem with that logic?

If you want to keep the SF header but still have Google Maps take up all of the available whitespace, then you will need to have some javascript run on window resize to keep finding all of the available inner hight and width and then re-apply it to your google maps div container.
Thanks a lot Sherman... It worked fine for me....
Eva DeLoriolEva DeLoriol
That worked for me too!  I did have height and width set with percents and that did nto work.  Changing over to px absolutely did the trick!