diff --git a/static/js/theme-map/ThemeMap.js b/static/js/theme-map/ThemeMap.js
index 368ba04a0..a82d4d7c2 100644
--- a/static/js/theme-map/ThemeMap.js
+++ b/static/js/theme-map/ThemeMap.js
@@ -5,10 +5,7 @@ import { RendererOptions } from './Renderer/Renderer.js';
 import { PinProperties } from './Maps/PinProperties.js';
 import { PinClustererOptions } from './PinClusterer/PinClusterer.js';
 import { transformDataToUniversalData, transformDataToVerticalData } from './Util/transformers.js';
-import { getEncodedSvg } from './Util/helpers.js';
-
-import { GoogleMaps } from './Maps/Providers/Google.js';
-import { MapboxMaps } from './Maps/Providers/Mapbox.js';
+import { getEncodedSvg, getMapProvider } from './Util/helpers.js';
 
 import ThemeMapConfig from './ThemeMapConfig.js'
 import StorageKeys from '../constants/storage-keys.js';
@@ -106,7 +103,7 @@ class ThemeMap extends ANSWERS.Component {
    * Load the map provider scripts and initialize the map with the configuration options
    */
   async loadAndInitializeMap () {
-    const mapProviderImpl = (this.config.mapProvider === 'google') ? GoogleMaps : MapboxMaps;
+    const mapProviderImpl = getMapProvider(this.config.mapProvider);
     await mapProviderImpl.load(this.config.apiKey, {
       client: this.config.clientId,
       language: this.config.language,
diff --git a/static/js/theme-map/Util/helpers.js b/static/js/theme-map/Util/helpers.js
index dc4ff5a75..cea340bd1 100644
--- a/static/js/theme-map/Util/helpers.js
+++ b/static/js/theme-map/Util/helpers.js
@@ -1,3 +1,6 @@
+import { GoogleMaps } from '../Maps/Providers/Google.js';
+import { MapboxMaps } from '../Maps/Providers/Mapbox.js';
+
 /**
  * Gets the language locale according to specific fallback logic
  * 1. The user-specified locale to the component
@@ -5,24 +8,41 @@
  * 3. If still invalid, providers fallback to en
  *
  * @param {string} localeStr The user-defined locale string
- * @param {string[]} supportedLocales The locales supported by the current map provider
+ * @param {string} mapProvider name of the current map provider
  * @return {string} The language locale for the map
  */
-const getLanguageForProvider = (localeStr, supportedLocales) => {
+const getLanguageForProvider = (localeStr, mapProvider) => {
   if (localeStr.length == 2) {
     return localeStr;
   } 
 
   if (localeStr.length > 2) {
-    if (supportedLocalesForProvider.includes(localeStr)) {
-      return localeStr;
-    } 
+    const provider = getMapProvider(mapProvider);
+    const formattedLocaleStr = localeStr.replace('_', '-');
+    if (provider.getSupportedLocales().includes(formattedLocaleStr)) {
+      return formattedLocaleStr;
+    }
     return localeStr.substring(0, 2);
   }
-
   return 'en';
 };
 
+/**
+ * Returns the corresponding MapProvider instance (Default to MapBox)
+ * 
+ * @param {string} mapProvider
+ * @return {MapProvider}
+ */
+const getMapProvider = (mapProvider) => {
+  if (mapProvider === 'google') {
+    return GoogleMaps;
+  }
+  if (mapProvider === 'mapbox') {
+    return MapboxMaps;
+  }
+  return MapboxMaps;
+}
+
 /**
  * Returns a utf-8 encoding of an SVG
  *
@@ -124,6 +144,7 @@ const removeElement = (element) => {
 
 export {
   getLanguageForProvider,
+  getMapProvider,
   getEncodedSvg,
   getNormalizedLongitude,
   isViewableWithinContainer,
diff --git a/tests/static/js/theme-map/Util/helpers.js b/tests/static/js/theme-map/Util/helpers.js
index e45250ef7..910c5c87b 100644
--- a/tests/static/js/theme-map/Util/helpers.js
+++ b/tests/static/js/theme-map/Util/helpers.js
@@ -1,4 +1,7 @@
-import { getNormalizedLongitude } from 'static/js/theme-map/Util/helpers.js';
+import { getNormalizedLongitude, getLanguageForProvider, getMapProvider } from 'static/js/theme-map/Util/helpers.js';
+import { GoogleMaps } from 'static/js/theme-map/Maps/Providers/Google.js';
+import { MapboxMaps } from 'static/js/theme-map//Maps/Providers/Mapbox.js';
+
 
 describe('getNormalizedLongitude', () => {
   describe('it works within normal longitude bounds', () => {
@@ -52,3 +55,32 @@ describe('getNormalizedLongitude', () => {
     });
   });
 });
+
+describe('getMapProvider', () => {
+  it('returns the right mapProvider instance', () => {
+      expect(getMapProvider('google')).toEqual(GoogleMaps);
+      expect(getMapProvider('mapbox')).toEqual(MapboxMaps);
+  }); 
+
+  it('returns MapBox on unsupported mapProvider name', () => {
+    expect(getMapProvider('unknown')).toEqual(MapboxMaps);
+  });
+});
+
+describe('getLanguageForProvider', () => {
+  describe('it works with different language/locale pairs', () => {
+    it('works with map provider google', () => {
+      expect(getLanguageForProvider('en', 'google')).toEqual('en');
+      expect(getLanguageForProvider('a', 'google')).toEqual('en');
+      expect(getLanguageForProvider('en-IDK', 'google')).toEqual('en');
+      expect(getLanguageForProvider('en-GB', 'google')).toEqual('en-GB');
+      expect(getLanguageForProvider('en_GB', 'google')).toEqual('en-GB');
+    });
+
+    it('works with map provider mapbox', () => {
+      expect(getLanguageForProvider('a', 'mapbox')).toEqual('en');
+      expect(getLanguageForProvider('fr', 'mapbox')).toEqual('fr');
+      expect(getLanguageForProvider('fr-CA', 'mapbox')).toEqual('fr');
+    });
+  });
+});