Opening Google Map onClicking the Button | Reactjs

Viewed 5845

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);
2 Answers

I use this code for show google map in new tab with specific location with marker.

 const showInMapClicked = () => {
    window.open("https://maps.google.com?q="+your_lat+","+your_lng );
  };

Google maps can take GET parameters for coordinates to open on_load. Make an href to this address

https://www.google.com/maps/@${your_lat},${your_lng},${your_desired_zoom}z

Note

To be able to use the formating provided in the above answer you have to use `` quotes over the normal " " or ' '

Related