Google Maps JS API – heading and tilt not working despite using vector map with mapId

Question

I'm trying to enable tilt and heading rotation on a Google Map using the @react-google-maps/api library in a React app.

I have:

Created a Map ID via Google Cloud Console with:
- Map type: JavaScript
- Vector selected (not raster)
- Tilt and Rotation enabled (see screenshot below)
Confirmed the Map ID and API Key are from the same Google Cloud project.
Zoom level set to 18.
tilt and heading props set on <GoogleMap>.
- API version is default (should be the latest).

Problem:

Despite setting mapId, heading={90}, and tilt={45}, the map does not rotate or tilt. Also, in the onLoad callback, calling map.getRenderingType() returns "UNINITIALIZED". This suggests it's not rendering in vector mode, which is required for tilt/heading.

Here’s my simplified code:

const containerStyle = {
    width: '100%',
    height: '400px',
};

const center = {
    lat: 50.9932083,
    lng: 10.0492926,
};

const onLoad = (map) => {
    console.log('Tilt:', map.getTilt());            
    console.log('Heading:', map.getHeading());      
    console.log('Rendering Type:', map.getRenderingType()); // UNINITIALIZED
};

<GoogleMap
    mapContainerStyle={containerStyle}
    center={center}
    zoom={18}
    tilt={45}
    heading={90}
    mapId="..."
    onLoad={onLoad}
/>

What I’ve tried:

Verifying mapId configuration (screenshot below)
Zoomed to level 18
Hardcoded tilt/heading
Calling setTilt() and etHeading() manually in onLoad
Logging rendering type → always "UNINITIALIZED"

Questions:

Is this a bug or am I missing something?
How can I force vector rendering in React, or do I need to fall back to native JS init with google.maps.importLibrary("maps")?

Any help is appreciated! MapId configuration

The rendering type becomes available after the map has fully initialized. Try listening for the projection_changed event to determine when the map is ready: ``` [map.addListener('projection_changed', () => { const renderingType = map.getRenderingType(); console.log('Rendering Type:', renderingType); }); ] ``` See this link below for more details: developers.google.com/maps/documentation/javascript/reference/… — Lanceslide
– Lanceslide, Commented May 19 at 8:56

Adrian Krafft · Accepted Answer · 2025-06-02 08:25:55Z

1

The soultion was rather simple. The mapId had to be defined in the options attribute, not as its own attribute:

options={{ mapId: '...', }}

edited Jun 2 at 8:25

answered May 21 at 14:16

Adrian Krafft

114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google Maps JS API – heading and tilt not working despite using vector map with mapId

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related