Unable to display 3 map types in Google Maps

Question

I am new to Google Maps.
I want to display Google maps with three different map types(map,satellite,Hybrid) in the map.

For that I am writing code like

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(35.02, 111.02),
    zoom: 8, mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE,google.maps.MapTypeId.HYBRID]
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

But with the above code I am able to display only Map and satellite map types in the map. the third map type hybrid is not displaying in the map. Also when I click on the type satellite I am getting an option like Label . So I don't want to display the label option under satellite.

Answer 1

Maps v3 will always condense the four available mapTypeIds (HYBRID, ROADMAP, SATELLITE, TERRAIN) into two buttons plus a checkbox for each of these buttons. So SATELLITE + HYBRID will give you a Satellite button with a Labels checkbox and ROADMAP + TERRAIN will give you a Map button with a Terrain checkbox.

Please note that the checkbox is only shown when you hover over an active button, so you will have to be in Map mode to see the Terrain checkbox under the button and you must be in Satellite mode to see the Labels checkbox!

It is interresting to see that there actually is a Hybrid button, but it only becomes visible when you add HYBRID to the mapTypeIds without adding SATELLITE. The same is true for the Terrain button, which only becomes visible when you add TERRAIN to the list, but not ROADMAP.

Switching the mapTypeControlOptions.style to a dropdown box (DROPDOWN_MENU) instead of buttons (HORIZONTAL_BAR) will also not reveal more than two items in the resulting dropdown box. Just like the buttons there will be a maximum of two dropdown items plus a checkbox for each of them.

Answer 2

looks like you can have only 2 of the 4 MapTypeId labels on your map.

but you can can force the map to hybrid by setting

map.setMapTypeId(google.maps.MapTypeId.HYBRID)

at any time, be it the user clicking a link, a button, a timmer, at the end of your code, etc.

check this jsfiddle: http://jsfiddle.net/RASG/vDLfs/

---

i just discovered something new on a google group.

when you add google.maps.MapTypeId.HYBRID to mapTypeIds, and you already have google.maps.MapTypeId.SATELLITE, instead of showing both options google maps now add an option called "labels" when you mouseover "satellite".

the effect is the same as having the "hybrid" option in v2.

check the updated jsfiddle: http://jsfiddle.net/RASG/vDLfs/6/