how to display google map marker in google-map-react

Question

hi all im trying to make google maps in react take lat and long from different component and display marker based on that. However the marker is not showing up when i put lat and long values. this.state.lat and long is definetly correct because my map does update but marker is nowhere to be found. Any help is greatly appreciated!

map.js

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import marker from './marker.png';
import { geolocated } from 'react-geolocated';
const AnyReactComponent = ({ text }) => (
  <div>
    <img src={marker} style={{ height: '50px', width: '50px' }} />
  </div>
);





export default class Map extends Component {
  static defaultProps = {
    zoom: 11,

  };

  Componentwillmount() {
    console.log(this.props.center.latitude);
  }



  render() {
    return (
      <div className="google-map" style={{ width: '100%', height: '2000px', backgroundColor: 'red' }}>
        <GoogleMapReact
          options={{
            styles:ExampleMapStyles
        }}
         center={this.props.center} defaultZoom={this.props.zoom}>
        <AnyReactComponent
            lat={this.props.center.latitude}
            lng={this.props.center.longitude}
            text={'Kreyser Avrora'}
          />
        </GoogleMapReact>
      </div>
    );
  }
}

home.js

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
import PlacesAutocomplete from 'react-places-autocomplete';
import { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
import UserForm from './UserForm.js';
import { classnames } from './helpers';

import marker from './marker.png';

import Nav from './nav';
import Food from './food';

import Tool from './tools';
import Health from './health';
import MapContainer from './Map';
import Map from './Map';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class Home extends Component {
  constructor() {
    super();
    this.state = {
      zoom: 13,
      maptype: 'roadmap',
      place_formatted: '',
      place_id: '',
      place_location: '',
      address: '',
      value:'',
      latitude: 37.774929,
      longitude: -122.419416,
      marker: [],
      place: [],
      isLoaded2: false,
      places2: [],
      isLoaded: false,
      isLoaded3: false,
    };
  }

render() {
    return (


        <div id="h">
          <Map center={{ lat: this.state.latitude, lng: this.state.longitude }} />

    <div />
    );
  }
}


export default Home;

Answer 1

You try to get the following attributes of the props object:

<AnyReactComponent
  lat={this.props.center.latitude}
  lng={this.props.center.longitude}
  text={'Kreyser Avrora'}
/>

But the object you hand in the props has the attributes lat and lng :

center={{ lat: this.state.latitude, lng: this.state.longitude }}

Changing your AnyReactComponent to use this.props.center.lat and .lng should make it work.