How to pass component as icon for google.maps.MarkerImage?

195 views Asked by At

Below is my custom google marker icon

    let airportMarker = new google.maps.MarkerImage(
        "../images/airport_pin.png",
        null, /* size is determined at runtime */
        null, /* origin is 0,0 */
        null, /* anchor is bottom center of the scaled image */
        new window.google.maps.Size(38, 38)
    );

And I pass the above as props to Marker like below:

<Marker position = {waypoint.locationCordinates} icon = {airportMarker} zIndex={1}/>

How can I pass a component as marker icon? I want to pass FontAwsome icon to my above marker?

i am looking to do something like this

<Marker position = {waypoint.locationCordinates} icon = {<FontAwesomeIcon icon={faMapMarkerAlt}/>}  zIndex={1}/>

or

    let airportMarker = new google.maps.MarkerImage(
        faMapMarkerAlt,
        null, /* size is determined at runtime */
        null, /* origin is 0,0 */
        null, /* anchor is bottom center of the scaled image */
        new window.google.maps.Size(38, 38)
    );
0

There are 0 answers