How to disable 45 degree option in Google Maps Javascript API 3.x

Question

I want remove the option for the user to put the map into 45 degree tilt mode from the satellite view. I can set the default tilt by calling setTilt(0) on the Map object, but when the map is displayed, and the user clicks on the Satellite option in upper right of map, it still shows the 45 degree option.

How can I eliminate the 45 degree option, and still have the user able to switch between road and satellite view.

Palpitation

I don't think this is possible. Not only is it not mentioned in the documentation, there's nothing easily accessible in the API either. – Mainz

Answer 1

I've done this by reimplementing the "mapTypeControl" manually. then you have control over exactly what is included.

(I did this because there used to be no way of not includeing the Terrain option - but that has been fixed now. Its the same basic issue)

Can use this example as a starting point: http://gmaps-samples-v3.googlecode.com/svn/trunk/controls/index.html

Dowser

Ok, thanks, I don't suppose you can point me towards a code sample with a custom mapTypeControl? – Palpitation

We removed the code from the project I working on - as I say issue with excluding terrain has been fixed in the original. I might be able to find the code if really go digging. But it was a pretty much based on an example from Google (so got all the CSS etc) - I've updated the reply with the link. – Dowser

This is why answers should always include some code. So when the links are dead, the answer is still relevant. – Teniers

From the above answer in the MapOptions set { disableDefaultUI: true, rotateControl: false, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, fullscreenControl: true ... } – Sarpedon

Answer 2

The best kludge I've found to solve this involves both setting the tilt parameter in map options, and also hiding the popup using css attribute selectors. In the other solutions, a user can still switch manually to the 45º view.

Map Options

var mapOptions = {
    tilt:0,
    //all other map options
}

CSS to hide the popup (when mousing over the 'Satellite' control).

[title=Show\ 45\ degree\ view]
{
    display:none;
}

Corrigendum

You should avoid using localized text when selecting elements in css, when possible. What happens with this solution when the client is viewing your page in German? – Brisling

To hide the tilt button whithin Google Map use either of these options: .gm-tilt { display: none;} $(".gm-tilt").hide(); – Alienism

Answer 3

I looked at the google maps javascript documentation and found this:

rotateControl enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery.

It's not really clear, but testing with the below code hid the tilt control also.

The code:

let mapOptions = { 
    //other options here
    tilt: 0,
    rotateControl: false
}

Helotry

Answer 4

var mapOptions = {
    center: mycenter,
    zoom: 7,
    tilt: 0,

this codes disables the 45 degree view forever, but i could not remove it.

editED

Clink

Doesnt work. The Dropdown version of the menu, still includes the 45degree imagry as an option. (only appears when you select satalite). Demonstrator: nearby.org.uk/google/nolabels-drop.php (zoom to say Rome) – Dowser

there is no defined way to remove 45 degree view. it is only appears 45 degree imagery available places. (maps.google.com/maps/…) try to define "setTilt" & "getTilt" in javascript. and "tilt" also associated with zoom level.. – Clink

Ha, that code (in the edited reply) is just stolen from the link I posted in previous comment - guess you found the View Source feature. Deleting your comment, is also kind of deceptive. Becides the edited code add nothing to your original reply! – Dowser

i was added "tilt:0" and it works. i know it is yours, and i want to solve a problem.. – Clink

Still doesnt anything more than than setTilt(0) did - as the OP mentioned in the actual question. – Dowser

Answer 5

Another alternative is to add an event listener to force tilt to be 0. This is in addition to setting tilt: 0 in your map's options as others recommend.

It does not remove the UI, but does prevent any view except overhead. It's language-independent, and you don't have to keep your CSS updated.

E.g.:

google.maps.event.addListener(map, 'tilt_changed', function() {
    if (map.getTilt() != 0) {
        map.setTilt(0);
    }
});

Claptrap

This worked for me as, even when setting default tilt to 0 upon init, satellite gets tilted again when zooming. I applied this concept to the zoom listener instead and it now stops the tilt from being reapplied when zooming which is what I was looking for. Thanks. – Nightshirt

Answer 6

I found you need a slightly different CSS to hide the 45 degree selector:

[title=Show\ 45\ degree\ view], [title=Zoom\ in\ to\ show\ 45\ degree\ view], [title=Zoom\ in\ to\ show\ 45-degree\ view] {
  display:none !important;
}

Update, found yet another title used when maps are viewed on mobiles devices.

Discarnate

Man this is ugly, but I voted it up because all solutions here seem to be pretty ugly and this one is at least minimal. – Alwyn

Answer 7

In 2024 this seems to be the best solution available with MapOptions.

let mapOptions = {
    tilt: 0,
    rotateControl: false,
};

Dyl