استفاده از گوگل مپ در اپلیکیشن ری اکت – به زبان ساده

1export default {
2    zoomLevel: 16,
3    latitudeForFocusingMap: 51.4934,
4    longitudeForFocusingMap: 0.0098,
5    markerLongitude: 51.4934,
6    markerLatitude: 0.0098,
7    apiKey: 'your api key',
8    useDefaultUI: false,
9    googleMapsMarkerIcon: 'marker icon link'
10};

1import React, { useState } from 'react';
2import { Map, GoogleApiWrapper } from 'google-maps-react';
3import mapStyles from './mapStyle';
4import config from '../../../../../config';
5
6function MapComponent(props) {
7  const [zoomLevel, setZoomLevel] = useState(config.zoomLevel)
8  const [lat, setLat] = useState(config.lat || 51.4934);
9  const [lng, setLng] = useState(config.lng || 0.0098);
10  
11  return (
12    <div className='map'>
13      <Map
14        google={props.google}
15        zoom={zoomLevel}
16        styles={mapStyles}
17        disableDefaultUI={config.useDefaultUI}
18        initialCenter={{
19          lat,
20          lng
21        }}
22      >
23        <Marker
24          position={{ lat: config.latitudeForMarker, lng: config.longitudeForMarker }}
25          icon={config.googleMapsMarkerIcon}
26        />
27      </Map>
28    </div>
29  );
30};
31
32export default GoogleApiWrapper({ apiKey: config.apiKey })(MapComponent);

1import React, { useState } from 'react';
2import { Map, GoogleApiWrapper } from 'google-maps-react';
3import mapStyles from './mapStyle';
4import config from '../../../../../config';
5
6function MapComponent(props) {
7  const [zoomLevel, setZoomLevel] = useState(config.zoomLevel);
8  const [lat, setLat] = useState(config.lat || 51.4934);
9  const [lng, setLng] = useState(config.lng || 0.0098);
10  const [state, setState] = useState({
11    activeMarker: {},
12    showingInfoWindow: false,
13    text: ''
14  });
15  
16  const onMarkerClick = (props, marker) => {
17    setState({
18      ...state,
19      activeMarker: marker,
20      showingInfoWindow: true,
21      text: marker.text || ''
22    });
23  };
24
25  const onInfoWindowClose = () => {
26    setState({
27      activeMarker: null,
28      showingInfoWindow: false
29    });
30  }
31  
32  return (
33    <div className='map'>
34      <Map
35        google={props.google}
36        zoom={zoomLevel}
37        styles={mapStyles}
38        disableDefaultUI={config.useDefaultUI}
39        initialCenter={{
40          lat,
41          lng
42        }}
43      >
44        <Marker
45          position={{ lat: config.latitudeForMarker, lng: config.longitudeForMarker }}
46          icon={config.googleMapsMarkerIcon}
47          onClick={onMarkerClick}
48          text='some text'
49        />
50        <InfoWindow
51          marker={state.activeMarker}
52          onClose={onInfoWindowClose}
53          visible={state.showingInfoWindow}>
54          <div>
55            <p>{state.text}</p>
56          </div>
57        </InfoWindow>
58      </Map>
59    </div>
60  );
61};
62
63export default GoogleApiWrapper({ apiKey: config.apiKey })(MapComponent);

