Inserting a rails link into a Google Maps infowindow

Question

Hi,

I would like to insert a link into the Google Maps InfoWindow to show more information about the point the user has clicked on in my rails app. My current code:

$.getJSON("/places", function(json) {
  if (json.length > 0) {
    for (i=0; i<json.length; i++) {
      var place = json[i];
      addLocation(place);
     }
  }
});

function addLocation(place) {
  var point = new GLatLng(place.lat, place.lng);
  var marker = new GMarker(point);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    var info = place.name + "<br>[link]";
    map.openInfoWindowHtml(point, info);
  });
}

I would like the link to take the user to the page for that marker (ie. /places/id), but am unsure of how to go about this...any help would be much appreciated!

Answer 1

Here's how I did it. (copied and pasted for Sunday laziness but it's simple enough to follow)

// inline javascript defines the places
allplaces = [
    [
    <%- @facets.each do |facet| -%>
        <%- if facet.latitude && facet.longtitude  -%>                  
            ['<%=h escape_javascript(facet_article(facet).title) -%>', 'be', <%= facet.latitude -%>, <%= facet.longtitude -%>, '<%= facet.photo.blank? ? "" : facet.photo.photo.url(:article) -%>', '<%=h escape_javascript(truncate(facet_article(facet).body, :length => 100, :omission => "...")) -%>', '<%=h article_url(:id => facet_article(facet)) -%>']
            <%= (",") unless facet == @facets.last %>
        <%- end -%> 
    <%- end -%>
    ]
];

// separate static external js file interacts with google map api 
function placeMarkers() {
        var shadow,
        html,
        k=0,
        marker;

    for(i=0;i<allplaces.length;i++){
        places = allplaces[i];
        for(j=0;j<places.length;j++){
            place = places[j];
            latlng = new google.maps.LatLng(place[2],place[3]);
            shadow = new google.maps.MarkerImage('/images/mapicons/shadow.png',
                new google.maps.Size(57,37),
                new google.maps.Point(0,0),
                new google.maps.Point(17,35)
            );

            marker = new google.maps.Marker({
                position: latlng,
                title: place[0],
                icon: stringFormat('/images/mapicons/{0}{1}.png', place[1], j+1),
                shadow: shadow,
                map: map
            }); 

            markers[k] = new Object;
            markers[k].marker = marker;
            markers[k].category = place[1];
            html = '<div class="info_window"><h3><a href=' + place[6] + '>' + place[0] +' </a></h3><div class="info_img_wrap"><img src={1} height="55px"/></div>{2}</div>';
            markers[k].html = stringFormat(html, marker.title,place[4],place[5]);
            markers[k].infoWindow = new google.maps.InfoWindow({
                content: markers[k].html,
                maxWidth: '280'
            });
            markers[k].openlistener = makeClosure(k, markers[k].marker);
            k++;
        }
    }
}

Answer 2

I've found another way to go about this that might be a bit easier conceptually - I can construct the appropriate link for each place in my map.js file using the place id outputted in the json packet:

<a href='/places/"+place.id+"'>Show more!</a>"

This seems to work fine!