maps.googleapis-单击按钮时显示地图

Question

我正在使用HTML5地理位置来获取经度和纬度并将其传递到Google Map API中。

到目前为止编写的代码：

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

</script>

<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: new google.maps.LatLng(2.8,-187.3),
            mapTypeId: 'terrain'
        });
    }

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);               
        }
    }

    function showPosition(position) {
        ShowRecords(position.coords.latitude, position.coords.longitude);
    }

    function ShowRecords(latitude, longitude)
    {
        var tag = $('[ID$="txtSearchText"]')[0].value;
        $.ajax(
            {
                type: "POST",
                url: '/Handlers/LocationHandler.ashx',
                data: { Operation: 'GetLocation', radius: 100, Latitude: latitude, Longitude: longitude, Tag: tag },
                dataType: "json",
                async: true,
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        console.log(i);
                        var obj = result[i];

                        var displayName = obj.DisplayName;
                        var longitude = obj.Longitude;
                        var latitude = obj.Latitude;


                        var latLng = new google.maps.LatLng(latitude, longitude);
                        var marker = new google.maps.Marker({
                            position: latLng,
                            map: map
                        });

                        var infoWindow = new google.maps.InfoWindow({
                            content: displayName,
                        });

                        google.maps.event.addListener(marker, 'click', (function (mm, tt) {
                            return function () {
                                infoWindow.setContent(tt);
                                infoWindow.open(map, mm);
                            }
                        })(marker, displayName));
                    }                       
                },
                failure: function () {
                }
            });
    }

我有一个文本框，用户可以在其中输入一些内容，然后单击“搜索”按钮，然后所有位置都会显示在地图上。

    <div>
        <asp:TextBox Style="width: 60%" ID="txtSearchText" runat="server"></asp:TextBox>
        <button onclick="getLocation()" runat="server" class="inline">Search</button>    
    </div>        

    <div id="map"></div>

我面临的问题是页面加载时显示地图。除非用户单击“搜索”按钮，否则我不想显示地图。同样，当我单击“搜索”时，它应该首先获取用户位置，然后设置标记。请告知如何更改代码，以便仅在单击按钮时显示地图。