google-map-react: Element type is invalid: expected a string

Question

If i use marker tag then my component not working and it throwing an error some thing like this

my code is:

import React, { Component } from 'react';
import GoogleMap, { Marker } from 'google-map-react';

class Maps extends Component {
  static defaultProps = {
    center: {lat: 22.741033, lng: 81.102441},
    zoom: 5
  };
  render() {
    return (
      <GoogleMap
        bootstrapURLKeys={{ key: ['AIzaSyAA1WZznnpeoP6hZz26UiARGNOhZhYLZek'] }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
      <Marker
        position={this.props.center}
      />
      </GoogleMap>
    );
  }
}

export default Maps;

most of the time, that means you imported a component wrong (FYI) — corvid, Apr 04 '18 at 17:37

score 1 · Accepted Answer · answered Apr 04 '18 at 17:34

It seems like the issue with exporting your component. I think GoogleMap is not exported by default in react-google-maps. Try importing it as a component.

import { GoogleMap, Marker } from "react-google-maps";

Also you might wanna take a look at withGoogleMap component from react-google-map.

Adding my example code below

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const MapWithAMarker = withGoogleMap(props => {
    return (
        <GoogleMap defaultZoom={12}  defaultCenter={{ lat: props.marker.lat, lng: props.marker.lng }}>
            {props.marker &&
                <Marker label={props.marker.name}  position={{ lat: props.marker.lat, lng: props.marker.lng }} />
            }
        </GoogleMap>
    );
});

export default class Map extends Component {
    render() {
        const { marker } = this.props;

        return (
            <MapWithAMarker marker={marker} containerElement={<div className="mapContainer full-flex" />} mapElement={<div className="map" />} />
        );
    }
}

Map.propTypes = {
    marker: PropTypes.object
};

Oh sorry my bad. Anyway, i didnt see any components naemd Marker available in [this library](https://github.com/google-map-react/google-map-react) which i hope i the correct one. Are you sure MArker component is availlable by default? All their example seems to use custom components. — Noushad, Apr 04 '18 at 20:01
Ok, Np but your solution is useful for someone, Thanks. @Noushad PP — KARTHIKEYAN.A, Apr 04 '18 at 20:03
np , you can post another answer. please don't change previous answer it may helpful for someone.@Noushad PP — KARTHIKEYAN.A, Apr 04 '18 at 20:08

score 1 · Answer 2 · answered Apr 04 '18 at 20:24

1

It seems google-map-react doesnt export a component named Marker You can use your custom component as per their example here

answered Apr 04 '18 at 20:24

Noushad

6,063
3
25
28

google-map-react: Element type is invalid: expected a string

2 Answers2