2 styled map in Google maps api v3?

Question

first, im french and my english is so poor....

I would have 2 Styled map on my web site : my code is :

    <script type="text/javascript">

        // Detection du navigateur utilisé, ainsi que l'affichage  
        <?php include("browser.js");?>

        // Début de la création de la map
        function initialiser() {

            <?php include("cartes.js");?>

            var Night = new google.maps.StyledMapType(Nuit,{name: "Nuit"});
            var Map = new google.maps.StyledMapType(Plan,{name: "Plan"});


            // Propriétés des identificateurs prédéfinis permettant de définir des options d'affichage
            var options = {
                center: new google.maps.LatLng(49.894524, 2.30195),
                zoom: 13,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.Plan, 'map_style1', 'map_style2', ]
                }
            };

            // Constructeur de la carte dans lequel la carte doit s'afficher ainsi que les options
            var carte = new google.maps.Map(document.getElementById("carte"), options);

            carte.mapTypes.set('map_style2', Night);
            carte.setMapTypeId('map_style2');               
            carte.mapTypes.set('map_style1', Map);
            carte.setMapTypeId('map_style1');


            <?php include("geolocalisation.js");?>

            <?php include("voitures.js");?>

        }

But the problem is that the 2 styled map are there, but is not working all the time ... Maybe it's the limit of this api ?

Answer 1

Most probably problem is here:

mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.Plan, 'map_style1', 'map_style2', ]
}

Known MapTypeIds are: HYBRID, ROADMAP, SATELLITE, and TERRAIN. You have Plan.

You can change that to something like:

    mapTypeControlOptions: {
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP, 'map_style1', 'map_style2'
        ]
    }

So, with assumption that you have somewhere defined styles Nuit and Plan, something like:

var Nuit = [{ ...features style... }];
var Plan = [{ ...features style... }];

I would change your init function to:

function initialiser() {

    <?php include("cartes.js");?>

    var nightMap = new google.maps.StyledMapType(Nuit,{name: "Nuit"});
    var planMap = new google.maps.StyledMapType(Plan,{name: "Plan"});

    var options = {
        center: new google.maps.LatLng(49.894524, 2.30195),
        zoom: 13,
        mapTypeControlOptions: {
            mapTypeIds: [
                google.maps.MapTypeId.ROADMAP, 'map_style1', 'map_style2'
            ]
        }
    };

    var carte = new google.maps.Map(document.getElementById("carte"), options);

    carte.mapTypes.set('map_style2', nightMap);
    carte.setMapTypeId('map_style2');

    carte.mapTypes.set('map_style1', planMap);
    carte.setMapTypeId('map_style1');

    <?php include("geolocalisation.js");?>
    ...