AJAX link in a google maps infowindow

Question

Hi,

I'm currently writing a Rails 3 app that uses the google maps API (v3) extensively. Currently, the infowindow for each marker contains a link that takes the user to the page for that particular marker - ie. /places/1. A sample of my code is below:

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

    function addLocation(place,category) {
   var marker = new google.maps.Marker({

position: new google.maps.LatLng(place.lat, place.lng), map: map, title: place.name, icon: image[place.tag] });

      marker.mycategory = category;
      gmarkers.push(marker);

      google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
          content: "<h3>"+ place.name +"</h3><p>" + place.tag +"</p><a href='/places/"+place.id+"'>Show more!</a>"
        });
        infowindow.open(map, marker);
});
 }

This all works fine so far, but I would like to eliminate the page refresh that occurs after the user clicks on the infowindow link by introducing an AJAX call. Is this possible? Any help would be much appreciated!

EDIT:

The .live function is require to target the infowindow link, as the infowindows are often created after the DOM is ready. So I can hit the link okay, but am struggling with how to update part of the page from my map.js file. I've got something like this at the moment:

jQuery('#place_link').live('click', function() {
  //alert("You clicked here.");
  jQuery('#place_details').load('/places/"+place.id" #place_details');
  return false;
});

...where #place_details contains the information about the marker I'd like to update with an AJAX call. As I mentioned above, the .live part works fine, as the alert appears when the link is clicked (when not commented out). How can I go about achieving this?

Answer 1

So if I understand correctly you want to have the infowindow link make an AJAX call back to the server to retrieve the content for "Show more!", right?

There are about three parts to this, of which the third is perhaps what you're really asking?

1. Enable the server side to respond to a Javascript call
2. Construct the Javascript call to the server using like JQuery.get()
3. Intercept the link click to do the call

For part 3 I believe you have at least 2 options:

1. Create a JQuery event handler using JQuery.click() (see here), adding some CSS class or id to the link so you can target it/them.
2. Embed an onclick handler into the link and do the AJAX call in there.

In both cases your handler must return false to stop the browser doing the normal GET and refresh for the link.

Answer 2

Solved, with plenty of help from this question. In my map.js file:

jQuery(document).ready(function(){
  mapInit();
  jQuery('#place_link').live('click', function() {
    var url = jQuery(this).attr('href');
    jQuery.ajax({
      beforeSend: function(request) { request.setRequestHeader("Accept", "text/javascript"); },
      success: function(response) { jQuery('#place_details').empty().append(response); },
      type: 'get',
      url: url
    });
    return false;
  });
});

In my view:

<div id="map" style="width: 100%; height: 500px;"></div>
<form action="#">
  Attractions: <input type="checkbox" id="attractionbox"/> &nbsp;&nbsp;
  Food and Drink: <input type="checkbox" id="foodbox" /> &nbsp;&nbsp;
  Hotels: <input type="checkbox" id="hotelbox" /> &nbsp;&nbsp;
  Towns/Cities: <input type="checkbox" id="citybox" /><br />
</form>

<p id="notice"><%= notice %></p>

<div id="place_details">
  <%= render 'placeshow' %> 
</div>

And in my controller:

def show
  @place = Place.find(params[:id])

  respond_to do |format|
    format.html { render :action => "show" and return }
    format.json { render :json => @places.all }
    format.js { render :partial => "placeshow", :layout => false and return }
  end
end

It works!