import React, { useState } from 'react'; import { Card, Col, Container, Row } from 'react-bootstrap'; //Import Breadcrumb import BreadCrumb from '../../../Components/Common/BreadCrumb'; import { Head } from "@inertiajs/react"; import Layout from "../../../Layouts"; import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api'; const containerStyle = { width: '100%', height: '300px', }; const center = { lat: 37.778519, lng: -122.40564 }; const second = { lat: 54.5260, lng: 15.2551 } const third = { lat: 8.7832, lng: 34.5085 } const fourth = { lat: 19.0760, lng: 72.8777 } const GoogleMaps = (props: any) => { const selectedPlace: any = {} const [selected, setSelected] = useState(null); const onSelect = (marker: any) => { setSelected(marker); }; return (

Markers

onSelect(center)} /> {selected && ( setSelected(null)} >

{selectedPlace.name}

)}

Overlays

onSelect(second)} /> {selected && ( setSelected(null)} >

{selectedPlace.name}

)}

Street View Panoramas

onSelect(third)} /> {selected && ( setSelected(null)} >

{selectedPlace.name}

)}

Map Types

onSelect(fourth)} /> {selected && ( setSelected(null)} >

{selectedPlace.name}

)}

); } GoogleMaps.layout = (page: any) => export default GoogleMaps