1const mapStyles = [
2  {
3    "elementType": "geometry",
4    "stylers": [
5      {
6        "color": "#1d2c4d"
7      }
8    ]
9  },
10  {
11    "elementType": "labels.text.fill",
12    "stylers": [
13      {
14        "color": "#8ec3b9"
15      }
16    ]
17  },
18  {
19    "elementType": "labels.text.stroke",
20    "stylers": [
21      {
22        "color": "#1a3646"
23      }
24    ]
25  },
26  {
27    "featureType": "administrative.country",
28    "elementType": "geometry.stroke",
29    "stylers": [
30      {
31        "color": "#4b6878"
32      }
33    ]
34  },
35  {
36    "featureType": "administrative.land_parcel",
37    "elementType": "labels.text.fill",
38    "stylers": [
39      {
40        "color": "#64779e"
41      }
42    ]
43  },
44  {
45    "featureType": "administrative.province",
46    "elementType": "geometry.stroke",
47    "stylers": [
48      {
49        "color": "#4b6878"
50      }
51    ]
52  },
53  {
54    "featureType": "landscape.man_made",
55    "elementType": "geometry.stroke",
56    "stylers": [
57      {
58        "color": "#334e87"
59      }
60    ]
61  },
62  {
63    "featureType": "landscape.natural",
64    "elementType": "geometry",
65    "stylers": [
66      {
67        "color": "#023e58"
68      }
69    ]
70  },
71  {
72    "featureType": "poi",
73    "elementType": "geometry",
74    "stylers": [
75      {
76        "color": "#283d6a"
77      }
78    ]
79  },
80  {
81    "featureType": "poi",
82    "elementType": "labels.text.fill",
83    "stylers": [
84      {
85        "color": "#6f9ba5"
86      }
87    ]
88  },
89  {
90    "featureType": "poi",
91    "elementType": "labels.text.stroke",
92    "stylers": [
93      {
94        "color": "#1d2c4d"
95      }
96    ]
97  },
98  {
99    "featureType": "poi.park",
100    "elementType": "geometry.fill",
101    "stylers": [
102      {
103        "color": "#023e58"
104      }
105    ]
106  },
107  {
108    "featureType": "poi.park",
109    "elementType": "labels.text.fill",
110    "stylers": [
111      {
112        "color": "#3C7680"
113      }
114    ]
115  },
116  {
117    "featureType": "road",
118    "elementType": "geometry",
119    "stylers": [
120      {
121        "color": "#304a7d"
122      }
123    ]
124  },
125  {
126    "featureType": "road",
127    "elementType": "labels.text.fill",
128    "stylers": [
129      {
130        "color": "#98a5be"
131      }
132    ]
133  },
134  {
135    "featureType": "road",
136    "elementType": "labels.text.stroke",
137    "stylers": [
138      {
139        "color": "#1d2c4d"
140      }
141    ]
142  },
143  {
144    "featureType": "road.highway",
145    "elementType": "geometry",
146    "stylers": [
147      {
148        "color": "#2c6675"
149      }
150    ]
151  },
152  {
153    "featureType": "road.highway",
154    "elementType": "geometry.stroke",
155    "stylers": [
156      {
157        "color": "#255763"
158      }
159    ]
160  },
161  {
162    "featureType": "road.highway",
163    "elementType": "labels.text.fill",
164    "stylers": [
165      {
166        "color": "#b0d5ce"
167      }
168    ]
169  },
170  {
171    "featureType": "road.highway",
172    "elementType": "labels.text.stroke",
173    "stylers": [
174      {
175        "color": "#023e58"
176      }
177    ]
178  },
179  {
180    "featureType": "transit",
181    "elementType": "labels.text.fill",
182    "stylers": [
183      {
184        "color": "#98a5be"
185      }
186    ]
187  },
188  {
189    "featureType": "transit",
190    "elementType": "labels.text.stroke",
191    "stylers": [
192      {
193        "color": "#1d2c4d"
194      }
195    ]
196  },
197  {
198    "featureType": "transit.line",
199    "elementType": "geometry.fill",
200    "stylers": [
201      {
202        "color": "#283d6a"
203      }
204    ]
205  },
206  {
207    "featureType": "transit.station",
208    "elementType": "geometry",
209    "stylers": [
210      {
211        "color": "#3a4762"
212      }
213    ]
214  },
215  {
216    "featureType": "water",
217    "elementType": "geometry",
218    "stylers": [
219      {
220        "color": "#0e1626"
221      }
222    ]
223  },
224  {
225    "featureType": "water",
226    "elementType": "labels.text.fill",
227    "stylers": [
228      {
229        "color": "#4e6d70"
230      }
231    ]
232  }
233];
234
235export default mapStyles;