Customize default mapType button in Google API

Question

I am trying to customize the default mapType button in Google API. What I am trying to do is trying to increase the height for the box of mapType and here is the code:

function initLeftMap(initialMapTypeId, planClicked) {
var initialMap_url;
var initialMap_name;
var initialMap_svc = new gmaps.ags.MapService(initialMap_url);
google.maps.event.addListenerOnce(initialMap_svc, 'load', function () {
    try {
        if (initialMapTypeId == "onemap") {
            initialMap_svc.spatialReference.wkid = 3414;  // impt! or else
            // overlays
            // can't show on
            // onemap

        }

        var initialMap_tileLayer = new gmaps.ags.TileLayer(initialMap_svc);
        var initialMap_agsType = new gmaps.ags.MapType([initialMap_tileLayer], {
            name: initialMap_name
        });
        var myOptions = {
            zoom: 12,
            maxZoom: 18,
            minZoom: 11,
            backgroundColor: '#fff',
            center: new google.maps.LatLng(1.347074, 103.81382),
            mapTypeId: initialMapTypeId, // google.maps.MapTypeId.ROADMAP
            mapTypeControlOptions: {
                mapTypeIds: [initialMapTypeId,
                                google.maps.MapTypeId.ROADMAP,
                                google.maps.MapTypeId.SATELLITE,
                                google.maps.MapTypeId.HYBRID],
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            streetViewControl: true,
            scaleControl: true
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        map.mapTypes.set(initialMapTypeId, initialMap_agsType);

                    google.maps.event.addListener(map, 'maptypeid_changed', function (e) {
            toggleBaseMapLegend();
        });

        initRightMap(initialMapTypeId, initialMap_agsType, planClicked);
        //load the last viewed extent
        loadLastState();

        // init after map is created
        initBuffer(map);
    } catch (e) {
        alert(e);

    }
});
}

I wonder is there any way to style it by using css under the style tag? Or is there any better way to customize it by increasing the height of the box only?

Thanks in advance.

Answer 1

It is possible, yes. It's not particularly easy, since Google don't give you many hooks to nail down that div and it's not a documented feature so they could change it whenever they want.

Looking at the page source, your best bet is to use the gm-style-mtc class to target the base div of the map selector:

<div class="gmnoprint gm-style-mtc" style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; text-align: left; width: 200px; right: 0px; top: 0px; background-color: rgb(255, 35, 0);">

So your CSS becomes:

<style>
     .gm-style-mtc > div:first-child {
         width: 150px;
         height: 60px;
         ...and so on
     }
</style>

You can target the children (the individual options in the dropdown, etc) by using some combination of .gm-style-mtc > div, gm-style-mtc > div > div etc. Endless fun to be had with child selectors.

This question might be useful to you as well.