React-google-maps: unable to change language after changing the value in query

[imyagnesh]

I want to change language of the google map by passing language id(es or de) as a property.

following code is not working to change language dynamical.

import React, { PropTypes } from 'react';
import {
GoogleMap,
Marker,
} from 'react-google-maps';

import { default as ScriptjsLoader } from 'react-google-maps/lib/async/ScriptjsLoader';

import CircularProgress from 'material-ui/CircularProgress';

/*

• This is the modify version of:
• https://developers.google.com/maps/documentation/javascript/examples/event-arguments
  *
• Add to your HTML to provide google.maps reference
  *
• We use React 0.14 stateless function components here.
• https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components
  */
  const SimpleMap = ({ markers, containerElementProps, languageId }) => (
  
  hostname={'maps.googleapis.com'}
  pathname={'/maps/api/js'}
  query={{ v: '3.exp', libraries: 'geometry,drawing,places', language: languageId }}
  loadingElement={
  

  
  

  
  }
  containerElement={
  {...containerElementProps}
  style={{
  height: '25em',
  }}
  />
  }
  googleMapElement={
  ref={(map) => console.log(map)}
  defaultZoom={12}
  defaultCenter={{ lat: 12.849830, lng: 77.646654 }}
  >
  {markers.map((marker) => (
  {...marker}
  />
  )) }
  
  }
  />
  
  
  );

SimpleMap.propTypes = {
markers: PropTypes.array,
containerElementProps: PropTypes.object,
languageId: PropTypes.string.isRequired,
};

export default SimpleMap;

[tomchentw]

I don't think this is doable with Google Maps JavaScript API. Please check on StackOverflow.

Also, 6.0.0 is released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[mhrisse]

Hi @yagneshmodh & @tomchentw ! First of all thanks for working on this project still!

The Google Maps documentation explains you can define the language paremeter at API loading time by defining the language GET parameter. I implemented this simply like so:

let url = "https://maps.googleapis.com/maps/api/js?key=<API_KEY>&language=" + this.props.locale;

...

<AsyncGettingStartedExampleGoogleMap googleMapURL={url} ... >

I am getting the locale from a redux store. When I switch the first time between locales all renders perfectly (the Maps API is called again, then everything is re-rendered) and the maps are localized.

However, the rendering is wrong (e.g. when switching back to english the map keeps being in korean) and there is no new HTTP request send when I go to a language I've been to before again.

I am wondering: Is there some kind of caching within the async loading script, so the maps URL is not hit at all or might this be a life-cycle issue?

Any ideas welcome.

Cheers
M