Javascript 试图设置当前位置时，地图上未设置Google MarkerWithLabel

基本上，只有当我尝试设置当前位置时，我的标记才会添加到地图视图中，这基本上是通过按下“设置当前位置”按钮来完成的

上图是包含地图的模式，正如你在左角看到的，按钮可用于设置当前位置。请注意：标记为“当前位置”的标记是初始在initMap（）设置期间的标记，如果业务包含地址。用户可以通过单击地图或按“设置当前位置”按钮添加新标记（标记为“新位置”），该按钮将用户当前位置设置为新地址

JSP:

然而，由于未知的原因，它没有出现在地图上

希望有人能帮我，我已经挣扎了几个小时了

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<style>

    .marker-label {
        width: 140px;
        margin: 50px auto;
        border: 1.5px solid black;
        padding: 12px;
        text-align: center;
        background: white;
        font-weight: 600;
        color: black;
        font-size: 12px;
        font-family: arial;
        position: relative;
    }

    .label-arrow:before {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        border-top: 11px solid black;
        border-bottom: 7px solid transparent;
        right: 42%;
        bottom: -19.99px;
    }

    .label-arrow:after {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff;
        border-bottom: 10px solid transparent;
        right: 43%;
        bottom: -20.99px;
    }

</style>
<script src="../js/custom/applova-food-truck-1.1.0.js"></script>
<input id="currentLocationMarkerLabel" type="hidden" value="Current Location">
<input id="newLocationMarkerLabel" type="hidden" value="New Location">
<div class="modal tabbed-modal fade" id="update-address-via-map-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog wide-modal">
        <div class="modal-content">
            <div class="modal-header tabbed-success">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fa fa-times-circle"></i> </span>
                </button>
                <h4 class="tabbed-modal-title"><span><fmt:message key="io.apptizer.plugins.food.truck.location.update"/></span></h4>
            </div>

            <style>
                .pac-container {
                    background-color: #FFF;
                    z-index: 1052 !important;
                }
            </style>
            <div class="modal-body" >
                <div class="row">
                    <div class="col-md-12 modal_body_map">
                        <div class="location-map" id="location-map" style="width: 100%; position: relative;">
                            <div style="margin-left: 10px; margin-top: 10px;">
                                <p style="font-family: Roboto; font-size: 15px;"><fmt:message key="io.apptizer.plugins.food.truck.location.search"/></p>
                            </div>
                            <div id="pac-container" class="pac-container" style="text-align: center; width: 100%; padding-left: 10px; padding-right: 10px; box-shadow: unset; border: unset;">
                                <input id="address-input" style="background-color: #fff;border-radius: 2px;border: 1px solid #ccc; box-sizing: border-box; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); font-family: Roboto;  font-size: 15px;  font-weight: 300;  height: 29px; outline: none;  padding: 10px 11px 10px 13px;  text-overflow: ellipsis; width: 100%;" type="text" placeholder="<fmt:message key="io.apptizer.plugins.food.truck.location.search.placeholder"/>"
                                       value="" autocomplete="on" />
                            </div>
                            <div style="width: auto; height: 300px; z-index: 0 !important; margin-top: 60px;" id="map-canvas">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="set-location-as-current-location"
                        class="btn btn-4 btn-filled-md secondary pull-left"> Set Current Location
                </button>
                <button value="Submit" name="submit"
                        id="food-truck-submit-business-address-button" data-process-msg-target="#save-business-address-processing-message"
                        onclick="saveBusinessAddress('<c:url value="/save-business-address.json?bizId=${business.businessId}"/>')"
                        class="btn btn-4 btn-filled-md primary pull-right" disabled>
                    <fmt:message key="submit.text"/>
                </button>
                <span id="save-business-address-processing-message" class="message hide">
                    <fmt:message key="processing.message"/>
                    <i class="fa fa-spinner fa-spin fa-lg"></i>
                </span>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    initMap("map");
});

var mapMarkers;
function initMap(mapElement) {
    var geocoder = new google.maps.Geocoder();
    const map = new google.maps.Map(document.getElementById(mapElement), {
        zoom: 17
    });

    var address;
    var isAddressPresent = document.getElementById("address-present").value;
    if(isAddressPresent === "true"){
        address = document.getElementById("business-address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == 'OK') {
                map.setCenter(results[0].geometry.location);
                var marker = new MarkerWithLabel({
                    map: map,
                    position: results[0].geometry.location,
                    labelContent: $('#currentLocationMarkerLabel').val(),
                    labelAnchor: new google.maps.Point(-71, -139),
                    labelClass: "marker-label label-arrow",
                    labelInBackground: true
                });
            } else {
                setMapViewForCountry(geocoder, map)
            }
        });
    } else {
        setMapViewForCountry(geocoder, map)
    }
    return map;
}

