Compatibility with React Native? about google-maps-services-js HOT 9 CLOSED

@stephenmcd are you willing to accept a pull request to make compatible with react-native?

it would make this package https://github.com/FaridSafi/react-native-google-places-autocomplete easier to maintain

from google-maps-services-js.

One note on this - using the web services from a mobile device is highly discouraged, as it exposes your unrestricted API key to malicious users.

from google-maps-services-js.

@stephenmcd Indeed, it is not a perfect solution. I am using react-native-config to manage keys the best I can, but they still get bundled with the app and could get reverse engineered out I suppose.

Is there a better way to call these APIs from a React Native app?

from google-maps-services-js.

Best approach is a server-side component that acts as a proxy between devices and third-party APIs such as maps.

from google-maps-services-js.

I'll close this for now - we could probably get it working by swapping out https with fetch, but doing so would encourage insecure practices as mentioned above. You can always fork the library and patch it if you'd like to ignore this.

from google-maps-services-js.

How would you address the issues I mentioned?

from google-maps-services-js.

I think it is a good idea to move to fetch instead of https

making it available in react-native could be a good thing for simple demos

from google-maps-services-js.

Possible workaround is to use this library only for types, but send requests by anything our environment likes.

This is how I use it in Nitro on edge worker:

import { defaultUrl, PlaceAutocompleteRequest, PlaceAutocompleteResponseData } from '@googlemaps/google-maps-services-js/dist/places/autocomplete'

const { googleMapsApiKey } = useRuntimeConfig()

export default defineEventHandler<{ query: {
  input: string
  language: string
  sessionToken: string
} }>(async (event) => {
  const { input, language, sessionToken } = getQuery(event)

  try {
    const data = await $fetch<PlaceAutocompleteResponseData>(defaultUrl, {
      query: {
        input,
        language,
        key: googleMapsApiKey,
        sessiontoken: sessionToken,
      } as PlaceAutocompleteRequest['params']
    })
    if (data.status !== 'OK' && data.status !== 'ZERO_RESULTS')
      throw createError({ statusCode: 400, statusMessage: 'Bad Request' })

    return data
  }
  catch (err) {
    console.log(err)
    throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' })
  }
})

from google-maps-services-js.

Btw, on all frontends we need to use proper API key - read only access. It does not matter what client library we use.

from google-maps-services-js.