I have a map component, in that, I used Google-map-react library to display locations in google map. Inside that map, I am having a button called "View in maps". So, now, if the user clicks on that button. it should take them to the google map with given location coordinates. Please find code below and let me know, how can I achieve that
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from '../../../../../../assets/css/Me.style.js';
import GoogleMapReact from 'google-map-react';
import { Typography, Button } from '@material-ui/core';
import Marker from '@material-ui/icons/LocationOnOutlined'
class DetailsMap extends Component {
static defaultProps = {
center: { lat: 40.7446790, lng: -73.9485420 },
};
render() {
const {classes} = this.props;
return (
<div className={classes.root}>
<div className={classes.googleMap}>
<GoogleMapReact
zoom = {11}
onClick={this.onClick}
defaultCenter={ this.props.center }
>
<Marker
style={{color: '#ff7777'}}
lat={40.7473310}
lng={-73.8517440}
/>
<div className={classes.address}>
<div className={classes.addressWrapper}>
<Typography className={classes.addressHead}>
Address
</Typography>
<Typography className={classes.addressContent}>
221, raj start, doler street<br />
QC J9PB6X
</Typography>
<Button variant='outlined' className={classes.view}>
View in Maps
</Button>
</div>
</div>
</GoogleMapReact>
</div>
</div>
)
}
}
export default withStyles(styles, {withTheme:true})(DetailsMap);