4

What I wan't to do is to show the location picked from some mobile devices on the Map. Data about the locations are there..

What I need here is to add Markers on the map depending on the data received from the server.

Assume I have set the location data ({Lat,Lang}) to the state markers Then How can I add this to show in Map.

My Map Code is as follows!

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

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Google Map'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;

This Code is from the answer Implementing google maps with react

Used npm package :- google-map-react

zeraien
  • 165
  • 11
Gayan Kavirathne
  • 2,909
  • 2
  • 18
  • 26

2 Answers2

6

You may try:

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

const AnyReactComponent = ({  img_src }) => <div><img src={img_src} className="YOUR-CLASS-NAME" style={{}} /></div>;

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
        markers: [],
    }
  }

  componentDidMount(){
    // or you can set markers list somewhere else
    // please also set your correct lat & lng
    // you may only use 1 image for all markers, if then, remove the img_src attribute ^^
    this.setState({
      markers: [{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC'},{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC' },{lat: xxxx, lng: xxxx,  img_src: 'YOUR-IMG-SRC'}],
    });
  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
            {this.state.markers.map((marker, i) =>{
              return(
                <AnyReactComponent
                  lat={marker.lat}
                  lng={marker.lng}
                  img_src={marker.img_src}
                />

              )
            })}      
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

If this has error, please show here too, then we can fix it later

===========

ADDED EXAMPLE FOR CLICK-EVENT ON MARKERS

 markerClicked(marker) {
   console.log("The marker that was clicked is", marker);
   // you may do many things with the "marker" object, please see more on tutorial of the library's author:
  // https://github.com/istarkov/google-map-react/blob/master/API.md#onchildclick-func 
  // Look at their examples and you may have some ideas, you can also have the hover effect on markers, but it's a bit more complicated I think 
 }

 render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
            {this.state.markers.map((marker, i) =>{
              return(
                <AnyReactComponent
                  lat={marker.lat}
                  lng={marker.lng}
                  img_src={marker.img_src}
                  onChildClick={this.markerClicked.bind(this, marker)}
                />

              )
            })}      

      </GoogleMapReact>
    );
  }

Once again, post here some errors if any ^^ !

thinhvo0108
  • 2,212
  • 1
  • 13
  • 23
  • No Error It Works! But, Image Doesn't appear! Just a square. In the Image property class I should enter as png/jpg/ico am I Right? – Gayan Kavirathne May 12 '17 at 13:09
  • Did you inspect those "square" images to check their url, maybe their src is invalid ^^ ? Besides, please just use img's valid url, don't add png/ico or anything ^^ className here in jsx just means their CSS class (you may just leave it blank like className="") thanks – thinhvo0108 May 12 '17 at 13:25
  • Yes! It was problem with source!!.. Can you give me one last help? – Gayan Kavirathne May 12 '17 at 13:50
  • If I wan't to get the onTap event of the marker! How should I proceed? Thanks a lot Buddy! You saved me days of work! – Gayan Kavirathne May 12 '17 at 13:56
  • 1
    You're welcome ^^ ! Actually, the above answer is just a very simple example of GoogleMap for react. The library we're using is used for rendering react-component on the map, which is useful for server-side rendering, therefore, the tap-event for marker will be a bit more complicated. I will show you some demo on how to implement tap-event now, but if you truly want to have full features with more "natural" googlemap (markers + events, polylines, directions etc.), you may consider using another powerful library: https://github.com/tomchentw/react-google-maps – thinhvo0108 May 12 '17 at 14:59
  • Thanks a lot Buddy, you save my day!! :) – Gayan Kavirathne May 12 '17 at 15:49
  • I tried to use that library, But I can.t understand the way it's example code is written. But Your one is straight forward( You have written it with classes & example in the tomchentw uses const) – Gayan Kavirathne May 12 '17 at 15:55
  • You're welcome, I'm glad you had it working. However, the click or hover function for the current library on Markers should be implemented more ^^ Try your best! – thinhvo0108 May 12 '17 at 16:08
  • I am not able to trigger the click event on click of marker. Please suggest – Debasish Jun 25 '19 at 04:43
  • @thinhvo0108 if you get chance to look at this: https://stackoverflow.com/questions/62644430/how-to-click-on-markers-in-google-map-react I need some help here, can't seem to get it to work – Red Baron Jun 29 '20 at 18:30
  • @RedBaron I answered – thinhvo0108 Jul 13 '20 at 23:31
0

Be careful. You said react-google-map but you are using google-map-react. Those are 2 different packages. Do not mix up their documentation.

Broda Noel
  • 1,760
  • 1
  • 19
  • 38