自定义Google Map v3控件位置问题

Question

I'm having an issue with three custom controls I have created for a map application.

According to the API documentation:

The API places controls at each position by the order of an index property; controls with a lower index are placed first. For example, two custom controls at position BOTTOM_RIGHT will be laid out according to this index order, with lower index values taking precedence. By default, all custom controls are placed after placing any API default controls. You can override this behavior by setting a control's index property to be a negative value. Custom controls cannot be placed to the left of the logo or to the right of the copyrights.

Therefore, I added the three controls to the same position, giving each an index value, and expected them to fit accordingly.

When the controls are first loaded, they are on top of one another, instead of fitting to match their respective index values.

However, when I perform an action such as hovering over another default control (such as the zoom control), the custom controls appear correctly.

Here is what I have tried to fix the problem:

• Setting the position of the controls in CSS (does not work since control positioning can only be custom if you wrap the controls)
• Delaying the time for each control button to be added
• Tried triggering mouseover actions of other controls since this manually shows the controls in the correct position

Any help or insight in appreciated. I know I mentioned wrapping the controls allows for custom position (according to here ), but is there any other way I can get this to work without doing so?

My apologies, I tried uploading screenshots but apparently I am not popular enough. Here is a JsFiddle .

The JsFiddle shows how I am adding these controls only when the user has selected a 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!

Answer 1

This is happening because Google Maps API needs to know the width and the height of your control elements to know where to position them - when the map is rendered. By initially setting them to display: none , you are hiding it from the actual layout of your page as well - it's as if the element's not there. Use visibility: hidden instead - setting the visibility to hidden will still hide the element on the screen, but it is still present in the layout. For reference: http://www.w3schools.com/css/css_display_visibility.asp

Also, I suggest rather than individually setting these CSS attributes to your custom control elements, add a class (you can do this via jquery's .addClass() ) to these elements and toggle just by targeting the class. I've updated your jsfiddle here .