Question

I have a set of different map types (styles). As you can see in the simplified example, I try to switch the map types with an onClick event.

This works great for the default – by google.maps provided – styles. But when I try to switch to my custom style, I have a delay of ~2-3 seconds (local environment) and then get a completely grey map (nothing on the tiles).

I know that the map style itself works (not the same as in the linked example), because it’s my initial map style. So only the switch back to my custom style is not working. Sadly I get nothing in the console and don’t know how I could debug this.

<?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
}
?>

Any help is highly appreciated.

Thanks in advance

---

EDIT:

Here’s something other I tried (from inside my init(); fn, that does the setup for the map):

// 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

Normally when you modified a property of a map, let’s say a new coordinates or a zoom, even if you change the size of the container (div), you should trigger the event called resize it’s the only way to avoid this problem, now, i don’t know if this works when you change the type of the map but you should try, the code it’s the following:

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