How to embed custom html created design to Marker in google map I am using react-google-maps packahe?

Question

Currently I am using tag to show marker instead of this I want to show custom html design to marker.

Which API are you using to integrate google maps? – saim2025 Jul 05 '19 at 14:44 — saim2025, Jul 05 '19 at 14:44
yes google API. react-google-maps package. – Suraj Rawal Jul 06 '19 at 07:17 — Suraj Rawal, Jul 06 '19 at 07:17

saim2025 · Answer 1 · 2019-07-08T07:23:13.160

GoogleMap API defines a MarkerWithLabel component which can be passed to the GoogleMap component. Here is an example

<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}>

    <MarkerWithLabel
      position={{ lat: -34.397, lng: 150.644 }}
      labelAnchor={new google.maps.Point(0, 0)}
      labelStyle={{backgroundColor: "yellow", fontSize: "32px", padding: "16px"}}
    >
      <CustomizedMarker />
    </MarkerWithLabel>
</GoogleMap>

You can add label to Marker by separating marker's markup in separate component like this:

class CustomizedMarker extends Component{
constructor(props){
    super(props)
    this.state = {
    labelHidden : true
    }
}
toggleLabel = ()=>{
    this.setState({
        labelHidden: !this.state.labelHidden
    })
}
render(){
    return(
        <div onClick={this.toggleLabel}>
            <p>Hello World</p>
            <h5 hidden={this.state.labelHidden}>Your Label</h5>
        <div>
    )
}
}

You can view the complete reference here

On click this label how can I get the Infobox? – Suraj Rawal Jul 08 '19 at 06:15 — Suraj Rawal, Jul 08 '19 at 06:15
I have edited the original answer to incorporate this. – saim2025 Jul 08 '19 at 07:23 — saim2025, Jul 08 '19 at 07:23

How to embed custom html created design to Marker in google map I am using react-google-maps packahe?

1 Answers1