google-map-react marker not showing

Question

hi all im trying to implement google maps in react.js , the map is showing fine however when i try to show my marker , nothing is being displayed. IF i remove lat and long values then marker will show up on top of the map. But if i add lat and long values to it , then it stops showing. Can someone please help?

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={59.955413}
            lng={30.337844}
            text={'Kreyser Avrora'}
          />
        </GoogleMapReact>
      </div>
    );
  }
}

Answer 1

The documentation shows that you can use<AnyReactCompenent/> which you can use if you want to have your own Marker or text. However, if you wish to use the default marker then you would have to pass as a property into the <GoogleMapReact></GoogleMapReact> component. The docs mention 'You can access Google Maps map and maps objects by using onGoogleApiLoaded, in this case, you will need to set yesIWantToUseGoogleMapApiInternals to true'. This just means add the name of the property without passing a value to it as I have in mine. It may not be entirely clear from the description in the Readme, but the maps argument is, in fact, the maps API object (and map is, of course, the current Google Map instance). Therefore, you should pass both into the method with the renderMarkers = (map, maps) => {} function.

You can try this:

import React, { Fragment } from 'react';
import GoogleMapReact from 'google-map-react';

const GoogleMaps = ({ latitude, longitude }) => {
 const renderMarkers = (map, maps) => {
  let marker = new maps.Marker({
   position: { lat: latitude, lng: longitude },
   map,
   title: 'Hello World!'
   });
   return marker;
 };

 return (
  <Fragment>
   <div style={{ height: '50vh', width: '100%' }}>
    <GoogleMapReact
     bootstrapURLKeys={{ key: 'YOUR KEY' }}
     defaultCenter={{ lat: latitude, lng: longitude }}
     defaultZoom={16}
     yesIWantToUseGoogleMapApiInternals
     onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}
    >
    </GoogleMapReact>
   </div>
  </Fragment>
 );
};

export default GoogleMaps;

Answer 2

I think the main question that you need to answer is: What are your center props? I used your code in sandbox and did a some small adaption: I used the same lat/longitude where your marker should be rendered in order to see at a glance whether it is actually shown. And it is: https://codesandbox.io/s/00p1ry2v0v

export default class Map extends Component {
  static defaultProps = {
    zoom: 11,
    center: {
      lat: 49.955413,
      lng: 30.337844
    }
  };

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

So, make sure you start the map with a proper initial center position. :)