Googleマップapiを反応させるには

Question

私は反応の中で以下のコードを実装したいと思います。どこで 'script'タグを使うことができますか？どのようにマップを下に描くことができますか？すべての内蔵図書館地図上のルートを示すため

<div id="map"></div> 
<script> 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: {lat: 0, lng: -180}, 
     mapTypeId: 'terrain' 
    }); 

    var flightPlanCoordinates = [ 
     {lat: 37.772, lng: -122.214}, 
     {lat: 21.291, lng: -157.821}, 
     {lat: -18.142, lng: 178.431}, 
     {lat: -27.467, lng: 153.027} 
    ]; 
    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"> 
</script> 

Answer 1

があり、私はそれが機能的で簡単に使用可能ですが、あなたはprimereact primefacesによって提供され、マップコンポーネントを使用することを示唆しています。 documentation：ここで彼らから取った例である

import {GMap} from 'primereact/components/gmap/GMap'; 

onMapReady(event) { 
    this.setState({ 
     overlays: [ 
      new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}), 
      new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}), 
      new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}), 
      new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2}) 
     ] 
    }) 
} 

<GMap overlays={this.state.overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={this.onMapReady} 
        onMapClick={this.onMapClick} onOverlayClick={this.onOverlayClick} onOverlayDragEnd={this.handleDragEnd} />