[SOLVED] How to render markers info windows by side links click

How to render markers info windows by side links click

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.

Solution

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>