javascript - Custom Google Map v3 Controls Position Issue -

i'm having issue 3 custom controls have created map application.

according api documentation:

the api places controls @ each position order of index property; controls lower index placed first. example, 2 custom controls @ position bottom_right laid out according index order, lower index values taking precedence. default, custom controls placed after placing api default controls. can override behavior setting control's index property negative value. custom controls cannot placed left of logo or right of copyrights.

therefore, added 3 controls same position, giving each index value, , expected them fit accordingly.

when controls first loaded, on top of 1 another, instead of fitting match respective index values.

however, when perform action such hovering on default control (such zoom control), custom controls appear correctly.

here have tried fix problem:

• setting position of controls in css (does not work since control positioning can custom if wrap controls)
• delaying time each control button added
• tried triggering mouseover actions of other controls since manually shows controls in correct position

any or insight in appreciated. know mentioned wrapping controls allows custom position (according here), there other way can work without doing so?

my apologies, tried uploading screenshots apparently not popular enough. here jsfiddle.

the jsfiddle shows how adding these controls when user has selected specific input:

$('#toggle').on('click', function(){     if ($(this).is(':checked')){         $(pointseldiv).css('display', 'block');         $(polyseldiv).css('display', 'block');         $(circseldiv).css('display', 'block');        }else{         $(pointseldiv).css('display', 'none');         $(polyseldiv).css('display', 'none');         $(circseldiv).css('display', 'none');        } }); 

thanks again!

this happening because google maps api needs know width , height of control elements know position them - when map rendered. setting them display: none, hiding actual layout of page - it's if element's not there. use visibility: hidden instead - setting visibility hidden still hide element on screen, still present in layout. reference: http://www.w3schools.com/css/css_display_visibility.asp

also, suggest rather individually setting these css attributes custom control elements, add class (you can via jquery's .addclass()) these elements , toggle targeting class. i've updated jsfiddle here.