Allow to use custom version explicitly in GoogleMap (#550)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Allow to use custom version explictly in GoogleMap (not 'beta' by default now) [#550](https://github.com/CartoDB/carto-react/pull/550)
+
 ## 1.5
 
 ## 1.5.0-alpha.9 (2022-11-29)

DEVELOPERS.md

@@ -35,7 +35,7 @@ Then, inside the proper template folder in carto-react-template, link packages w
 
 You will need npm credentials under @carto organization.
 
-To make a **prerelease**:
+### To make a **prerelease**:
 
 1. Create a new branch from master, named after the new version (eg, if current version is v1.0.0-rc.2, `git checkout -b release-1.0.0-rc.3`)
 2. Modify the changelog, creating a new entry with current contents from `Not released` for the new release; eg: `## 1.0.0-rc.3 (2021-03-22)`. Keep 'Not released' header for the future work, and commit it to the new branch
@@ -48,10 +48,15 @@ To make a **prerelease**:
 9. Once the npm package has been published, `Merge the PR` to master from github
 10. Update the storybook (if required)
 
-To make an official **release**:
-
+### To make an official **release**:
 1. Repeat the same steps as in a prerelease, but executing `yarn publish:release`
 
+### To apply a hotfix patch
+- If change also applies to current master, it's recommended to start by creating a PR applying the fix it (to avoid forgetting it).
+- Then create a branch for the patch release, but this time start with the desired (usually stable) branch. For example, to create a patch 1.4.8, while not affecting current master, do `git checkout -b release-v1.4.8 release-v1.4.7`. Then apply there, locally, all changes as needed. If you created a first PR for master, you can use cherry-pick to share changes among master & patch.
+- After having everything ready, go as usual, with changelog entry + `yarn publish:release`
+
+
 ## Firebase deployment of storybook
 
 (Restricted to CARTO developers)

packages/react-basemaps/src/basemaps/GoogleMap.js

@@ -10,11 +10,12 @@ import { debounce } from '@carto/react-core';
  * @param { Object } props.basemap.options - *MapOptions* as defined by https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
  * @param { Object } props.viewState - Viewstate, as defined by deck.gl. Just center and zoom level are supported
  * @param { Layer[] } props.layers - deck.gl layers array
- * @param { function } props.getTooltip - (Optional). Tooltip handler
+ * @param { function } props.getTooltip - (Optional) Tooltip handler
  * @param { function } props.onResize - (Optional) onResize handler
  * @param { function } props.onViewStateChange - (Optional) onViewStateChange handler
  * @param { string } props.apiKey - Google Maps API Key
  * @param { string } props.mapId - Google Maps custom mapId
+ * @param { string } props.customVersion - (Optional) Google Maps custom version, that will be specified at url level. Eg: if customVersion === 'beta' it will use internally like https://maps.google.com/maps/api/js?v=beta
  * @returns { JSX.Element } - Data returned from the SQL query execution
  */
 export function GoogleMap(props) {
@@ -26,7 +27,8 @@ export function GoogleMap(props) {
     onResize,
     onViewStateChange,
     apiKey,
-    mapId
+    mapId,
+    customVersion = null
   } = props;
   // based on https://publiuslogic.com/blog/google-maps+react-hooks/
   const containerRef = useRef();
@@ -137,7 +139,10 @@ export function GoogleMap(props) {
       script.id = 'gmaps';
       script.async = true;
       script.type = `text/javascript`;
-      script.src = `https://maps.google.com/maps/api/js?v=beta&key=` + apiKey;
+
+      let url = `https://maps.google.com/maps/api/js?key=${apiKey}`;
+      if (customVersion) url = `${url}&v=${customVersion}`;
+      script.src = url;
       const headScript = document.getElementsByTagName(`script`)[0];
       headScript.parentNode.insertBefore(script, headScript);
       script.addEventListener(`load`, onLoad);