javascript - 外部リンクとリセットを使用して情報ウィンドウを中央に配置して開く

Question

私は現在小さな地図を作成しています。以下は次のコードですが、同じページで外部リンクを使用して特定のマーカーを地図の中心にできるようにしたいのですが、何を検索すればよいかわかりません。リスナーを作成する必要があると思いますが、いくつかのガイダンスが必要です:

編集:次 を使用して外部リンクを追加する方法を理解することができました:

//Button Controls
      google.maps.event.addDomListener(document.getElementById("Map_GeoLocation"),"click", function() { map.setCenter(GeoMarker.getPosition() ); return false; } );

しかし、配列で機能させる方法がわかりません:-/ここで見ることができますhttp://www.everythingcreative.co.uk/marker

編集 x2: 見やすくするためにコードをクリーンアップしましたが、ボタンを外部リンクで機能させる方法はまだわかりません。また、なぜIEで動作しないのですか?

//Retina Images
var RetinaHotelMarker = new google.maps.MarkerImage("./assets/images/global/global_marker_hotel@2x.png", null, null, null, new google.maps.Size(30,30));
var RetinaChurchMarker = new google.maps.MarkerImage("./assets/images/global/global_marker_church@2x.png", null, null, null, new google.maps.Size(30,30));
var RetinaCrosshair = new google.maps.MarkerImage("./assets/images/global/global_marker_crosshair@2x.png", null, null, null, new google.maps.Size(30,30));
var RetinaMarker = new google.maps.MarkerImage("./assets/images/global/global_marker@2x.png", null, null, null, new google.maps.Size(30,30));

//Markers
var markers = [
    [1, 'Great Fosters', 51.416741,-0.543854, RetinaHotelMarker],
    [2, 'St Matthews', 51.432327,-0.459162, RetinaChurchMarker],
    // Staines
    [3, 'Travel Lodge Staines', 51.435698,-0.514469, RetinaMarker],
    [4, 'Thames Lodge Staines', 51.431498,-0.511444, RetinaMarker],
    [5, 'The Boleyn Staines', 51.43218,-0.516293, RetinaMarker],
    [6, 'The Swan Staines', 51.432534,-0.516422, RetinaMarker],
    // Surrey
    [7, 'The Runnymede Hotel', 51.43751,-0.537544, RetinaMarker],
    [8, 'The Wheatsheaf Hotel', 51.409151,-0.592704, RetinaMarker],
    [9, 'The Premier Inn Sunbury', 51.419322,-0.42248, RetinaMarker],
    [10, 'The Crown Chertsey', 51.39181,-0.501861, RetinaMarker],
    // Heathrow
    [11, 'Sofitel Heathrow', 51.473478,-0.49152, RetinaMarker],
    [12, 'Marriott Heathrow', 51.481263,-0.438209, RetinaMarker],
    [13,'Premier Inn Heathrow', 51.481615,-0.482288, RetinaMarker]
];

// Geolocation Success
function success(position) {

// Create Canvas
var mapcanvas = document.createElement('div');
mapcanvas.id = 'global_map_container';
document.querySelector('article').appendChild(mapcanvas);

// Get Geolocation Lat/Lng
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

// Create Geolocation Marker
var GeoMarker = new google.maps.Marker({
    position: coords,
    map: map,
    icon:RetinaCrosshair,
    title:"You are here!",
});

// Map Options
var options = {
    zoom: 12,
    //center: coords,
    center: new google.maps.LatLng(51.416741,-0.543854),
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Create Map
var map = new google.maps.Map(document.getElementById("global_map_container"), options);

// Marker Control
var infowindow = new google.maps.InfoWindow(), marker, i;
var bounds = new google.maps.LatLngBounds();

// Marker Creation
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][2], markers[i][3]),
        map: map,
        flat: true,
        icon: markers[i][4]
    });

    // Find Bounds  
    bounds.extend(marker.getPosition());

    // Marker Center
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            // Center on marker
            map.setCenter(marker.getPosition());
            infowindow.setContent(markers[i][1]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

// Make Map fit all Markers
map.fitBounds(bounds);

//Button Controls
google.maps.event.addDomListener(document.getElementById("Map_GeoLocation"),"click", function() { 
    map.setCenter(GeoMarker.getPosition() );
});

}

// Run GeoLocation check
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}

HTML:

<li><a href="#" id="Map_GeoLocation" class="global_crosshair"><span>Find Me</span></a></li>
<li><a href="#" id="Map_Church" class="global_church"><span>The Church</span></a></li>
<li><a href="#" id="Map_Hotel"class="global_hotel"><span>The Venue</span></a></li>