Add support for new CameraControl introduced in Maps 3.58 #1233

Activity

1. BasSchoutenTribe commented on Aug 26, 2024

   

   BasSchoutenTribe

   on Aug 26, 2024

   Author

   More actions

   This is a communication we received form Google:

   Hello Google Maps Customer,

   We are changing the Google Maps JavaScript API controls to reduce the space they occupy on maps by default and to improve the accessibility of panning the map.

   We’re reaching out to you because we have observed one or more of the following criteria:

   Your end-users use the Zoom buttons significantly more than the average.
   One or more of your maps explicitly disables the Zoom control.
   One or more of your maps have customized controls.
   We have provided additional information below to guide you through this change.

   What you need to know
   Map controls are visual elements that allow user interaction with the map, including zooming the map, enabling Street View, and changing the Map Type.

   Version 3.58 adds a new Camera control in the Google Maps JavaScript API to make panning the map accessible with a single gesture. This feature will be available in the upcoming week. This new Camera control will feature buttons for panning the map and for zooming the map in and out, effectively being a single control to guide the map’s viewport.

   The upcoming changes are listed in the table below.

   DateAvailable in ChannelChanges ImplementedIn the upcoming weekIn the Beta channelThe updated default map controls will replace the Zoom control with the Camera control.In the upcoming week

   In the weekly channel

   Version 3.58 and version 3.59 will offer the Camera control without changing the default map controls.

   In November 2024

   In the quarterly channel

   In February 2025

   In the weekly channel

   Version 3.60 will contain the updated changes to the default map controls.

   In May 2025

   In the quarterly channel

   What you need to do
   Before the default controls are updated
   Test the new Camera control on your maps before the default changes in version 3.60 reach the weekly channel in February 2025 or the quarterly channel in May 2025.

   To test the Camera control:

   If you use default controls in your map options, specify the Beta channel to see how the default controls will change.
   If you do not use the default controls, or prefer not to change to the Beta channel in your loader, enable the Camera control, and optionally disable the Zoom control, in google.maps.MapOptions.

   After the default controls are updated
   Consider taking one of the following actions after the default controls are updated to include the Camera control instead of the Zoom control in version 3.60 in February 2025 for the weekly channel and May 2025 for the quarterly channel.

   If your code explicitly enables the Zoom control (zoomControl: true), both the Zoom control and the Camera control will be displayed. Consider choosing one to save on map space.
   If your code explicitly disables the Zoom control (zoomControl: false), you may also want to disable the Camera control.
   If your code explicitly enables the Zoom control (zoomControl: true) while keeping the default controls disabled (disableDefaultUI: true), only the Zoom control will be displayed. For better accessibility, consider enabling the Camera control instead.

   If more time is needed
   If you need more time before adopting the default controls, you can specify version 3.59 which will be available until February 2026.

   We’re here to help
   Refer to our Maps Javascript API documentation for information about how to edit google.maps.MapOptions to enable cameraControl.

   If you have any other questions or need additional support, please contact us at Google Maps Platform Support.

   Thanks for choosing Google Maps Platform.
2. subash24 commented on Sep 20, 2024

   

   subash24

   on Sep 20, 2024

   More actions

   @BasSchoutenTribe Any updates on this? We too received this email and looking for options.
3. BasSchoutenTribe commented on Sep 23, 2024

   

   BasSchoutenTribe

   on Sep 23, 2024

   Author

   More actions

   Unfortunately no
4. supagu commented on Nov 25, 2024

   

   supagu

   on Nov 25, 2024

   Last edited by supagu

   More actions

   We also received this email.

   I switched to beta channel to test the upcoming changes:

   <GoogleMapReact bootstrapURLKeys={{ key: config.GOOGLE_MAPS_API_KEY, version: 'beta' }} ...

   It seems to be of negligible impact for us.
5. BasSchoutenTribe commented on Dec 17, 2024

   

   BasSchoutenTribe

   on Dec 17, 2024

   Author

   More actions

   @supagu Do you mean with "negligible impact" that no changes are needed?
6. David-Michael-Rice commented on Feb 3, 2025

   

   David-Michael-Rice

   on Feb 3, 2025

   More actions

   I suppose the change looks and functions better for mobile devices, though I would like the camera control to include tilt and heading.

   ` map = new google.maps.Map(document.getElementById('map'), {
   center: { lat: 37.051940, lng: -106.542723 },
   mapId: "[map ID with vector]",
   cameraControl: true,
   zoomControl: false,
   tilt: 0,
   heading: 0,
   zoom: 12,
   mapTypeId: google.maps.MapTypeId.HYBRID,
   isFractionalZoomEnabled: false,

   	CameraControlOptions: {
   		position: google.maps.ControlPosition.INLINE_END_BLOCK_START,
   	},
   });`
   

   No where have I found a source for knowing the maximum tilt allowed at what zoom level. That would be helpful to enable and disable tilt buttons (or slider) based upon zoom level. This is what I derived:

   08 - 30 09 - 30 10 - 30 11 - 33.75 12 - 37.5 degrees 13 - 41.25 14 - 45 15 - 60 16 - 67.5 17 - 67.5

   That is zoom level - maximum tilt in degrees.
7. estiven-lg commented on Jul 25, 2025

   

   estiven-lg

   on Jul 25, 2025

   More actions

   Starting with Google Maps API v3.58, a new CameraControl (currently in beta) has been introduced. This feature will be enabled by default in v3.60.

   To configure its position, you can use the following approach in your React component:

   const options = (map) => ({
     cameraControl: true,
     cameraControlOptions: {
       position: map.ControlPosition.INLINE_END_BLOCK_START, // Adjust position as needed
     },
   });
   

   Then, pass it to your GoogleMap component:

   <GoogleMap
     bootstrapURLKeys={{ key: "your-google-maps-api-key" }}
     zoom={positionMap.zoom}
     center={positionMap.coords}
     onDragEnd={onChangeMap}
     options={options} // Apply the camera control settings
     onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
     yesIWantToUseGoogleMapApiInternals
   />
   

   Notes:
   The CameraControl is in beta, so its behavior might change slightly before the official release in v3.60.

   Available positions include:

   INLINE_START

   INLINE_END

   BLOCK_START

   BLOCK_END

   INLINE_START_BLOCK_START

   INLINE_START_BLOCK_END

   INLINE_END_BLOCK_START

   INLINE_END_BLOCK_END

   For more details, check the Google Maps JavaScript API Reference.