Unable to use google maps Markers, and issue with javascript Global variables

I want to make a page where the user keeps entering latitude and longitude values, and these places are plotted on the map and route between these is gained.

Initially, i am trying to plot markers on the map by taking latitude and longitude values from the user.

My html is like this:

    <div>
            <label for = "lat">Enter Latitude</label>
            <input id="lat" type="text" name="lat">
            <label for = "lat">Enter Longitude</label>
            <input id="lng" type="text" name="lng">
            <button id ="submit">Submit</button>
        </div>
        <div id="map"></div>

My css is like this:

<style>
    /*Set the height explicitly.*/
    #map {
        height: 400px;
        width: 100%
    }
</style>

And i am using Google Map javascript like this.

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

And my script is like this:

        <script>        
            var map=0;
            function initMap(){
                    var pesCollege = {lat:12.9345, lng:77.5345};
                    map = new google.maps.Map(document.getElementById('map'), {
                        center:pesCollege,
                        zoom: 10
                    });
                    console.log("Inside initMap");
                    console.log(map);    //this is printing map properties
                    return map;
                    // var marker = new google.maps.Marker({position: pesCollege, map : map});
                   //This marker works if uncommented!
               }

                plot();                    

                function plot(){
                    console.log("inside plot function")
                    console.log(map);    //this is printing 0, i.e. global variable map is not 
                                         //loaded with map inside initMap
                    // var latlng = new google.maps.LatLng(latitude, longitude);
                    var pesCollege = {lat:12.9345, lng:77.5345};
                    var marker = new google.maps.Marker({position: pesCollege, map :map});  
                  //I want this marker to work.

                    // var marker = new google.maps.Marker({position: latlng,setMap: map}); 
                    console.log("Marker set")


                 }

If this works, then i think i can pass latitude and longitude values to plot the markers by adding event listener like this:

var button = document.getElementById('submit')  
        button.addEventListener("click", function(){
            var dict = {};
            var latitude = document.getElementById('lat').value;
            var longitude = document.getElementById('lng').value;
            x = parseInt(latitude);
            y = parseInt(longitude);
            dict['lat']=latitude;
            dict['lng']=longitude;
            var cdns = JSON.stringify(dict);
            // alert("hi");
            alert(cdns);    
            console.log(dict);
            console.log(cdns);
            plotPoint(x,y); //this is a similar funtion to plot() but i send l&l values, not sure if i can pass them like this.
            plot();     
        });

and my plotPoint(x,y) is like this

function plotPoint(latitude,longitude){
    var latlng = new google.maps.LatLng(latitude, longitude);
    var marker = new google.maps.Marker({position: latlng,map: map}); 
    console.log("Marker set")
}

I already read a lot of git answers but none resembled my problem. Any help would be greate. Thanks in advance.