teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

追加

2021/06/15 01:19

投稿

happy123287
happy123287

スコア0

title CHANGED
File without changes
body CHANGED
@@ -62,4 +62,9 @@
62
62
  menuPortalTarget={document.body}
63
63
  menuPosition={"fixed"}
64
64
  />
65
- ```
65
+ ```
66
+
67
+ 参考:
68
+ stack overflowにて同様の質問をしています。
69
+
70
+ https://ja.stackoverflow.com/questions/77553/googleplacesautocomplete%e3%81%a8google-map-react%e3%82%92%e5%85%b1%e5%ad%98%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95

1

追加

2021/06/15 01:18

投稿

happy123287
happy123287

スコア0

title CHANGED
File without changes
body CHANGED
@@ -17,6 +17,25 @@
17
17
  ```Map.js
18
18
  import GoogleMapReact from "google-map-react";
19
19
  ...
20
+ //住所から地名を取得
21
+ const Geocoding = useCallback(() => {
22
+ Geocode.setApiKey("AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY");
23
+ Geocode.fromAddress(prop.address).then(
24
+ (response) => {
25
+ const { lat, lng } = response.results[0].geometry.location;
26
+ setSpotLat(lat);
27
+ setSpotLng(lng);
28
+ console.log(lat, lng);
29
+ },
30
+ (error) => {
31
+ console.error(error);
32
+ }
33
+ );
34
+ }, [prop.address]);
35
+ useEffect(() => {
36
+ Geocoding();
37
+ }, [Geocoding]);
38
+ ...
20
39
  <GoogleMapReact
21
40
  bootstrapURLKeys={{ key: "AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY" }}
22
41
  center={{