htmlボタン要素でGoogle Maps APIを制御できない

Question

GoogleマップAPIについてeBookのサンプルコードスニペットに従っていますが、適切なIDを持つbuttonタグを使用してマップの一部を変更することができません。プロパティを使用してjavascript。

ボタンをクリックしたときに次のコードがこれらのプロパティを変更できない理由はありますか？また、ページロード時にbuttonEvents()というJavaScriptの行を移動すると、マップがすべてロードされないことがあるのはなぜですか？

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

ここでの問題は、ページの読み込み時にイベントを呼び出すことです。

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

これはinitMap機能は、Google MapsのAPIがロードされた直後に呼び出されていることを確認します：何をする必要があると、このようなものです。

出典：https://developers.google.com/maps/documentation/javascript/tutorial