React Native Maps - Displaying markers from JSON file using Google Maps API

Question

I'm using the Google Maps API for a screen in my React Native app. Currently I am able to display markers, however they are static - I've written each location in manually, seen below:

function MapScreen(props) {
    return (
      <SafeAreaView style={styles.container}>
        <MapView 
          style={StyleSheet.absoluteFillObject}
          customMapStyle={mapStyle}
          showsUserLocation={true}
          provider={PROVIDER_GOOGLE}
          initialRegion={{latitude: 48.859402329205615,longitude: 2.350319507571479,latitudeDelta: 0.112,longitudeDelta: 0.112,}}>
          <Marker 
            coordinate={{latitude: 48.860743444869,longitude: 2.33765948065037,}}
            title="Louvre Museum"
            description="Former historic palace housing huge art collection, from Roman sculptures to da Vinci's 'Mona Lisa.'"
          />
          <Marker 
            coordinate={{latitude: 48.8738950614665,longitude: 2.29503917806517,}}
            title="Arc de Triomphe"
            description="Iconic triumphal arch built to commemorate Napoleon's victories, with an observation deck."
          />
          <Marker 
            coordinate={{latitude: 48.8584176451512,longitude: 2.29446518532972,}}
            title="Eiffel Tower"
            description="Gustave Eiffel's iconic, wrought-iron 1889 tower, with steps and elevators to observation decks."
          />
        </MapView>  
      </SafeAreaView>
    );
}
export default MapScreen;

However I was to add many more markers and be able to easily update the map. I have the same data stored in a JSON file, which is stored at the path: "./constants/ParisLocations.json"

The JSON is formatted like so:

[
 {
   "siteName": "Louvre Museum",
   "Latitude": 48.86074344,
   "Longitude": 2.337659481,
   "Description": "Former historic palace housing huge art collection, from Roman sculptures to da Vinci's \"Mona Lisa.\""
 },
 {
   "siteName": "Arc de Triomphe",
   "Latitude": 48.87389506,
   "Longitude": 2.295039178,
   "Description": "Iconic triumphal arch built to commemorate Napoleon's victories, with an observation deck."
 },
 {
   "siteName": "Eiffel Tower",
   "Latitude": 48.85841765,
   "Longitude": 2.294465185,
   "Description": "Gustave Eiffel's iconic, wrought-iron 1889 tower, with steps and elevators to observation decks."
 },
 {
   "siteName": "Cathédrale Notre-Dame",
   "Latitude": 48.85294707,
   "Longitude": 2.350142233,
   "Description": "Towering, 13th-century cathedral with flying buttresses & gargoyles, setting for Hugo's novel."
 },
 {
   "siteName": "Sacré-Cœur",
   "Latitude": 48.88670304,
   "Longitude": 2.343082828,
   "Description": "Iconic, domed white church, completed in 1914, with interior mosaics, stained-glass windows & crypt."
 }
]

Would it be possible to write a function the outputs all the locations as markers from the JSON file?

If you have tried it then provide your code in the form of a minimal reproducible example along with debugging information instead of complaining about the downvotes. FYI downvotes and close votes are not definite. — MrUpsidown
– MrUpsidown, Commented Aug 19, 2021 at 10:57
Fruther to that, this has been asked and answered already many times. Do some research before asking. stackoverflow.com/questions/21401774/… - stackoverflow.com/questions/40971251/… - stackoverflow.com/questions/17514706/… - etc. — MrUpsidown
– MrUpsidown, Commented Aug 19, 2021 at 10:59

Alexander van Oostenrijk · Accepted Answer · 2021-08-19 10:23:04Z

0

You can load in a local JSON file with this:

var json = require('./constants/ParisLocations.json');

If the JSON data is on a server, use this:

$.getJSON('constants/ParisLocations.json', function(json) {
  ...
});

(or fetch, or axios...)

With the data loaded, loop through it and add your markers.

answered Aug 19, 2021 at 10:23

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

React Native Maps - Displaying markers from JSON file using Google Maps API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related