Custom InfoWindow Content > Google Maps

Question

I'm working on a location map which uses the Google Maps API. The desired result is:

1. A map with multiple locations (completed, tested, working as desired).
2. Custom pins (completed, tested, working as desired).

--- Things I can't figure out ---

1. Custom content within the info window (click pin, info window opens with name, address, that sort of thing.)
2. A link within a the list of locations which positions the map and opens the info window.

JavaScript so far:

function initialize() {
  var myOptions = {
  zoom: 11,
  center: new google.maps.LatLng(-33.802544,151.20203),
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  setMarkers(map, lianaraine);
}

var lianaLocations = [
  ['1', -33.750829,151.24086, 1],
  ['2', -33.846405,151.211677, 2],
  ['3', -33.876321,151.241171, 3],
  ['4', -33.871511,151.159599, 4],
  ['5', -33.901535,151.161743, 5],
  ['5', -33.676461,151.304244, 6]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/icon_mapPin.png',
    new google.maps.Size(30, 40),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 40));
  var shadow = new google.maps.MarkerImage('images/icon_mapPin_shadow.png',
    new google.maps.Size(26, 20),
    new google.maps.Point(0,0),
    new google.maps.Point(-13,21));
  var shape = {
    coord: [1, 1, 1, 40, 30, 40, 30 , 1],
    type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
  var liana = locations[i];
  var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
  });
  }
}

I'm using V3... If that matters?

I know I'm a fair way off. Any assistance or direction would be appreciated.

Thanks in advance.

@rrfive

Answer 1

So what you want to do is have one infowindow, but it gets different content for each marker. i.e. the content and its position changes in response to user clicks. So in the loop where you create your markers, you also want to create your infowindow. However you will need to separate this out to another function, otherwise you end up with the situation where every infowindow just contains the content of the last marker.

function setMarkers(map, locations) {
  ...
  var infowindow =  new google.maps.InfoWindow({
    content: ''
  });

  for (var i = 0; i < locations.length; i++) {
    var liana = locations[i];
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
    });

    // add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>");
  }
}

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

I'm not sure where you're getting the address details from - in my example I'm just using the same part of your array you're passing to the 'title' attribute, which I then display in the infowindow. Probably you'll have to use the Geocoder service to look up the addresses of each latLng, which could then be an additional column in the array.

Update: If you then need to have a normal link trigger as if you'd clicked on the marker, what you need to do is have your markers in an array (make that a global variable, push markers into the array after creating them). Clicking a link calls a javascript function, passing in a number to identify which element in the array to use. Then you 'trigger' a click on that marker, e.g.

<a href="#" onclick="showWindow(0); return false">One</a>
<a href="#" onclick="showWindow(1); return false">Two</a>

function showWindow(id) {
    google.maps.event.trigger(markersArray[id], 'click');
}