RoR gem Gmaps4rails、カスタマイズinfowindow

私はRoRにウェブサイトを持っています。RoR gem Gmaps4rails、カスタマイズinfowindow

gmaps4rails gemを使用してGoogleマップを呼び出します。

infowindowのバックグラウンドdivを削除したいのですが、どうすればいいのか分かりません。 EDIT1

私は私のindex.html.erb

<body> 

<%# Mapa para mostrar todos os pontos guardados na base de dados %> 
    <div id="map_show" class="" style=""></div> 

    <script type="text/javascript"> 

    var InfoBoxBuilder, handler, 
     extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, 
     hasProp = {}.hasOwnProperty; 

    InfoBoxBuilder = (function(superClass) { 
     extend(InfoBoxBuilder, superClass); 

     function InfoBoxBuilder() { 
     return InfoBoxBuilder.__super__.constructor.apply(this, arguments); 
     } 

     InfoBoxBuilder.prototype.create_infowindow = function() { 
     var boxText; 
     if (!_.isString(this.args.infowindow)) { 
      return null; 
     } 
     boxText = document.createElement("div"); 
     boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens 
     boxText.innerHTML = this.args.infowindow; 
     return this.infowindow = new InfoBox(this.infobox(boxText)); 
     }; 

     InfoBoxBuilder.prototype.infobox = function(boxText) { 
     return { 
      content: boxText, 
      pixelOffset: new google.maps.Size(-140, 0), 
      boxStyle: { 
      width: "280px" 
      } 
     }; 
     }; 

     return InfoBoxBuilder; 

    })(Gmaps.Google.Builders.Marker); 

     handler = Gmaps.build('Google'); 
     handler.buildMap({ provider: {}, internal: {id: 'map_show'}}, function() { 
      markers = handler.addMarkers(<%=raw @hash.to_json %>); 
      handler.bounds.extendWith(markers); 
      handler.fitMapToBounds(); 


     }); 
    </script> 
</body>

にこのコードを持っていますが、出力はこれです：何午前

私は間違っている？ EDIT2私の部分_infowindow.html.erbで

私は私のモニュメントの情報を与えるために、このコードを持っており、その情報は、マーカーに行きます。

<div class="card" style=""> 
    <%= image_tag poi.image, :class => "card-img-top cover" %> 
    <div class="card-block"> 
    <h4 class="card-title"><%= poi.name %></h4> 
    <p class="card-text"><%= simple_format(poi.description.first(400)) %></p> 
    </div> 
</div>

どこに配置すればよいですか？私はコードをどこに置くべきかわからない。、部分的=> "/ホーム/情報ウィンドウ"：

marker.infowindowのrender_to_string（：

私は、コントローラ内の部分をレンダリングするためにこのコードを使用EDIT3

@地元の人々=> {： POI => POI}）

が、情報ウィンドウには、私はまだ自分自身が、basicallを勉強

出典

2017-07-09 Miguel Coelho

最初の画像のようにとどまりますあなたは情報ウィンドウのdivをターゲットにできる必要があります。 gmaps4railsを使用してインフォウィンドウを作成すると、main div内にdivが作成されるので、内側divのみをカスタマイズします。メインディビジョンをターゲットにするにはもう少しコードが必要です。私はこれを達成するために、次のコードを使用：

var InfoBoxBuilder, handler, 
     extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, 
     hasProp = {}.hasOwnProperty; 

    InfoBoxBuilder = (function(superClass) { 
     extend(InfoBoxBuilder, superClass); 

     function InfoBoxBuilder() { 
     return InfoBoxBuilder.__super__.constructor.apply(this, arguments); 
     } 

     InfoBoxBuilder.prototype.create_infowindow = function() { 
     var boxText; 
     if (!_.isString(this.args.infowindow)) { 
      return null; 
     } 
     boxText = document.createElement("Div"); 
     boxText.setAttribute('class', 'yourClass'); 
     boxText.innerHTML = this.args.infowindow; 
     return this.infowindow = new InfoBox(this.infobox(boxText)); 
     }; 

     InfoBoxBuilder.prototype.infobox = function(boxText) { 
     return { 
      content: boxText, 
      pixelOffset: new google.maps.Size(-140, 0), 
      boxStyle: { 
      width: "280px" 
      } 
     }; 
     }; 

     return InfoBoxBuilder; 

    })(Gmaps.Google.Builders.Marker);

これは、ウィンドウの全体の外観を変更するメインのdivをターゲットにすることができます。これがあなたのために働くか、あなたのコードを投稿するためのガイダンスが必要な場合はお知らせください。

ここでは、私があなたに伝えていた更新されたコード部分を示します。

 <!-- Custom info markers --> 

    <div id="map_show" class="" style=""></div> 

    <script type="text/javascript"> 

    var InfoBoxBuilder, handler, 
     extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, 
     hasProp = {}.hasOwnProperty; 

    InfoBoxBuilder = (function(superClass) { 
     extend(InfoBoxBuilder, superClass); 

     function InfoBoxBuilder() { 
     return InfoBoxBuilder.__super__.constructor.apply(this, arguments); 
     } 

     InfoBoxBuilder.prototype.create_infowindow = function() { 
     var boxText; 
     if (!_.isString(this.args.infowindow)) { 
      return null; 
     } 
     boxText = document.createElement("div"); 
     boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens 
     boxText.innerHTML = this.args.infowindow; 
     return this.infowindow = new InfoBox(this.infobox(boxText)); 
     }; 

     InfoBoxBuilder.prototype.infobox = function(boxText) { 
     return { 
      content: boxText, 
      pixelOffset: new google.maps.Size(-140, 0), 
      boxStyle: { 
      width: "280px" 
      } 
     }; 
     }; 

     return InfoBoxBuilder; 

    })(Gmaps.Google.Builders.Marker); 

     handler = Gmaps.build('Google'); 
     handler.buildMap({ provider: {}, internal: {id: 'map_show'}}, function() { 
      markers = handler.addMarkers(<%=raw @hash.to_json %>); 
      handler.bounds.extendWith(markers); 
      handler.fitMapToBounds(); 


     }); 
    </script>

私は自分の答えに合わせて更新しました。このセクションのクラスを作成し、好きなようにスタイルを設定するクラスを作成する必要があります。

boxText = document.createElement("div"); 
    boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens

出典

2017-07-15 19:52:54

私のコードをテストしますか？私は_infowindow.html.erbという名前のファイルを持っています –

私はマップを紹介するメインのindex.html.erbファイルにちょうどある部分を使っていませんでした。私は自分の答えを更新して、私が出したことを示しています。 –

私の質問が更新されました。私は部分的な部分を削除し、あなたが私に与えたすべてのコードを入れようとしましたが、いくつかの変更を加えました。私は間違って何をしていますか？ –

RoR gem Gmaps4rails、カスタマイズinfowindow

答えて

関連する問題