setMapTypeId не работает с пользовательской картой (Google Maps)

Question

У меня есть набор различных типов карт (стилей). Как вы можете видеть в упрощенном примере, я пытаюсь переключать типы карт с помощью события onClick.

Это прекрасно работает для стандартных стилей, предоставляемых google.maps. Но когда я пытаюсь переключиться на свой собственный стиль, у меня задержка ~ 2-3 секунды (локальная среда), а затем я получаю полностью серую карту (ничего на плитках).

Я знаю, что сам стиль карты работает (не такой, как в связанном примере), потому что это мой начальный стиль карты. Так что только переключение обратно в мой собственный стиль не работает. К сожалению, я ничего не получаю в консоли и не знаю, как я могу это отладить.

<?php
// Inside the init(); function:
?>
var custom_style = [
     {
         featureType: 'water'
        ,stylers: [
             { hue: "#009ee0" }
            ,{ saturation: 100 }
            ,{ lightness: 0 }
         ]
     }
];
var CUSTOMMAPTYPE = new google.maps.StyledMapType( 
    custom_style, 
    // Options:
    { 
        alt: "Show Custom style",
        name: "custom" 
    } 
);

<?php
// Inside the view
$map_types = array(
     'Roadmap'
    ,'Terrain'
    ,'Satellite'
    ,'Hybrid'
    ,'CustomMapType'
);
foreach ( $map_types as $index => $type )
{
    ?>
    <span 
        class="map-type" 
        onClick="
                my_map.setMapTypeId( google.maps.MapTypeId.<?php echo strtoupper( $type ); ?> );
                // This is funny: I can access all mapType objects without a problem:
                console.log( my_map.mapTypes.<?php echo strtolower( $type ); ?> );
            " 
        id="<?php echo strtolower( $type ); ?>"
    >
        <?php echo $type; ?>
    </span>
    <?php
}
?>

Любая помощь высоко ценится.

Заранее спасибо

---

EDIT:

Вот еще кое-что, что я попробовал (изнутри моего init(); fn, который выполняет настройку для карты):

// The map type control DOM/UI Element
var map_type_controls = document.getElementsByClassName( 'map-type' );

// using jQuery to add a DOM listener function for click events to the UI elements:
jQuery.each( map_type_controls,  function() {
    google.maps.event.addDomListener( this, 'click', function() {
        var control_id = jQuery( this ).attr( 'id' );
        var control = control_id.toUpperCase();

                // uncomment to debug:
                // Shows all map type control DOM element correct
        // console.log( control );
                // Shows all registered mapType objects incl. the custom one correct:
                // console.log( my_map.mapTypes );

        my_map.setMapTypeId( google.maps.MapTypeId[ control ] );

                // Per recommendation - doesn't help
        google.maps.event.trigger( atlas_map, "resize" );
    } ); 
} );

Answer 1

Обычно, когда вы изменяете свойство карты, скажем, новые координаты или масштабирование, даже если вы измените размер контейнера (div), вы должны вызвать событие с именем resize, это единственный способ избежать эта проблема, теперь, я не знаю, работает ли это, когда вы меняете тип карты, но вы должны попробовать, код следующий:

    google.maps.event.trigger(map, "resize");