gmaps4rails v2 - 插入infoWindow关闭按钮INTO infowindow

时间:2014-05-29 15:07:52

标签: google-maps infobox

我使用gmaps4rails在Google地图上显示标记。 它运行良好,但我无法弄清楚如何删除infowindows的默认关闭按钮,并将其插入到我所选择的自定义设置中。

index.html.erb:

    <div class='full_height' style='width: auto;'>
        <div id="map" class='full_height' style='width: 100%;'></div>
      </div>

<script type="text/javascript">

  $(document).ready(function(){
    var raw_markers = <%=raw @hash.to_json %>;

    function createSidebarLi(json){
      return ("<li>" + json.titre + ' ' + json.address + "</li>");
    };

    function bindLiToMarker($li, marker){
      $li.on('click', function(){
        handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        google.maps.event.trigger(marker.getServiceObject(), 'click');
      });
    };

    function createSidebar(json_array){
      _.each(json_array, function(json){
        var $li = $( createSidebarLi(json) );
        $li.appendTo('#markers_list');
        bindLiToMarker($li, json.marker);
      });
    };

    handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} });
    handler.buildMap({ internal: {id: 'map'}}, function(){

      var markers = handler.addMarkers(raw_markers);

      _.each(raw_markers, function(json, index){
        var marker = markers[index];
        json.marker = marker;
        google.maps.event.addListener(handler.getMap(), "click", function(){
          infoWindow.close();
        });
        google.maps.event.addListener(marker.getServiceObject(), 'mouseover', function(){
          google.maps.event.trigger(marker.getServiceObject(), 'click');
        });
      });


      createSidebar(raw_markers);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });

  });

</script>

infoboxBuilder.js.coffee:

class @InfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder

    # override method
    create_infowindow: ->
        return null unless _.isString @args.infowindow

        boxText = document.createElement("div")
        boxText.setAttribute("class", 'yellow') #to customize
        boxText.innerHTML = @args.infowindow
        @infowindow = new InfoBox(@infobox(boxText))


    infobox: (boxText)->
        content: boxText
        pixelOffset: new google.maps.Size(0, -20)
        boxStyle:
          width: "280px"

控制器:

  def index

    if params[:search].present?
      @properties = Property.near(params[:search], 100, )
    else
      @properties = Property.all
    end
    @hash = Gmaps4rails.build_markers(@properties) do |property, marker|
      #sameLocation = @properties.near(property)
      marker.lat property.latitude
      marker.lng property.longitude
      marker.infowindow render_to_string(:partial => "/properties/infowindow", :locals => { :property => property})
      marker.json({ titre: property.titre, address: property.address})
      #marker.picture({
                 # :url => 'http://198.100.149.26/lookn/marker.png',
                 # :width   => 60,
                 # :height  => 82
          #})
    end
  end

0 个答案:

没有答案