web-dev-qa-db-ja.com

ReactでGoogle Place Autocomplete APIを使用する

反応コンポーネントに位置検索バーを自動補完したいのですが、どのように実装するのかわかりません。 ドキュメント は含めることを意味します

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

hTMLファイルで、要素を指す初期化関数があります-どのように反応コンポーネント/ JSXでこれを行うのですか？私はAPIリンクをインポートする必要があると思いますが、そこからどこに行くべきか分かりません。

import React from 'react';
import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";

const SearchBar = () => (   
    <input type="text" id="search"/> //where I want the google autocomplete to be
);

export default SearchBar;
javascriptreactjsgoogle-maps-api-3
10
Adam.V

静的importを介したGoogle Maps APIの読み込み：

import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";

はサポートされていません。そのために別のオプションを検討する必要があります。

  • /public/index.htmlファイルを介してGoogle Maps API JSライブラリを参照：<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script>
  • またはdynamicallyJSリソースをロードします。たとえば、 this library を使用します

SearchBarコンポーネントに関して、以下の例は、Place Autocompleteの単純なバージョンを実装する方法を示しています（Google Mapインスタンスへの依存なし） この公式例 に基づいて

import React from "react";
/* global google */


class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.autocompleteInput = React.createRef();
    this.autocomplete = null;
    this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
  }

  componentDidMount() {
    this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
        {"types": ["geocode"]});

    this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
  }

  handlePlaceChanged(){
    const place = this.autocomplete.getPlace();
    this.props.onPlaceLoaded(place);
  }



  render() {
    return (
        <input ref={this.autocompleteInput}  id="autocomplete" placeholder="Enter your address"
         type="text"></input>
    );
  }
}
11
Vadim Gremyachev