Вставка рельсовой ссылки в информационное окно Google Maps

Question

Я хотел бы вставить ссылку в информационное окно Google Maps, чтобы показать дополнительную информацию о точке, по которой пользователь щелкнул в моем приложении rails. Мой текущий код:

$.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);
  });
}

Я бы хотел, чтобы ссылка переместила пользователя на страницу с этим маркером (т. Е. / Place / id), но я не уверен, как это сделать ... любая помощь будет принята с благодарностью!

Answer 1

Я нашел другой способ сделать это, который может быть немного проще концептуально - я могу создать соответствующую ссылку для каждого места в моем файле map.js, используя идентификатор места, выведенный в пакете json:

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

Кажется, это работает нормально!

Answer 2

Вот как я это сделал.(скопировано и вставлено для воскресной лени, но это достаточно просто, чтобы следовать)

// 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++;
        }
    }
}