Googleマップ、関数にマップを渡す

Question

私は最初の市場に移動しようとしていますが、私はそれを動作させることはできません。

まず、マーカーを1つの配列に格納します。この時点では、最初に必要なのは後で、後はロジック全体を作成します。

var geocoder; 
    var map; 
    var markersArray = []; 

//Initialization 
function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 16, 
    center: {lat: 14.601313, lng: -90.519114}, 
    }); 

    map.addListener('click', function(e) { 
    placeMarkerAndPanTo(e.latLng, map); 
    }); 

} 

//Add marker function 
function placeMarkerAndPanTo(latLng, map) { 
     marker = new google.maps.Marker({ 
    position: latLng, 
    map: map 
    }); 
    markersArray.push(latLng); 
    map.panTo(latLng); 
} 

//Button: click move to the very first marker 
$(document).ready(function(){ 
    $('#MyButton').click(function(){ 
alert("click"); 
     alert(markersArray[0].lat()); 
     map.panTo(markersArray[0].lat(),markersArray[0].lng()); 
    }); 
    }); 

修正：ここ

がコードである

$(document).ready(function(){ 
    $('#MyButton').click(function(){ 
     if (markersArray.length > 0){ 

     map.setCenter(markersArray[0]); 
    } 
     //map.fitBounds(markersArray[0].lat(),markersArray[0].lng()); 
    }); 
    }); 

Answer 1

あなたのマップ変数は、初期化関数（実際のマップが含まれている少なくとも一つ）にローカルです。グローバルマップ変数は決して初期化されません。

変更：

var map; 
//Initialization 
function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 

へ：あなたの例では

var map; 
//Initialization 
function initMap() { 
map = new google.maps.Map(document.getElementById('map'), { 

proof of concept fiddle