Unable to display 3 types of maps in Google Maps

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

For this, I write 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 code above, I can only display maps and satellite map types on the map. a third map type hybrid is not displayed on the map. Also, when I click on a type satellite, I get an option like Label. Therefore, I do not want to display the label option below the satellite.

+6
source share
3 answers

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

Please note that this flag is displayed only when you hover over the active button, so you will need to be in map mode to see the "Territory" flag under the button, and you must be in "Satellite" mode to set the Shortcuts!

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

When mapTypeControlOptions.style is switched to the drop-down list (DROPDOWN_MENU), instead of the (HORIZONTAL_BAR) buttons, more than two elements in the pop-up drop-down list will also not be displayed. Like buttons, there will be no more than two drop-down elements plus a flag for each of them.

+6
source

it looks like there can only be 2 of 4 MapTypeId on your map.

but you can get the hybrid card to install

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

anytime, be it a user, by clicking a link, a button, a timer, at the end of your code, etc.

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

ddd


I just discovered something new in the 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 “shortcuts” when you point the satellite "

the effect is the same as the presence of a “hybrid” version in version 2.

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

eee

+4
source

Adding a Google Earth map type to the screen disables the TERRAIN parameter under ROADMAP and the HYBRID option in SATELLITE.

0
source

Source: https://habr.com/ru/post/927576/


All Articles