MapWithAMarker fails to rerender when marker position changes

I took the MapWithAMarker example :

import React from 'react';
import { compose, withProps, lifecycle} from 'recompose';
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker,
} from 'react-google-maps';
import keys from '../../components/config/keys';

const MapWithAMarker = compose(
    withProps({
        googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${keys.google_maps_api_key}&v=3.exp&libraries=geometry,drawing,places`,
        loadingElement: <div style={{ height: '100%' }} />,
        containerElement: <div style={{ height: '400px' }} />,
        mapElement: <div style={{ height: '100%' }} />,
    }),
    withScriptjs,
    withGoogleMap
)(props =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: props.lat, lng: props.lng }}>
        <Marker position={{ lat: props.lat, lng: props.lng }}/>
    </GoogleMap>
);

export default MapWithAMarker;

and I use it like this:

<MapWithAMarker lat={parseFloat(excursion.lat)}
                               lng={parseFloat(excursion.lng)} />

I use React router in my application.

Observed behaviour :
When i render the page for the first time, the map renders correctly.
If i click on a link to rerender the page with a different marker position, the map fails to load and just renders a empty grey rectangle with only "press ctrl plus scroll to zoom" when i scroll on it.

Expected behaviour :
The maps renders the new location.

There is also this issue which is about the same problem :
#242

I can make a basic repo to reproduce if needed.

I solved this by changing the defaultCenter by center:

  <GoogleMap
        center={{ lat: props.lat, lng: props.lng }}>
        <Marker position={{ lat: props.lat, lng: props.lng }}/>
    </GoogleMap>

[vhuytdt]

i get postion from ref's marker but undified..and value too..

[tomchentw]

It's a function. Call it .lat()