GoogleMapsTutorial/App.js at master · usaidather/GoogleMapsTutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import MapView, { PROVIDER_GOOGLE, Marker, Heatmap, Circle, Polyline, Polygon } from 'react-native-maps'

import { locations } from './Data/Data'
import CustomMarker from './source/CustomMarker'


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={{
            latitude: 24.83073230,
            longitude: 67.10113298,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          {
            locations.map(marker => (
              <Polygon fillColor = {'#A3BE80'}coordinates = {locations}/>

              // <Circle center={{latitude: marker.latitude, longitude: marker.longitude}} radius= {550}
              // fillColor = {'#A3BE80'} />
            ))
          }


          {/* <Heatmap points={locations} /> */}

          {/* {
        locations.map(marker => (
          <Marker
          coordinate = {{latitude: marker.latitude,
            longitude: marker.longitude}}
          >

          <CustomMarker item = {marker}/>
          </Marker>
        ))
      } */}

        </MapView>
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  },
  map: {
    flex: 1
  }
})