使用Rails 3.1在google maps infowindow中显示多个标记的链接

Question

我有一个使用谷歌地图API v3的公司的多个标记的地图.我需要从infowindow链接到我的应用程序的公司show视图,所以如果我点击标记,infowindow会打开一些基本信息和链接来查看公司的详细信息.代码是这样的:

class CitiesController < ApplicationController

...

def businessmap
    @city = City.find(params[:id])
    @mapcenter = @city.geocode
    @businesses = @city.businesses
    respond_to do |format|
      format.html
      format.json { render :json => @businesses.to_json(:only => [:id, :business_name, :phone, :latitude, :longitude]) }
    end
  end
end

mapview本身就在这里:

%script{:type => "text/javascript", :charset => "utf-8", :src => "http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false&region=IN"}
%script{:type => "text/javascript"}
  function initialize() {

  var cityLatlng = new google.maps.LatLng(
  = @mapcenter[0]
  ,
  = @mapcenter[1]
  );

  var options = {
  zoom: 13,
  center: cityLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), options);

  $.getJSON('businessmap.json', function(businesses) {
  $(businesses).each(function() {
  var business = this;
  var infowindow = new google.maps.InfoWindow({
  content: business.business_name + '<br/>' + 'Phone: ' + business.phone
  });
  var marker = new google.maps.Marker({
  position: new google.maps.LatLng(business.latitude, business.longitude),
  map: map,
  icon: image
  });
  google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
  });
  });
  }

%body{ :onload => "initialize()" }
  %div#map_canvas{:style => "width: 900px; height: 600px;"}

那么,现在只有名称和电话号码,如何显示其他链接(或将业务名称显示为链接)？链接本身例如是"http:// localhost:3000/businesses/186-Cityname-businessname"(用to_param定义).

谢谢!

Answer 1

你想要修改的相关代码是下面的代码片段,它content被分配给点击时显示在infowindow中的任何内容.

var infowindow = new google.maps.InfoWindow({
  content: business.business_name + '<br/>' + 'Phone: ' + business.phone
});

诀窍是构建URL,因为JavaScript不了解Rails路由.您可以更改控制器的JSON呈现以包含URL(可能是添加:methods => [:to_param] 更好的方式)或者在javascript (简单方法)中构建兼容的URL,并希望无论解析URL只使用整数.

简单的方法

在视图中 -

var infowindow = new google.maps.InfoWindow({
  content: '<a href="/businesses/' + business.id + '">' + business.business_name + '</a><br/>' + 'Phone: ' + business.phone
});

稍微好一点的方式

在控制器中 -

format.json { render :json => @businesses.to_json(:only => [:id, :business_name, :phone, :latitude, :longitude], :methods => [:to_param]) }

在视图中 -

var infowindow = new google.maps.InfoWindow({
  content: '<a href="/businesses/' + business.to_param + '">' + business.business_name + '</a><br/>' + 'Phone: ' + business.phone
});