javascript - Using Google Map API inside a React component - Stack Overflow

admin管理员组

文章数量:1405320

I am struggling over the way to use Google Map API inside a React ponent. I did not want to use popular react-google-maps nor google-map-react packages, but rather create my own.

I managed to load the script tag with the Google Map API from the React ponent. However, how do I manipulate the Google API from here? For example, initializing the map with even basic configuration like below?

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

Here is my ponent. Any advice is appreciated! thanks!

import React, { Component } from 'react';

// Load Google API in script tag and append 
function loadScript(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.src = src;
    script.addEventListener('load', function() {
      resolve();
    });
    script.addEventListener('error', function(e) {
      reject(e);
    });
    document.body.appendChild(script);
  });
}
const script = '';

class MyGoogleMap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  ponentDidMount() {
    // first load the script into html
    loadScript(script).then(function() {
      console.log('SUCCESS');
      // Where do I go from here?
    });
  }
  render() {
    return <div />;
  }
}

export default MyGoogleMap;

I am struggling over the way to use Google Map API inside a React ponent. I did not want to use popular react-google-maps nor google-map-react packages, but rather create my own.

I managed to load the script tag with the Google Map API from the React ponent. However, how do I manipulate the Google API from here? For example, initializing the map with even basic configuration like below?

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

Here is my ponent. Any advice is appreciated! thanks!

import React, { Component } from 'react';

// Load Google API in script tag and append 
function loadScript(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.src = src;
    script.addEventListener('load', function() {
      resolve();
    });
    script.addEventListener('error', function(e) {
      reject(e);
    });
    document.body.appendChild(script);
  });
}
const script = 'https://maps.googleapis./maps/api/js?key=MY_API_KEY';

class MyGoogleMap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  ponentDidMount() {
    // first load the script into html
    loadScript(script).then(function() {
      console.log('SUCCESS');
      // Where do I go from here?
    });
  }
  render() {
    return <div />;
  }
}

export default MyGoogleMap;

• javascript
• reactjs
• google-maps-api-3

Share Improve this question Follow edited Mar 29, 2018 at 0:29 Sang Yun Park asked Mar 28, 2018 at 8:53 Sang Yun ParkSang Yun Park 45988 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I actually found my own solution, so I am sharing for anyone who would meet the same problem.

The basic logic is to use window object to access google. So, after I load the script as I did from the question, I initialize my map as:

  initMap = () => {
    // 'google' could be accessed from 'window' object
    const map = new window.google.maps.Map(
      document.getElementById('googleMap'),
      {
        zoom: 14,
        center: { lat: LATITUDE, lng: LONGTITUDE }
      }
    );
    // putting a marker on it
    const marker = new window.google.maps.Marker({
      position: { lat: LATITUDE, lng: LONGTITUDE },
      map: map
    });
  };

  render() {
    return (
      <div id="googleMap" style={width: WIDTH, height: HEIGHT}/>
    );
  }

Any ment is weled :)

Create GoogleMap ponent with ref, to display google map inside that div.

import React, { Component } from 'react';

class GoogleMap extends Component {
     ponentDidMount() {
         new google.maps.Map(this.refs.map, {
            zoom: 12,
            center: {
                lat: this.props.lat,
                lng: this.props.lon
             }
          });
      }

  render() {
      return <div className="google-map" ref="map" />
  }
}

export default GoogleMap;

Use it in Component you like like this:

<GoogleMap lat={lat} lon={lon}/>

by passing latitude and longitude of a city. To be able to see it you need to set width and height of css class google-map (or whatever you name it). for example:

div.google-map {
    height: 150px;
    width: 250px;
}

Fiddle.js preview

EDIT

inside head load script:

<script src="https://maps.googleapis./maps/api/js"></script>

I tought you have done that, because in your code you also use new google.maps.... If you cant call it like just google, try new window.google.maps...

本文标签： javascriptUsing Google Map API inside a React componentStack Overflow