谷歌地图点击标记通过外部链接

I get the javascript error: Uncaught ReferenceError: triggerClick is not defined in your fiddle. the triggerClick function is local to the onLoad function, it needs to be global to be used in an HTML click function.

更新小提琴

代码片段:

var markers = new Array();
var map;

var locations = [
  ['<h4>Delhi International Art Festival, New Delhi</h4>', 28.613939, 77.209021],
  ['<h4>ICCR - Horizon Series, New Delhi</h4>', 28.625439, 77.245715],
  ['<h4>Shree Arobindo Asharam, Pondecherry</h4>', 11.936761, 79.834314],
  ['<h4>With Shuba Mudgal, Florance, Italy</h4>', 43.769560, 11.255814],
  ['<h4>Classical Piano by S.A.I.D., London, UK</h4>', 51.507351, -0.127758],
  ['<h4>Piano Unplugged for Nartan Academy, US & Canada</h4>', 40.712784, -74.005941]
];

// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'purple-dot.png',
  iconURLPrefix + 'green-dot.png'
]
var iconsLength = icons.length;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(20.59, 78.96),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
    }
  });


  var infowindow = new google.maps.InfoWindow({
    maxWidth: 160
  });

  var iconCounter = 0;

  // Add the markers and infowindows to the map
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: icons[iconCounter],
      title: 'Click to zoom'
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        //map.setZoom(9);
        //map.setCenter(marker.getPosition());	
      }
    })(marker, i));

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        map.setZoom(9);
        map.setCenter(marker.getPosition());
      }
    })(marker, i));


    iconCounter++;
    // We only have a limited number of possible icon colors, so we may have to restart the counter
    if (iconCounter >= iconsLength) {
      iconCounter = 0;
    }

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

function triggerClick(i) {
  google.maps.event.trigger(markers[i], 'click');
  //map.getBounds();	
}




function autoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].position);
  }
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}

body {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.archive-map {
  width: 100%;
  height: 400px;
}

.nav {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  text-align: center;
  margin: 0;
  padding-left: 0;
}

.nav li {
  display: inline-block;
}

.nav li a {
  color: #fff;
  padding: 10px;
  display: block;
  position: relative;
  z-index: 100;
}

<script src="https://maps.google.com/maps/api/js"></script>
<ul class="nav">
  <li><a href="javascript:triggerClick(0)">location1</a>

  </li>
  <li><a href="javascript:triggerClick(1)">location2</a>

  </li>
  <li><a href="javascript:triggerClick(2)">location3</a>

  </li>
  <li><a href="javascript:triggerClick(3)">location4</a>

  </li>
</ul>
<div class="container">
  <div id="map" class="archive-map"></div>
</div>