리액트에서 구글맵 연동하기

Written on July 5, 2019

기본적인 Google Maps API는 서버에서의 요청을 기본으로 하므로, 리액트를 활용하 client-side에서 요청을 보내기 위해서는 Maps JavaScript API를 사용해야 한다.

공식문서에 따르면, index.html 파일 <head>에 아래의 스크립트를 추가해 주는 것으로 전체 앱에서 Maps JavaScript API에서 제공하는 함수를 사용할 수 있게된다.

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

하지만 index.html에 직접적으로 스크립트를 작성하지 않고, js 파일에서 script를 동적으로 추가하는 방법으로 진행해 보겠다.

// Map.js
import React, { Component } from "react";
import { render } from "react-dom";

class Map extends Component {
  constructor(props) {
    super(props);
    this.onScriptLoad = this.onScriptLoad.bind(this);
  }

  onScriptLoad() {
    const map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options
    );
    this.props.onMapLoad(map);
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);

      s.addEventListener("load", e => {
        this.onScriptLoad();
      });
    } else {
      this.onScriptLoad();
    }
  }

  render() {
    return <div id={this.props.id} />;
  }
}

export default Map;

Map.js 파일에서 컴포넌트가 최초로 마운트되면, <script>를 추가하고, <script>가 추가되면 Google Map API의 window.google.maps.Map 생성자를 활용하여 props로 받아 온 좌표와 마커로 맵을 그리게 된다.

// App.js

import React, { Component } from 'react';
import Map from './Map';

const App = () => {

render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat: 33.4890, lng: 126.4983 },
          zoom: 15
        }}
        onMapLoad={map => {
          var marker = new window.google.maps.Marker({
            position: { lat: 33.4890, lng: 126.4983 },,
            map: map
          });
        }}
      />
    );
  }
}
export default App;

참고자료

Using Google Maps in React without custom libraries

👩🏻‍💻 배우는 것을 즐기는 프론트엔드 개발자 입니다
부족한 블로그에 방문해 주셔서 감사합니다 🙇🏻‍♀️

in the process of becoming the best version of myself