How to render markers info windows by side links click

Question

I am working on this demo. Why am I not able to render associated info windows on link clicks? As you can see I already tried:

  $('#mapa').append('<li class=' + marker.id + '><a href="javascript:showInfo(' + (locations.length - 1) + ')">' + data.markers[p].title + '</a></li>');

  function showInfo(i) {
    google.maps.event.trigger(locations[i], "click");
  }

but I am getting

Uncaught ReferenceError: showInfo is not defined

when I click on the links.

Answer 1

To be run from an HTML on click function, your showInfo function needs to be in the global context.

Also, if you look at the generated HTML you will see:

<a href="javascript:showInfo(-1)">Barcelona</a>

(-1 is not a valid index for the array)

And the locations array is empty, you never push the markers on to it.

When I fix all of those issues, the links work: updated fiddle

code snippet:

var map;
var locations = [];

function showInfo(i) {
  google.maps.event.trigger(locations[i], "click");
}
$(document).ready(function() {
  var latlng = new google.maps.LatLng(11.610707, 122.740089);
  var myOptions = {
    zoom: 12,
    center: latlng,
    disableDefaultUI: true,
    scaleControl: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeControl: true,
    draggableCursor: 'move',
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var infowindow = new google.maps.InfoWindow({
    content: ""
  });

  var data = {
    "markers": [{
        "latitude": 11.606503,
        "longitude": 122.712637,
        "title": "Copenhagen"
      }, {
        "latitude": 11.585988,
        "longitude": 122.757084,
        "title": "Barcelona"
      }

    ]
  };
  locations.length = 0;
  for (p = 0; p < data.markers.length; p++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
      map: map,
      draggable: false,
      title: "marker " + p,
      id: p
    });
    locations.push(marker);

    $('#mapa').append('<li class=' + marker.id + '><a href="javascript:showInfo(' + (locations.length - 1) + ')">' + data.markers[p].title + '</a></li>');
    bindInfoWindow(marker, map, infowindow, data.markers[p].title);
  }


  function bindInfoWindow(marker, map, infowindow, strDescription) {
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(strDescription);
      infowindow.open(map, marker);
    });
  }


});

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
 .container {
  margin-top: 30px;
}
#map_canvas {
  width: 100%;
  height: 400px;
}
.highlighted {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<ul id="mapa">

</ul>

<div class="container">
  <div class="well">
    <div id="map_canvas"></div>
  </div>
</div>