CODEWITHSUNDEEP
google-maps-api-3react-native
syarul
syarul

Reputation: 2189

Google Map Javascript API in react-native

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>

Upvotes: 4

Views: 10309

Answers (2)

Andres Narvaez
Andres Narvaez

Reputation: 526

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);
    }
);
`

Upvotes: 5

sunilp
sunilp

Reputation: 51

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

Upvotes: 1

Related Questions