Is there a way to import a script package from URL?

Question

I'm using React and I want to use a package which can only retrieved as an URL. In HTML it's easy to import using the script tag, but how to import to a JavaScript file?

What I want is to convert this

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

into something like this

import 'https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'

Possible duplicate of [How do I link a JavaScript file to a HTML file?](https://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file) — Liam, Oct 22 '18 at 12:18
https://stackoverflow.com/questions/34607252/es6-import-module-from-url — epascarello, Oct 22 '18 at 12:24
Possible duplicate of [ES6: import module from URL](https://stackoverflow.com/questions/34607252/es6-import-module-from-url) — Baptiste Candellier, Oct 22 '18 at 12:30
And google maps uses document.write so highly doubt it would work anyway if you could. — epascarello, Oct 22 '18 at 12:33
why do you want to import it to a js file, and not import it to `index.html` directly using the script tag? is it causing some issue in your app when you import it like this? — c-chavez, Oct 22 '18 at 14:19
@c-chavez It throws an error which says that the objects of the script aren't defined — Gergő Horváth, Oct 22 '18 at 14:52

c-chavez · Answer 1 · 2018-10-22T19:02:07.083

Based on your comment when you import it directly in your html:

It throws an error which says that the objects of the script aren't defined

I think the best approach here is to not try to import the js in another js file, but use the React google maps library instead, so you don't go through these hacks.

Try it and let us know.

The reason for this answer is that, even if you get the script working by adding another js file into your own js file, google maps api js will do more things that will give you trouble and issues in React (like the one you are having right now), and these issues have already been solved by this library.

Have a read at the official documentation to see if it works for you.

Example

There is a good tutorial and very basic example using this library here.

Example of using latitude and longitude (taken from this tutorial):

const GoogleMapExample = withGoogleMap(props => (
   <GoogleMap
     defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
     defaultZoom = { 13 }
   >
   </GoogleMap>
));
return(
   <div>
     <GoogleMapExample
       containerElement={ <div style={{ height: `500px`, width: '500px' }} /> } 
       mapElement={ <div style={{ height: `100%` }} /> }
     />
   </div>
);

Alternative library

Alternatively, you could use this library, as it is another react library for rendering google maps.

google-map-react

You can also follow this tutorial with this library.

These libraries have plenty of supporters and stars, meaning that you can always count on updates and helpful information.

I just want to read the city from latitude and longitude, and as I see this api can't show it. (I didn't know that it will be so complicated) — Gergő Horváth, Oct 22 '18 at 15:47
@GergőHorváth have a look at my update and see if that helps you. — c-chavez, Oct 22 '18 at 19:02

Is there a way to import a script package from URL?

1 Answers1