无法使用html按钮元素控制Google Maps API

Question

I am trying to follow some sample code snippets from an eBook about the google maps API, but I am unable to use some button tags with appropriate IDs to change some of the maps' properties using javascript.

Is there any reason why the following code is unable to change these properties when the buttons are clicked? In addition, is there a reason why sometimes when I move the line of JavaScript that calls buttonEvents() on the page load the map fails to load all together?

// global variable of map
var map;
// the name initMap is just convention when using the Maps API
function initMap() {
    // initialising the map's visual settings and theme
    google.maps.visualRefresh = true;
    // initial app settings
    var mapOptions = {
        center: new google.maps.LatLng(39.9078, 32.8252),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // retrieving element in DOM where map will be
    var mapElement = document.getElementById("map");
    // creating map on this element
    map = new google.maps.Map(mapElement, mapOptions);
} // end initMap()

function zoomToIstanbul() {
    var istanbulCenter = new google.maps.LatLng(41.0579. 29.0340);
    map.setCenter(istanbulCenter);
} // end zoomToIstanbul()

function disableDrag() {
    map.setOptions({
        draggable: false
    });
} // end disableDrag()

function setMaxZoom() {
    map.setOptions({
        maxZoom: 12
    });
} // end setMaxZoom()

function setMinZoom() {
    map.setOptions({
        minZoom: 10
    });
} // end setMinZoom()

function disableScroll() {
    map.setOptions({
        scrollwheel: false
    });
} // end disableScroll()

// this listens to button clicks from the user to change
// particular options and settings of the map
function buttonEvents() {
    // calls zoomToIstanbul()
    var buttonIstanbul = document.getElementById("zoom-to-istanbul");
    buttonIstanbul.addEventListener("click", function() {
        zoomToIstanbul();
    });

    // calls disableDrag()
    var buttonDisableDrag = document.getElementById("disable-drag");
        buttonDisableDrag.addEventListener("click", function() {
        disableDrag();
    });

    // calls setMaxZoom()
    var buttonMaxZoom = document.getElementById("max-zoom");
    buttonMaxZoom.addEventListener("click", function() {
        setMaxZoom();
    });

    // calls setMinZoom()
    var buttonMinZoom = document.getElementById("min-zoom");
    buttonMinZoom.addEventListener("click", function() {
        setMinZoom();
    });
} // end buttonEvents()

// this calls initMap when the page loads
google.maps.event.addDomListener(window, "load", initMap);
google.maps.event.addDomListener(window, "load", buttonEvents);

Answer 1

The issue here is that you are calling the events on page load. What you need to do is something like this:

<script type="text/javascript">
    function initMap() {
        // Load map and set events here
    }
</script>

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

This makes sure that the initMap function is called just after the Google Maps API is loaded.

Source: https://developers.google.com/maps/documentation/javascript/tutorial