谷歌地图放置标记在DOM事件上

Question

目前，我所拥有的是一个初始化的Google地图，其中包含一个DOM监听器，单击我的表单按钮时会触发该监听器。事件发生时会调用我的函数，但是，尽管对测试位置进行了硬编码，但标记并未放置在地图上。这是我的一些代码...

// script for calculating current geolocation
var map, infoWindow, marker, searchBtn;
var myCenter= {lat: 48.752, lng: -122.479};

function initMap() {
    var mapDiv = document.getElementById('map');
    searchBtn = document.getElementById('search-btn');
    map = new google.maps.Map(mapDiv, {
        center: myCenter,
        zoom: 12,
        mapTypeContol: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        }
    });

    infoWindow = new google.maps.InfoWindow;

    google.maps.event.addDomListener(searchBtn, 'click', function() {
        geocode_input();
    });
}

/* Used for retrieving address data (i.e. lat, lng, etc.) from Google Map API */
    function geocode_input() {
        console.log("geocode running...");
        var x = document.getElementById("address_form");
        var old = x.elements[0].value;
        var replaced = old.replace(/\s/g, '+');
        var request = "https://maps.googleapis.com/maps/api/geocode/json?address=" + replaced + "&key=KEY";
        var pos = {};
        $.ajax({
            url : 'http://maps.google.com/maps/api/geocode/json',
            type : 'GET',
            data : {
                address : replaced,
                sensor : false
            },
            async : false,
            success : function(result) {
                console.log("yay");
                console.log(JSON.stringify(result));
                pos.lat = result.results[0].geometry.location.lat;
                pos.lng = result.results[0].geometry.location.lng;
                pos.dist = 10;
                // logging for testing
                console.log(JSON.stringify(pos));
                // clinicData = clinicRequest(pos, clinicCallback); FIXME: uncomment
                clinicCallback(pos);
            }
        });
        return pos;
    }

var clinicCallback = function displayClinics(clinicData) {
        console.log("displaying clinic data...");
        var testLoc = {lat: 48.746, lng: -122.482};
        marker = new google.maps.Marker({
            position:testLoc,
            map: map
        });

        marker.addListener('click', function() {
            infoWindow.open(map, marker);
        });
    }

查看：

<div class="searchForm">
        <form id="address_form">
            <div class="form-group">
                <input type="text" class="form-control" id="address" placeholder="Enter street address">
            </div>
            <div class="input-group-btn">
                <button type="submit" class="btn btn-default" id="search-btn">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </div>
        </form>
    </div>

    <!-- Sidebar: location, filters -->
    <!-- for location: split on spaces, turn request into https to geocoding api, send our server the appropriate lat/long -->

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- <script type="text/javascript" src="{{ url_for('static', filename='js/addrSearch.js') }}"></script> -->
    <!-- Google Map "code" -->
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/map.js') }}"></script>

代码一直到记录和显示临床数据......＆＃34;就是这样。没有创建标记。

知道为什么会这样吗？

谢谢。