สร้าง Map Branch Component

ติดตั้ง package

ถ้ายังไม่ได้ติดตั้ง package ชื่อ google-map-react ล่ะก็ อย่าลืมรันคำสั่งติดตั้งให้กับโปรเจคล่ะ

npm i google-map-react

ใช้ yarn?

yarn add google-map-react

1. สร้าง MapBranch Component

สร้างไฟล์ src/components/MapBranch.js (ใช้ snippet: rfc)

import React from 'react'

export default function MapBranch() {
    return (
        <div>
            Map
        </div>
    )
}

2. วาง MapBranch component ใน App.js

เปิดไฟล์ src/App.js

//...
import MapBranch from './components/MapBranch';
const {Header, Content, Footer} = Layout;

function App() {
  return (
    <div>
      <Layout className="layout">
        <HeaderBar/>
        <Content style=>
          <div
            style=>
            {/* วางไว้ในส่วน content */}
            <MapBranch />

          </div>
        </Content>
        <Footer style=>React Redux Workshop ©2012-2019 Created by Nextflow.in.th</Footer>
      </Layout>,
    </div>
  );
}

export default App;

3. ใช้งาน GoogleMapReact component

สามารถไปเปิดใช้งาน Google Map API Key ได้ที่ Google Map Platform

คู่มือการใช้งาน google-map-react => google-map-react

เริ่มจากตั้งค่าเริ่มต้นให้กับ props ก่อน

export default function MapBranch({
  center = {
    lat: 13.7200452,
    lng: 100.5135078
  },
  zoom = 15
}) {
    return (
        <div>
            Map
        </div>
    )
}

จากนั้น import GoogleMapReact มาใช้งานใน MapBranch

import GoogleMapReact from 'google-map-react';

และใช้ API key ที่สร้างจาก Google Maps Platform กับ <GoogleMapReact>

<GoogleMapReact
    bootstrapURLKeys=
    defaultCenter={center}
    defaultZoom={zoom}>
</GoogleMapReact>

ไฟล์ MapBranch.js เต็ม

import React from 'react'
import GoogleMapReact from 'google-map-react';

export default function MapBranch({
    center = {
      lat: 13.7200452,
      lng: 100.5135078
    },
    zoom = 15
  }) {
      return (
        <div style=>
            <GoogleMapReact
              bootstrapURLKeys=
            defaultCenter={center}
            defaultZoom={zoom}>
            </GoogleMapReact>
          </div>
      )
  }

4. จัด Layout แผนที่ กับ Chart ใน App.js

เปิดไฟล์ src/App.js

เราจะนำเอา Row กับ Col ของ Ant Design มาใช้ด้วย ให้เรา import เข้ามา

import { Layout, Menu, Row, Col } from 'antd';

จากนั้นเราจะใช้ Row กับ Col จัดพื้นที่ของ MapBranch ในส่วน Content เป็น 50% และตั้งค่าระยะห่าง (gutter) เป็น 16

<Content style=>
    <div
    style=>

    {/* จัด layout ด้วย row และ column */}
    <Row gutter={16}>
        <Col span={12}><MapBranch /></Col>
        <Col span={12}>Chart</Col>
    </Row>

    </div>
</Content>

ไฟล์เต็มของ App.js

import logo from './logo.svg';
import './App.css';
import HeaderBar from './components/HeaderBar';
import { Layout, Menu, Row, Col } from 'antd';
import MapBranch from './components/MapBranch';

const { Header, Content, Footer } = Layout;

function App() {
  return (
    <div>
      <Layout className="layout">
        <HeaderBar />
        <Content style=>
          <div
            style=>
            <Row gutter={16}>
              <Col span={12}><MapBranch /></Col>
              <Col span={12}>Chart</Col>
            </Row>

          </div>
        </Content>
        <Footer style=>React Redux Workshop ©2012-2020 Created by Nextflow.in.th</Footer>
      </Layout>,
    </div>
  );
}

export default App;

5. ปักหมุดเมื่อแผนที่โหลดเสร็จ

เปิดไฟล์ src/components/MapBranch.js

เริ่มต้นโดยการใช่ props yesIWantToUseGoogleMapApiInternals และ event onGoogleApiLoaded ให้กับ

<GoogleMapReact
    bootstrapURLKeys=
    defaultCenter={center}
    defaultZoom={zoom}

    yesIWantToUseGoogleMapApiInternals
    onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
    >
    
    </GoogleMapReact>

จากนั้น event onGoogleApiLoaded จะส่ง object map (นี่คือตัวแผนที่) และ maps (นี่คือ api google.maps นั่นเอง) ออกมา

เราสามารถใช้คำสั่งใน Google Maps JavaScript API ได้ตามปกติ เช่นการปักหมุด

const handleApiLoaded = (map, maps) => {
    let marker = new maps.Marker({
        position: this.props.center,
        map,
        title: 'HQ'
    });
  }

ไฟล์เต็ม MapBranch.js

import React from 'react'
import GoogleMapReact from 'google-map-react';

export default function MapBranch({
    center = {
        lat: 13.7200452,
        lng: 100.5135078
    },
    zoom = 15
}) {

    const handleApiLoaded = (map, maps) => {
        console.log(maps);
        let marker = new maps.Marker({
            position: center,
            map,
            title: 'HQ'
        });
      }

    return (
        <div style=>
            <GoogleMapReact
                bootstrapURLKeys=
                defaultCenter={center}
                defaultZoom={zoom}

                yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
            >

            </GoogleMapReact>
        </div>
    )
}