Google Map click marker by external link

Question

I have some anchor buttons eg. location1, location2, etc. I want to highlight the location details on click of their respective buttons. Eg. location1 should highlight location1 on google map.

find fiddle demo

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

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

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

Answer 1

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.

updated fiddle

code snippet:

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>