React-google-maps: Custom Marker component

[jgoux]

Hi,
I'd like to make a custom Marker for handling the state of showing/hiding its InfoWindow, I prefer to do it on single component instead of an array of markers as showed in the examples.
The problem is that GoogleMap component can't call getMap from my custom Marker as the method isn't exposed and Marker is required to be a direct child of GoogleMap.
Is there a solution to expose the internal Marker to GoogleMap ?
Here is my custom marker, nothing fancy :

import React from "react"
import { Marker, InfoWindow } from "react-google-maps"

export default React.createClass({

    getInitialState() {
        return { showInfoWindow: false }
    },

    render() {

        const { marker } = this.props

        return (
            <Marker
                {...marker}
                onClick={(e) => { this.setState({ showInfoWindow: true }) }}
            >
                { this.state.showInfoWindow ?
                    <InfoWindow onCloseclick={(e) => { this.setState({ showInfoWindow: false }) }}>
                        //content
                    </InfoWindow>
                    : null
                }
            </Marker>
        )

    }

})

[ksavenkov]

I made quite a similar thing using marker with labels from https://github.com/ksavenkov/Map-Icons and implemented it as an addon https://github.com/ksavenkov/react-google-maps/tree/master/src/addons

[tomchentw]

Related to #94. I'm willing to see an elegant solution for this as well (without context)

[figalex]

Any new updates on how to solve this problem?

[ksavenkov]

@figalex you may look at the implementation at my branch

[dcworldwide]

+1 this is the only thing that is stopping me from using this library

[sohibul]

@ksavenkov could you explain how you implemented it?

[ksavenkov]

I just took components from the original Marker (Marker.js, MarkerCreator.js, MarkerEventList.js), put them to addons folder and made necessary changes to use the overlay from MapIcons. You can just take these addon files from my branch and use them.

[sohibul]

by the way, I need to create custom InfoWindow. What is actually happen in your implementation for Marker?

[ksavenkov]

I've just added a property (my Overlay attached to the marker) in MarkerCreator.js. So you may just copy InfoWindow files to addons folder and do the modifications you need.

[sohibul]

dou you mean your branch is this https://github.com/ksavenkov/react-google-maps/tree/master/src/addons? because I don't see any change since you said

[ksavenkov]

@sohibul note custom_label: PropTypes.string and then
var MapMarker = require('map-icons'); const marker = new MapMarker(composeOptions(markerProps, markerControlledPropTypes));
in the MarkerCreator.js. That does the trick.

[sslash]

• 1 would be really nice with custom markers, preferably your own custom jsx, or an image

[sohibul]

@ksavenkov okkey. I'll try it, thankyou

[larrybotha]

Answered @sohibul here: https://github.com/tomchentw/react-google-maps/issues/165#issuecomment-206440454 on how to pass mapHolderRef as a prop down through your custom marker to the react-google-maps <Marker /> component to get it behaving as expected.

[tomchentw]

Feel free to submit a PR. Close for now

We're also looking for maintainers. Involve in #266 to help strengthen our community!

[ranleung]

@ksavenkov ,

How do we use this map-icon? Can you provide an example with your fork please? Do we have to
import { default as MarkerCreator } from "react-google-maps/src/addons/addonsCreators/MarkerCreator";

But I am getting the error:

ERROR in ./~/react-google-maps/src/addons/addonsCreators/MarkerCreator.js
Module parse failed: ---/node_modules/react-google-maps/src/addons/addonsCreators/MarkerCreator.js Unexpected character '@' (71:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (71:0)

Am i importing this wrong? If you can kindly give me and example. Thanks!

[tomchentw]

@ranleung we have released a new version 6.0.0 now. See the "Marker Cluster add on" example in the demo page: https://tomchentw.github.io/react-google-maps/

Also, 6.0.0 is released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[GayanSandaruwan]

Can some one give an example of how to add new Marker to the Map.

[tomchentw]

Please refer to Getting Help section in the README (or #469).