Error using Reactive Maps with Google maps Javascript Api

Question

I am trying to build and app with ReactiveSearch and ReactiveMaps using some indexed files in Elasticsearch.

The indexed files in Elasticsearch have a field "location", for example:

        "location": {
        "Lat": 56.746423,
        "Lon": 37.189268
      }

And other fields like "Title" or "Authors".

I got a Google maps API key and in my App.js file I have these components:

      <DataSearch
        componentId="mainSearch"
        dataField={["Title", "Title.search", "Abstract", "Abstract.search"]}
        queryFormat="and"
        placeholder="Search for HEP"
        autosuggest={true}
        className="datasearch"
        innerClass={{
          input: "searchbox",
          list: "suggestionlist"
        }}
      />

        <ReactiveMap
        componentId="map"
        dataField="location"
        size={100}
        defaultZoom={13}
        defaultCenter={{ lat: 37.74, lng: -122.45 }}
        showMapStyles={true}
        defaultMapStyle="Standard"
        showMarkerClusters={true}
        showSearchAsMove={true}
        searchAsMove={true}
        react={{
          and: "mainSearch"
        }}
        onData={result => ({
          label: result.Title
        })}
      />

in the same file ("App.js") I have this lines :

  <ReactiveBase
    app="title"
    url=here_the_elasticsearch_cluster
    mapKey="here_my_googlemapsAPI_key"
  >

Also in the file Public/index.html I have

<script
  type="text/javascript"
  src="https://maps.google.com/maps/api/js?v=3.34&key=MY_GOOGLE_MAPS_API_KEY&libraries=places"
></script>

However, When I search for any documents in the mainBar I found it, but, when I click on it it doesnt appear in the map.

What am I doing wrong?

Answer 1

Finally I have solved it. ReactiveMaps does not allow the location field in uppercase, so I had to change the indexed documents in elasticsearch taking in account this.

    "location": {
    "lat": 56.746423,
    "lon": 37.189268
  }