GoogleMapsでピンを表示しようとしています。Api（ReactJS）

私はこのコードを動作させようと努力しており、いくつかの問題に取り組んでいます。私はノードモジュール「google-maps-react」を使用しています。主なエラーは、 'setMap'のプロパティを読み取ることができません。何らかの理由でマーカーが地図上に表示されません。GoogleMapsでピンを表示しようとしています。Api（ReactJS）

import React, { PropTypes } from 'react'; 
import {GoogleApiWrapper, Marker, Map} from 'google-maps-react'; 

class Layout extends React.Component { 

    render() { 



    return (
     <div ref="map"> 
     <Map google={this.props.google} 
     style={{width: '100%', height: '100%', position: 'relative'}} 
     className={'map'} 
     zoom={10} 
     initialCenter={{lat: 32.7157, lng: -117.1611}}> 
     <Marker 
      name={'EMS'} 
      position={{lat: 32.575258, lng: -117.061613}} /> 
     <Marker 
      name={'FIRE'} 
      position={{lat: 32.958337, lng: -117.096112}} /> 
     <Marker 
      name={'HAZMAT'} 
      position={{lat: 32.728588, lng: -117.100064}} /> 
     <Marker 
      name={'MVA'} 
      position={{lat: 32.556325, lng: -117.055856}} /> 
     <Marker 
      name={'FIRE'} 
      position={{lat: 32.691563, lng: -117.072024}} /> 
     <Marker 
      name={'EMS'} 
      position={{lat: 32.805941, lng: -117.219577}} /> 
     <Marker 
      name={'HAZMAT'} 
      position={{lat: 32.717516, lng: -117.164727}} /> 
     <Marker 
      name={'MVA'} 
      position={{lat: 32.715218, lng: -117.160156}} /> 
     </Map> 



     </div> 
    ) 
    } 
} 

export default GoogleApiWrapper({ 
    apiKey: 'AIzaSyB0P-Ql1Gdvu0baPK4xmQMchXxQoUk4YH8' 
})(Layout);

出典

2017-02-17 Emil Juboori

あなたは上記と同じようにコードを入力していますか？その場合は、google apiキーを取得して入力する必要があります。 google developers consoleから鍵を入手します。

出典

2017-02-18 00:17:32

を追加することができます。 –

それはあなたがコードに関して探していたものではないが、それは仕事を完了し、それをきちんとやります。私はあなたのコードでエラーを見つけることができませんでしたが、最新のGoogle APIに問題があることを示すかなりの情報があり、node.jsを介して反応しました。だから私はあなたのニーズに合ったものになることを望んで、もっと簡単なバージョンを使いました。私は8ポイントの4を追加していますが、私は、キーを取得し、それを正しく挿入し、それは私の会社であるため、私はちょうどそれを削除した残りの4

<!doctype html> 
 
<html><head> 
 
<meta charset="UTF-8"> 
 
\t <title>Multiple Map Points</title> 
 
    
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 
    <title>Google Maps Multiple Markers</title> 
 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
 
      type="text/javascript"></script> 
 
</head> 
 
<body> 
 
    <div id="map" style="width: 800px; height: 800px;" position="relative;"></div> 
 

 
    <script type="text/javascript"> 
 
    var locations = [ 
 
     ['EMS', 32.575258, -117.061613, 4], 
 
     ['FIRE', 32.958337, -117.096112, 3], 
 
     ['HAZMAT', 32.728588, -117.100064, 2], 
 
\t  ['MVA', 32.556325, -117.055856, 1] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 10, 
 
     center: new google.maps.LatLng(32.7157, -117.1611), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i][0]); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    } 
 
    </script> 
 

 

 
</body> 
 
</html>

出典

2017-02-18 06:43:56

GoogleMapsでピンを表示しようとしています。Api（ReactJS）

答えて

関連する問題