Googleマップのjqueryを使用してドロップダウンメニューを使用してメーカーのインフォ画面をどのように起動するのですか？api js

Question

Googleマップの外にドロップダウンを使用してマーカーを制御したいと思います。 Googleのエラーが表示されるので、ドロップダウンが正常に機能することはわかっています。

以下は私のコードです。

var map; 
var circleicon; 

var infowindow, marker; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
    center: new google.maps.LatLng(12.415875, 123.107391), 
    zoom: lastzoom, 
    styles: [ 
      ... 
     ] 
    }); 

    infowindow = new google.maps.InfoWindow({}); 

    var i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
       //var select_location = new selectLocation(locations[i][0]); 
      } 
     })(marker, i)); 

    } 

    google.maps.event.addListener(map, 'zoom_changed', function(){ 
    console.log('zoom_changed'); 
    clearInterval(intID); 

    var zoom = map.getZoom(); 

    if(zoom > lastzoom) { 
     radiusMax /= 2; 
     radiusMin /= 2; 
     step /= 2; 
    } else { 
     radiusMax *= 2; 
     radiusMin *= 2; 
     step *= 2; 
    } 
    lastzoom = zoom; 
    }); 

    google.maps.event.addDomListener(window, 'load', initMap); 
} 


var map_location; 

$(document).ready(function(){ 
    $("#mapSelection").dropdown({ 
     onChange: function(val){ 
      map_location = val; 
      google.maps.event.trigger(marker[map_location], 'click'); 
      alert(map_location); 
     } 
    }); 

}); 

私は再び実行しようとするたびに、私はエラー 捕捉されない例外TypeErrorを得る：未定義

のプロパティを読み取ることができません「__e3_は、」私はGoogleマップを初期化する方法に何か問題はありますか？

Answer 1

問題マーカーの配列を作成せず、配列として単一のマーカーを使用しようとしました。混乱を避けるためにmarkers[]配列を作成しました。の別のグローバル変数も必要ありません。 範囲がinfowindow

ワーキングフィドル

https://jsfiddle.net/ergec/smq8m547/

簡体JSコードをトリガするのに十分であるだ、私はそれを動作させるためのコードを少し変更しましたが、あなたが買ってあげる

アイデア。

var map; 
var infowindow, markers = []; 

var locations = [ 
    ["blah", 33.808678, -117.918921], 
    ["mehh", 33.807678, -117.928921], 
    ["peww", 33.806678, -117.938921] 
]; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: new google.maps.LatLng(33.808678, -117.918921), 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    infowindow = new google.maps.InfoWindow({}); 

    var i; 
    for (i = 0; i < locations.length; i++) { 
     markers[i] = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(markers[i], 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
       //var select_location = new selectLocation(locations[i][0]); 
      } 
     })(markers[i], i)); 

    } 
} 
initMap(); 

var map_location; 

$(document).ready(function() { 
    for (i = 0; i < locations.length; i++) { 
     $("select").append("<option value='" + i + "'>" + locations[i][0] + "</option>"); 
    } 
    $("select").change(function() { 
     var map_location = $(this).val(); 
     console.log(map_location); 
     google.maps.event.trigger(markers[map_location], 'click'); 
    }); 
});