Question

I have a map with multiple markers of companies using google maps API v3. I need to link from the infowindow to the company show view of my application, so if I click on the marker an infowindow opens with some basic information and a link to view the details of the company. The code is this:

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

The mapview itself is here:

%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;"}

So, now there is just the name and the phone number, how can I display an additional link (or make the name of the business appear as a link)? The link itself is e.g. “http://localhost:3000/businesses/186-Cityname-businessname” (defined with to_param).

Thank you!

Answer 1

The relavent code you’re looking to modify is is the snippet below, where content is getting assigned to whatever will show up in the infowindow when it’s clicked on.

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

The trick is going to be building the URL, since the JavaScript has no knowledge of Rails routes. You could change the controller’s JSON rendering to include the URL perhaps adding :methods => [:to_param] (the better way) OR build a compatible URL in javascript (the easy way) and hoping that whatever parses the URLs only uses the integers.

---

Easy Way

In the view –

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

---

Slightly Better Way

In the controller –

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

In the view –

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