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