# Problem with google map api integration in React Kibana Plugin

**URL:** <https://discuss.elastic.co/t/problem-with-google-map-api-integration-in-react-kibana-plugin/213486>\
**Category:** Kibana\
**Created:** [January 1, 2020, 11:37am UTC](https://discuss.elastic.co/t/problem-with-google-map-api-integration-in-react-kibana-plugin/213486 "2020-01-01T11:37:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![RaghibHuda](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/raghibhuda/32/59613_2.png) [@RaghibHuda](https://discuss.elastic.co/u/RaghibHuda)\
**Post date:** [January 1, 2020, 11:37am UTC](https://discuss.elastic.co/t/problem-with-google-map-api-integration-in-react-kibana-plugin/213486/1 "2020-01-01T11:37:46Z")

</div>

I am developing a custom plugin with React for Kibana. I need to use google geocode and reverse geocode from google map API. But I am facing a problem when I inject the API script in my react component. It seems like it refuses to connect the Google Map API network. So the API throws a network error.

` Refused to load the script 'https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&libraries=places%2Cgeometry' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.`

I checked the component in a fresh react app outside the Kibana. The map loads easily there. But facing problem in Kibana. I am using Kibana 7.4.2 in -oss mode in localhost and an ElasticSearch is running in Elastic Cloud.

How can I approach and solve this issue?

---

<div class="post-metadata">

**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\
**Post date:** [January 2, 2020, 4:13pm UTC](https://discuss.elastic.co/t/problem-with-google-map-api-integration-in-react-kibana-plugin/213486/2 "2020-01-02T16:13:24Z")

</div>

hi @RaghibHuda

Loading external scripts (from a different domain) are prohibited by the default Kibana content security policy. That is why it is preventing to load the Google Maps API script.

You can modify the csp-settings by editing the `csp.*` properties in the kibana.yml ([https://www.elastic.co/guide/en/kibana/current/settings.html](https://www.elastic.co/guide/en/kibana/current/settings.html)). To load external scripts, you would need a custom CSP.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 30, 2020, 4:13pm UTC](https://discuss.elastic.co/t/problem-with-google-map-api-integration-in-react-kibana-plugin/213486/3 "2020-01-30T16:13:26Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.