Use google map API in a react babel component - google-maps

I currently try to use google map API with react js and babel. I don't want to use the existing react components (that are uncomplete).
The problem I encounter is that I can't load the google map object. Babel always show me a compilation error like this one :
error 'google' is not defined
Event if I load the google map script in my index :
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete" ></script>
I understand that babel doesn't load the google map library at compile time, but try to compile some code lines like this :
var map = new google.maps.Map(document.getElementById('map')...
Is there someone who know how to handle this case ?
Thank you


Install the google maps api npm module and import it into your relevent files. https://www.npmjs.com/package/google-maps

Related

Didn't find class "com.android.volley.toolbox.JsonObjectRequest" on path: DexPathList

I am using https://github.com/DWorkS/VolleyPlus library for implementing multipart in my project but this library conflicted with compile 'com.android.volley:volley:1.0.0' dependency says " Program type already present: com.android.volley.BuildConfig" for this i included configurations {all*.exclude group:'com.android.volley'} im my build.gradle then it worked fine.But when i integrated places api in my app and starts seaching places ,the app crashes and
it prompt error 'Didn't find class "com.android.volley.toolbox.JsonObjectRequest" on path: DexPathList'.
Please help me!

Using google maps api in custom widget of ThingsBoard.io

In ThingsBoard.Io you can create your own custom widget and I would like to be able to use the google maps library in it. However i can't get the library to load correctly.
I'm adding "http://maps.googleapis.com/maps/api/js?key=ABC" (also adding callback parameter doesn't help) to the resource tab and the error I get back is "Error: TypeError: $ is not a constructor
Line 636 column 31338 of script."
Anyone a solution to alternatively load that google library correctly?

Add this to the HTML tab in the widget editor solved the problem:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

ES6 import module difficulty

I'm new to ES6, and I'm struggling to import a notification module "toaster-js" to my "sw-toolbox" (service worker cache API) script.
Specifically I want to alert the end user when a cache download has finished, and my PWA is available for offline browsing.
I can't figure out where to stick
import { Toast } from "toaster-js";
without incurring various syntax errors, mainly "import declarations may only appear at top level of a module" and "Unexpected token {"
If I try loading it through html by declaring <script type="module" [...]>, then the relevant handlers aren't recognized by my sw-toolbox script.
Any pointers would be much appreciated!
Thanks

google is not defined in react app using create-react-app

I create a react app using the cli called create-react-app. Look like Facebook did lots of things underneath, such as webpack etc. However, I guess it may also has some limitations. I try to follow this tutorial to load google map api. And when I debug my code, I can see the google map has been successfully referenced..
But then I click play and let application finishes running. I got google is not defined error from webpackHotDevClient.js and my application crashes.
Since webpack compile the files on the fly, I assume it has trouble to load google map via https?
Any thoughts?

As mentioned in the user guide, you need to explicitly read any global variables from window. Put this at the top of the file and it will work:
const google = window.google;
The reason we enforce this is because people commonly misunderstand the difference between local variables, imported modules, and global variables, and so we want to always make it clear in the code when you use a global variable.
By the way, this is not related to Webpack or HTTPS. You see this because we use a linting rule that forbids unknown global variables.

I think the google variable is already available when you import google map from script in html. This error caused by Eslint, you can try and add the below line to the top of your file to disable ESlint
/*global google*/

I have a better solution then #Dan's you can do it like this
window.google = window.google ? window.google : {}
OR
const google = window.google = window.google ? window.google : {}
If google is available then no problem if not then empty Object will be temporarily assigned till your scripts are loaded.
In case es-lint throws undefined google error, update the globals in eslint configuration file:
{
"globals": {
"google": "readonly"
}
}
OR
For a specific file use case define like below on the top of the file
/*global google*/

Hi you can use withGoogleMap like so:
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps";
const google = window.google;
class MapComponent extends Component {
....
<GoogleMap>
.....
.....
.....
</GoogleMap>
export default withGoogleMap(MapComponent);

.eslintrc.json
{
// ...
"globals": {
"google": "readonly"
}
}

yarn add #types/googlemaps
OR
npm i --save #types/googlemaps

nativescript-google-maps-sdk use native calls to style the map

I successfully integrated a google map at my angular2+nativescript project. Everything I needed from the typescript definition file is working for me.
However, I wanted to play around with the styling of the map. AFAIK, I have to use native calls to the map, as the method setMapStyle() is not in the typescript definition.
I thought I could use the gMap property to access the native object and call the method. But I fail in setting up the right parameter as requested in google docs (https://developers.google.com/maps/documentation/android-api/styling) as I dont know how to create a MapStyleOptions object. The type is unknown.
Anyone tried or succeeded in this task yet and want to share some hints? How would you access native GoogleMap?

NativeScript allows you to access all public API of plugins used in the app, therefore you should be able to make native calls to the Map API as per the documentation at nativescript.org
If you want to create a MapStyleOptions object for example, you'd write
var MapStyleOptions : any = com.google.android.gms.maps.model.MapStyleOptions;
var mapStyle : any = new MapStyleOptions({"..":".."});
or just var mapStyle = new com.google.android.gms.maps.model.MapStyleOptions({"..":".."});
When TypeScript complains about com.google... not being recognized, you can either define it as any or import some ready to use typings.
Good luck!