Desktop Google View For Desktop example:

```jsx

const imgToggleOptions = [
{ srcActive: '../src/lib/style/img/jp-grid-active.svg', srcInactive: '../src/lib/style/img/jp-grid.svg', alt: 'Grid', isActive: false },
{ srcActive:  '../src/lib/style/img/jp-list-active.svg', srcInactive:  '../src/lib/style/img/jp-list.svg', alt: 'List', isActive: true },
{ srcActive:'../src/lib/style/img/jp-map-active.svg' , srcInactive: '../src/lib/style/img/jp-map.svg', alt: 'map ', isActive: false }
];

class DesktopGoogleMapViewExample extends React.Component {

   constructor(props) {
        super(props);
        this.state = {
   
            desktopMapVisible:false,
            currentToggleView: null,
            desktopShowingInfoWindow: true,
            markers: [{
                name: 'Juhu',
                text: 'Juhu',
                lat: '19.1075',
                long: '72.8263',
                url:  '../src/lib/style/img/gray.png',
                size: [40, 40]
            }, {
                name: 'Bandra',
                text: 'Bandra',
                lat: '19.0596',
                long: '72.8295',
                url:  '../src/lib/style/img/orange.png',
                size: [50, 50]
            },
            {
                name: 'Chembur',
                lat: '19.0522',
                long: '72.9005',
                url:  '../src/lib/style/img/gray.png',
                size: [45, 45]
            }, {
                name: 'Dadar',
                text: 'Dadar',
                lat: '19.0178',
                long: '72.8478',
                url: '../src/lib/style/img/gray.png',
                size: [45, 50]
            },
            {
                name: 'Powai',
                text: 'Powai',
                lat: '19.1164',
                long: '72.90471',
                url: '../src/lib/style/img/orange.png',
                size: [30, 30]
            },],
            desktopActiveMarker: {},
        };
    }

    onClickDesktopViewMap() {
        this.setState(prevState => ({
            desktopMapVisible: !prevState.desktopMapVisible,
        }));
    }
    onDesktopMarkerClick(props, marker) {
        this.setState({
            desktopActiveMarker: {
                marker: marker,
                name: marker.name,
                visible: true
            },
            desktopShowingInfoWindow: true
        });
    }

     onToggleViewChange(e) {
        imgToggleOptions.forEach((ele, index) => {
            if (e === index) {
                if(e===2)
                {
                    this.onClickDesktopViewMap();
                }else{
                    this.onClickDesktopViewMapdeactivate();
                }
                ele.isActive = true;
                this.setState({
                    currentToggleView: ele
                });
            } else {
                ele.isActive = false;
            }
        });
    }




    onImgKeyDown(key, event) {
        imgToggleOptions.forEach((ele, index) => {
            if (key === index && event.keyCode === 13) {
                if (key === 2) {
                    this.onClickDesktopViewMap();
                } else {
                    this.onClickDesktopViewMapdeactivate();
                }
                ele.isActive = true;
                this.setState({
                    currentToggleView: ele
                });
            }
            else {
                ele.isActive = false;
            }
        });
    }







      onClickDesktopViewMapdeactivate()

    {
        this.setState(prevState => ({
            desktopMapVisible:false,
        }));
    }

    render(){
                return (
                    <div>
                     <ToggleView
                        imgToggleOptions={imgToggleOptions}
                        imgWidth={25}
                        imgHeight={25}
                        currentToggleView={this.state.currentToggleView}
                        onClick={this.onToggleViewChange.bind(this)}
                        onImgKeyDown={this.onImgKeyDown.bind(this)}
                    />
                     <DesktopGoogleMapView
                        apiKey='AIzaSyB3TF_AQVCs7SDAQqaXTU1ykHQcJt7EpK0'
                        mapWidth={'100%'}
                        mapHeight={'100%'}
                        isInfoWindowVisible={false}
                        marker={this.state.desktopActiveMarker}
                        markerArr={this.state.markers}
                        visible={this.state.desktopShowingInfoWindow}
                        onMarkerClick={this.onDesktopMarkerClick.bind(this)}
                        onClickViewMap={this.onClickDesktopViewMap.bind(this)}
                        MapVisible={this.state.desktopMapVisible}
                    />
                    </div>)
            }
};
<DesktopGoogleMapViewExample />
```