function setMapViewForCountry(geocoder, map){
    var address = document.getElementById("business-country").value;
    geocoder.geocode({'address': JSON.stringify(address) }, function(results, status) {
        if (status == 'OK') {
            map.setCenter(results[0].geometry.location);
            map.setZoom(4);
            mapMarkers = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
}

var selectedAddress;

$("#update-address-button").click(function () {
    initSearchMap();
})

function initSearchMap() {
    const mapView = initMap("map-canvas")
    const input = document.getElementById("address-input");
    const autocomplete = new google.maps.places.Autocomplete(input,
        {fields: ["place_id", "geometry", "name", "formatted_address", "address_components"]});

    if(document.getElementById('address-present').value === "true"){
        input.value = document.getElementById('business-address').value;
    }

    mapView.addListener('click', function (e) {
        placeAddressMarker(mapView, e.latLng);
        setAddressFromMarker(e.latLng);
    });

    $('#address-input').on('input', function (event) {
        if($('#address-input').val().length < 1){
            $("#food-truck-submit-business-address-button").attr('disabled', true);
        }
    });

    autocomplete.addListener('place_changed', function(){
        const place = autocomplete.getPlace();

        if(!place.geometry){
            return;
        } else {
            $("#food-truck-submit-business-address-button").attr('disabled', false);
            if (place.geometry.viewport) {
                mapView.fitBounds(place.geometry.viewport);
            } else {
                mapView.setCenter(place.geometry.location);
                mapView.setZoom(17);
            }
            placeAddressMarker(mapView, place.geometry.location);
            document.getElementById("address-input").value = place.formatted_address;
            selectedAddress = place;
        }
    });

    var setLocationAsCurrentLocationButton = document.getElementById('set-location-as-current-location');
    setLocationAsCurrentLocationButton.addEventListener("click", (e) => {
        e.stopImmediatePropagation();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    placeAddressMarker(mapView, pos);
                    setAddressFromMarker(pos);
                },
                () => {
                    alert("Unable to load geo-location");
                },
                {
                    enableHighAccuracy: true
                }
            );
        } else {
            alert("Your browser doesn't support geolocation");
        }
    });
}

function setAddressFromMarker(coordinates){
    var addressInput = document.getElementById("address-input");
    var addressNotFound = $('#address-not-found-error').val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({location: coordinates}, (results, status) => {
        if (status === "OK") {
            if (results[0]) {
                selectedAddress = results[0];
                addressInput.value = results[0].formatted_address;
                $("#food-truck-submit-business-address-button").attr('disabled', false);
            } else {
                alert(addressNotFound);
                addressInput.value = "";
                mapMarkers.setMap(null)
                $("#food-truck-submit-business-address-button").attr('disabled', true);
            }
        } else {
            alert(addressNotFound);
            addressInput.value = "";
            mapMarkers.setMap(null)
            $("#food-truck-submit-business-address-button").attr('disabled', true);
        }
    });
}

function placeAddressMarker(mapView, location){
    if(typeof mapMarkers !== "undefined"){
        mapMarkers.setMap(null)
    }
    mapView.setCenter(location);
    mapMarkers = new MarkerWithLabel({
        position: location,
        map: mapView,
        labelContent: $('#newLocationMarkerLabel').val(),
        labelAnchor: new google.maps.Point(-71, -139),
        labelClass: "marker-label label-arrow",
        labelInBackground: true
    });
}

    var setLocationAsCurrentLocationButton = document.getElementById('set-location-as-current-location');
    setLocationAsCurrentLocationButton.addEventListener("click", (e) => {
        e.stopImmediatePropagation();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    placeAddressMarker(mapView, pos);
                    setAddressFromMarker(pos);
                },
                () => {
                    alert("Unable to load geo-location");
                },
                {
                    enableHighAccuracy: true
                }
            );
        } else {
            alert("Your browser doesn't support geolocation");
        }
    });

function placeAddressMarker(mapView, location){
    if(typeof mapMarkers !== "undefined"){
        mapMarkers.setMap(null)
    }
    mapView.setCenter(location);
    mapMarkers = new MarkerWithLabel({
        position: location,
        map: mapView,
        labelContent: $('#newLocationMarkerLabel').val(),
        labelAnchor: new google.maps.Point(-71, -139),
        labelClass: "marker-label label-arrow",
        labelInBackground: true
    });
}