其他 - 无法使用Google Maps标记，并且出现javascript全局变量

我想制作一个页面，让用户不断输入纬度和经度值，并将这些位置绘制在 map上，并获取它们之间的路线。

最初，我想通过从用户处获取经度和纬度值来在 map上绘制标记。

我的HTML是这样的：

    <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>

我的CSS是这样的：

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

我正在使用像这样的Google Map javascript。

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

我的脚本是这样的：

        <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")


                 }

如果这可行，那么我认为我可以通过添加事件侦听器来传递纬度和经度值以绘制标记：

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();     
        });

我的plotPoint（x，y）是这样的

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")
}

我已经读了很多git的答案，但是没有一个类似于我的问题。任何帮助将是巨大的。提前致谢。