How to add street view thumbnail to marker tooltip in Google Maps API

Question

Im trying to embed google maps in my app (using react-google-maps package as a wrapper) and would like to show the street view of the selected location in the marker info window (tooltip). Im trying to understand how to achieve this via reading the docs but I couldnt find a proper example.

this is how my marker code looks like

<Marker position={{ lat, lng }} title={pulseName} icon={icon}    onClick={this.onClick} >
    {isTooltipOpen && (
      <InfoWindow onCloseClick={this.props.closeMarkerTooltip}>
        <MapMarkerTooltipComponent {...this.props} />
      </InfoWindow>
    )}
</Marker>

The markers are wrapper with a GoogleMap component.

I would expect to be able to extract the street view thumbnail url according to the lat, lang values and pass it to the MapMarkerTooltipComponent

Thanks!

score 0 · Answer 1 · answered Apr 13 '19 at 16:47

Found the solution in this doc https://developers.google.com/maps/solutions/store-locator/simple-store-locator

https://maps.googleapis.com/maps/api/streetview?size=350x120&location=${position.lat()},${position.lng()}&key=${apiKey}

The url above will give a thumbnail of the street view

How to add street view thumbnail to marker tooltip in Google Maps API

1 Answers1