Question

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

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!