AJAX-ссылка в информационном окне Google Maps

Question

В настоящее время я пишу приложение на Rails 3, в котором широко используется API карт Google (v3). В настоящее время информационное окно для каждого маркера содержит ссылку, которая ведет пользователя на страницу для данного конкретного маркера, т.е. / Мест / 1. Пример моего кода ниже:

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({

позиция: новый google.maps.LatLng (place.lat, place.lng), карта: карта, 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);
});
 }

Пока все работает нормально, но я бы хотел исключить обновление страницы, которое происходит после того, как пользователь щелкает ссылку в информационном окне, вводя вызов AJAX. Это возможно? Любая помощь будет высоко ценится!

EDIT:

Функция .live требуется для нацеливания на ссылку информационного окна, поскольку информационные окна часто создаются после того, как DOM готов. Так что я могу перейти по ссылке, но я пытаюсь обновить часть страницы из моего файла map.js. У меня сейчас что-то вроде этого:

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

... где #place_details содержит информацию о маркере, который я хотел бы обновить с помощью вызова AJAX. Как я уже упоминал выше, часть .live работает нормально, так как предупреждение появляется, когда ссылка нажата (когда не закомментировано). Как я могу добиться этого?

Answer 1

Решено, с огромной помощью от этого вопроса . В моем файле map.js:

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

На мой взгляд:

<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>

И в моем контроллере:

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

Работает!

Answer 2

Так что, если я правильно понимаю, вы хотите, чтобы ссылка в информационном окне выполняла обратный вызов AJAX на сервер, чтобы получить содержимое для «Показать больше!», Верно?

Это состоит из трех частей,третий из которых, возможно, то, что вы действительно спрашиваете?

1. Включите сторону сервера для ответа на вызов Javascript
2. Создайте вызов Javascript для сервера, используя JQuery.get()
3. Перехватить ссылку, нажмите, чтобы сделать вызов

Для части 3, я полагаю, у вас есть как минимум 2 варианта:

1. Создать обработчик событий JQuery с помощьюJQuery.click() (см. здесь ), добавление некоторого класса или идентификатора CSS к ссылке, чтобы вы могли нацелить ее / их.
2. Вставить обработчик onclick в ссылку и выполнить AJAXпозвоните туда.

В обоих случаях ваш обработчик должен вернуть false, чтобы браузер не выполнял обычные действия GET и обновить ссылку.