Question

I want to show 3 map type controls: [‘roadmap’, ‘satellite’, ‘hybrid’] on GoogleMap in my website, but it always show only ‘roadmap’, and ‘satellite’ with a checkbox ‘Label’ under ‘satellite’ as dropdown menu.

Here is the code:

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid'],
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
  });
}

How can I show 3 of them(map type controls) in a row on google map.

Answer 1

Create a custom control for the hybrid-mapType