+ Start a Discussion

Inline Google Map for Tabbed Pages

I found a great example (there are probably many but follow link for code example) on the Decoding Salesforce site by Allesandro that uses the Google API to display the Google map and it work like a charm on Accounts. I then took the same code and applied it to the VF page inside a PageBlockSection for a custom object that has address fields and again works well. However, the page I used it on is also part of a tabbed set of pages and the tabs no longer work.


Has anyone experienced the same issue? The VF code based on the Account Sobject is:



<apex:page standardController="Account">


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";

var infowindow = new google.maps.InfoWindow({
content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"

geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);

//center map

//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Account.Name}"

//add listeners
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.addListener(infowindow, 'closeclick', function() {


} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");

function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";


#map {
font-family: Arial;
line-height:normal !important;


<div id="map"></div>