# React map

## React 與 Google MAP

可以使用如下用法：

```javascript
  componentDidMount() {
    const googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`,
    if (!window.google) {
      const scriptjs = require(`scriptjs`);
      scriptjs(googleMapURL, () => this.initMap());
    } else {
      this.initMap();
    }
  }

  initMap() {
    const google = window.google;
    const map = new google.maps.Map(
      document.getElementById(填入在DOM上的一個空的 div ID), // 初始化地圖
      {
        zoom: 15,
        center: { lat: 1.2948257152432294, lng: 103.85845150268554 },
        fullscreenControl: false, // 隱藏預設的地圖按鈕
        streetViewControl: false,  // 隱藏預設的地圖按鈕
        mapTypeControlOptions: {
          mapTypeIds: [],
        },
      },
    );
    window.map = map;
  }
```

## 客製化地圖

在地圖左上放入元素：

```javascript
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(
      document.getElementById('dropoffLegend'),
    );
```

加上預設圖型 Marker

```javascript
      const marker = new google.maps.Marker({
        position: { lat, lng },
        map,
        title: spot.address.name,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillOpacity: 1.0,
          fillColor: '#33c072',
          strokeOpacity: 1,
          strokeColor: 'white',
          strokeWeight: 2.0,
          scale: 9.0,
        },
      });
```

加上地圖事件

```javascript
google.maps.event.addListener(map, 'dragstart', () => {
  this.setState({ dragging: true });
});
```

如果想要在地圖上加入中心點，並且保持滑動後永遠中心，可以加上一個絕對定位元素。

```javascript
 .centerMarker {
   position: absolute;
   width: 80px;
   top: ~"calc(50% - 70px)";
   left: 0;
   right: 0;
   margin: 0 auto;
 }
```

```markup
        <div
          style={{
            position: 'relative',
            display: 'inline-block',
            width: '100%',
          }}
        >
          <div className={styles.map} id={this.props.mapType} />
          <div className="centerMarker">
       </div>
```

> 跟地圖同層，然後父層是一個 `relative`元素


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_advance/google_speech_api/map/react-map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.