Google Map Javascript API in react-native

Question

Is it possible to use the javascript api without entirely being dependent to browser DOM to render the map, since react-native use View I feel it's possible to use the api somehow, The method on which to make the api available by passing to global windows also might be possible using fetch, but I don't know how to initiate the callback. If any one got idea how this can work, please share some thoughts

<script async defer
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

wscourge · Accepted Answer · 2019-02-20 17:48:32Z

5

The googlemaps node module @sunilp mentioned only gives you static maps, which are easy to build without relying on a lib, just search for google maps api static maps (don't have enough reputation to post more than two links).

For Android you have this: https://github.com/teamrota/react-native-gmaps

For iOS there's this, but it cautions it's a work in progress (it also hasn't been updated in months): https://github.com/peterprokop/ReactNativeGoogleMaps

Looking around, it seem your best (supported) bet for iOS today is to use React Native's own MapView if you search their docs. Then, you can make fetch calls to the Google Maps API services for the data, then populate MapView through its interface. Make sure you pass in your key and use https in your url otherwise the service will deny your call:

fetch(
    'https://maps.googleapis.com/maps/api/directions/json?origin=41.13694,-73.359778&destination=41.13546,-73.35997&mode=driver&sensor=true&key=[YOUR_KEY]'
)
.then(
    (response) => response.text()
)
.then(
    (responseText) => {
        console.log(responseText);
    }
)
.catch(
    (error) => {
        console.warn(error);
    }
);
`

edited Feb 20, 2019 at 17:48

wscourge

11.4k17 gold badges65 silver badges87 bronze badges

answered Feb 23, 2016 at 23:28

Andres Narvaez

5265 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peace Ngara Over a year ago

best answer ever Andres, I use react native from air bnb but the problem is viewport so I think I will be working with Fetch now ..

sunilp · Accepted Answer · 2015-10-21 13:08:58Z

1

Use node approach of rendering, not yet tried , but looks like it can be done with node-googlemaps

npm install googlemaps

usage

var GoogleMapsAPI = require('googlemaps');

var publicConfig = {
key: '<YOUR-KEY>',
stagger_time:       1000, // for elevationPath
encode_polylines:   false,
secure:             true, // use https
proxy:              'http://127.0.0.1:9999' // optional, set a proxy      for HTTP requests
};
var gmAPI = new GoogleMapsAPI(publicConfig);

you can refer https://github.com/moshen/node-googlemaps

answered Oct 21, 2015 at 13:08

sunilp

511 silver badge4 bronze badges

1 Comment

Fab Over a year ago

That module is meant to be used on a server. I would not advise to encode the API_KEY in a client for security reasons. I am maintaining that module and also working on react-native projects. I would be interested in knowing what you are trying to achieve @syarul

Collectives™ on Stack Overflow

Google Map Javascript API in react-native

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related