JavaScript

<pre><div id="map"> </div>     
    <script>
    var map;
    function initMap() {
    var myLatLng = {lat: 41.413118, lng: -82.072537}

     map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      zoom: 18
     });

     var marker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     title: 'My Location'
     });

     var marker = new google.maps.Marker({
     position: {lat: 41.412726, lng: -82.072047},
     map: map,
     title: 'PS Building',
     label: {text:'PS Building'}
     });

     infoWindow = new google.maps.InfoWindow;

     if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(position) {
     var pos = {
       lat: position.coords.latitude,
       lng: position.coords.longitude
     };
     var marker = new google.maps.Marker({
      position: pos,
      map: map,
      title: 'Your Location'
     });

     infoWindow.setPosition(pos);
     infoWindow.open(map);
     map.setCenter(pos);
     }, function() {
     handleLocationError(true, infoWindow, map.getCenter());
     });
     } else {
     // Browser doesn't support Geolocation
     handleLocationError(false, infoWindow, map.getCenter());
    }
   }

 function handleLocationError(browserHasGeolocation, infoWindow, pos) {
 infoWindow.setPosition(pos);
 infoWindow.setContent(browserHasGeolocation ?
                      'Error: The Geolocation service failed.' :
                       'Error: Your browser doesn\'t support 
 geolocation.');
 infoWindow.open(map);
 }
 }


  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key= 
  KEY&callback=initMap"
  async defer></script>

  <form>
  <input type="button" onclick="GetLocation();" value="click"/>
  </form>

<pre><div id="map"> </div>     
    <script>
    var map;
    function initMap() {
    var myLatLng = {lat: 41.413118, lng: -82.072537}

     map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      zoom: 18
     });

     var marker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     title: 'My Location'
     });

     var marker = new google.maps.Marker({
     position: {lat: 41.412726, lng: -82.072047},
     map: map,
     title: 'PS Building',
     label: {text:'PS Building'}
     });

     infoWindow = new google.maps.InfoWindow;

     if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(position) {
     var pos = {
       lat: position.coords.latitude,
       lng: position.coords.longitude
     };
     var marker = new google.maps.Marker({
      position: pos,
      map: map,
      title: 'Your Location'
     });

     infoWindow.setPosition(pos);
     infoWindow.open(map);
     map.setCenter(pos);
     }, function() {
     handleLocationError(true, infoWindow, map.getCenter());
     });
     } else {
     // Browser doesn't support Geolocation
     handleLocationError(false, infoWindow, map.getCenter());
    }
   }

 function handleLocationError(browserHasGeolocation, infoWindow, pos) {
 infoWindow.setPosition(pos);
 infoWindow.setContent(browserHasGeolocation ?
                      'Error: The Geolocation service failed.' :
                       'Error: Your browser doesn\'t support 
 geolocation.');
 infoWindow.open(map);
 }
 }


  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key= 
  AIzaSyCyO4aFysnjiQ9DO5VSDSJ_DtPd6O9mkDI&callback=initMap"
  async defer></script>

  <form>
  <input type="button" onclick="GetLocation();" value="click"/>
  </form>

import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import { Modal } from './Modal';
    
    class Dashboard extends React.Component {
        state = { show: false };

    showModal = () => {
        this.setState({ show: true });
    };

    hideModal = () => {
        this.setState({ show: false });
    };

    render() {
        return (
            <main>
                <h1>React Modal</h1>
                <Modal show={this.state.show} handleClose={this.hideModal}>
                    <p>Modal</p>
                    <p>Data</p>
                </Modal>
                <button type="button" onClick={this.showModal}>
                    open
        </button>
            </main>
        );
    }
    }    
    export default Dashboard;

import React, { Component } from "react";
    import './ModalSS.css';
    
    export const Modal = ({ handleClose, show, children }) => {
        const showHideClassName = show ? "modal display-block" : "modal display-none";
    return (
        <div className={showHideClassName}>
            <section className="modal-main">
                {children}
                <button onClick={handleClose}>close</button>
            </section>
        </div>
     );
    }

body {
    }
    
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }
    
    .modal-main {
        position: fixed;
        background: white;
        width: 80%;
        height: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .display-block {
        display: block;
    }
    
    .display-none {
        display: none;
    }