Cfrgtkky

Problem:

I am creating react native app with Google map integration. This is how I have done It.

import React, { Component } from "react";

import { View, Text, StyleSheet, Dimensions } from "react-native";



import { MapView } from "expo";

import Marker from "./Marker";

class Parking extends Component {

  static navigationOptions = {

    title: "Parking",

    headerStyle: {

      backgroundColor: "#06153b"

    },

    headerTintColor: "#fff",

    headerTitleStyle: {

      color: "#ffff"

    }

  };

  constructor(props) {

    super(props);

    this.state = {

      focusedLocation: {

        latitude: 0,

        longitude: 0,

        latitudeDelta: 0.0122,

        longitudeDelta:

          (Dimensions.get("window").width / Dimensions.get("window").height) *

          0.0122

      },

      locationChosen: false,

      placesList: 

    };

  }



  componentDidMount() {

    navigator.geolocation.getCurrentPosition(

      pos => {

        const coordsEvent = {

          nativeEvent: {

            coordinate: {

              latitude: pos.coords.latitude,

              longitude: pos.coords.longitude

            }

          }

        };



        this.pickLocationHandler(coordsEvent);

      },

      err => {

        console.log(err);

        alert("Fetching the Position failed");

      }

    );

  }



  pickLocationHandler = event => {

    const coords = event.nativeEvent.coordinate;

    let placesList = ;

    let places = ;

    this.map.animateToRegion({

      ...this.state.focusedLocation,

      latitude: coords.latitude,

      longitude: coords.longitude

    });

    const apikey = "My API key";

    fetch(

      "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=" +

        coords.latitude +

        "," +

        coords.longitude +

        "&radius=500" +

        "&type=parking" +

        "&key=" +

        apikey

    )

      .then(response => response.json())

      .then(responseJson => {

        if (responseJson) {

          placesList = responseJson.results;

          console.log(placesList);

          placesList.map((el, index) => {

            const place = {

              title: el.name,

              coordinates: {

                latitude: el.geometry.location.lat,

                longitude: el.geometry.location.lng

              }

            };

            places[index] = place;

          });

        }

      });



    if (places) {

      this.setState({ placesList: places });

      console.log(places);

    }

    this.setState({ locationChosen: true });

  };



  render() {

    let marker = null;

    if (this.state.locationChosen) {

      marker = <MapView.Marker coordinate={this.state.focusedLocation} />;

    }

    const places = this.state.placesList;

    return (

      <View style={styles.container}>

        <MapView

          initialRegion={this.state.focusedLocation}

          showsUserLocation={true}

          style={styles.map}

          onPress={this.pickLocationHandler}

          ref={ref => (this.map = ref)}

        >

          {places.map((place, index) => {

            <MapView.Marker

              coordinate={place.coordinates}

              title={place.title}

            />;

          })}

          {marker}

        </MapView>

      </View>

    );

  }

}



export default Parking;



const styles = StyleSheet.create({

  container: {

    width: "100%",

    alignItems: "center",

    paddingBottom: 10,

    paddingLeft: 10,

    paddingRight: 10,

    paddingTop: 10

    // backgroundColor:"#192f6a"

  },

  map: {

    height: "100%",

    width: "100%"

  },

  button: {

    margin: 8

  }

});

But It is showing Nothing On the Map. When I console log the places Like this.

if (places) {

          this.setState({ placesList: places });

          console.log(places);

        }

It shows an Empty array. If I console log the placesList inside the fetch it shows the results. Can Someone help me to solve this problem and To modify My code in order to show the markers for the places that I have got from the fetch result from google API in the map?. Thank You very Much!!.

I'm fairly new to all this but I would say a couple of things:

1 - You're declaring 'place' as a const const place = ... but you're also trying to update it within the map loop, so I'm guessing that won't work. Use var place = ... instead?

2 - Instead of places[index] = place, does places.push(place) work?