Customized InfoWindow

[johnlucas]

I wish I could add this feature myself, but I need to improve my ruby on rails knowledge first. Do you have any plan of developing something like the InfoBox you can see here http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries ?

[apneadiving]

Hi, I'd like to do this, I even put it in the readme at the root of the gem. I just have no clear idea of how to make it generic: because it's really, really customizable, I should propose almost every variable to be set and that would be a pain, removing much of the interest of the gem.

That said, I've my idea, let's give an example taken from http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/infobox-basic.html

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

var myOptions = {
   content: boxText
   ,disableAutoPan: false
   ,maxWidth: 0
   ,pixelOffset: new google.maps.Size(-140, 0)
  ,zIndex: null
  ,boxStyle: { 
      background: "url('tipbox.gif') no-repeat"
      ,opacity: 0.75
      ,width: "280px"
   }
   ,closeBoxMargin: "10px 2px 2px 2px"
   ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
   ,infoBoxClearance: new google.maps.Size(1, 1)
   ,isHidden: false
   ,pane: "floatPane"
   ,enableEventPropagation: false
};

Three elements there:

1. css properties
2. text
3. display options

What I think:

1 + 3 could be returned by a javascript function set by the user. If this function exists, the gem would assume it has to be used for all markers, otherwise, it would use the basic infowindow

2: as usual in the model

Your point of view?

[johnlucas]

Do you think it's possible to render a template inside the box? That could also define CSS (external file) and text. Some display options may still be needed I guess.

On 18 May 2011, at 00:12, apneadivingreply@reply.github.com wrote:

Hi, I'd like to do this, I even put it in the readme at the root of the gem. I just have no clear idea of how to make it generic: because it's really, really customizable, I should propose almost every variable to be set and that would be a pain, removing much of the interest of the gem.

That said, I've my idea, let's give an example:

var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; boxText.innerHTML = "City Hall, Sechelt
British Columbia
Canada";

var myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-140, 0) ,zIndex: null ,boxStyle: { background: "url('tipbox.gif') no-repeat" ,opacity: 0.75 ,width: "280px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false };

Three elements there:

1. css properties
2. text
3. display options

What I think:

1 + 3 could be returned by a javascript function set by the user. If this function exists, the gem would assume it has to be used for all markers, otherwise, it would use the basic infowindow

2: as usual in the model

Your point of view?

Reply to this email directly or view it on GitHub: https://github.com/apneadiving/Google-Maps-for-Rails/issues/31#comment_1193136

[apneadiving]

You mean like handleBar or Mustache? Don't know... But seems a bit overkill here.

[johnlucas]

No no sorry, I didn't explain myself.

I'd like to be able to load a partial for example, something like this (take it as a pseudocode pls):

infoBox.innerHtml(render(:partial => 'infoBox'))

The idea is to still use erb files to put content into the infoBox, like also properties of the model. Without having to construct a string of html in the model or in a javascript funcion as you suggested.

Forgive me if this sounds silly, I actually need something like this and think it would be cool for generic use too, but I need to learn a bit more of rails and javascript to understand if what I am suggesting is actually possible.

What do you think?

On 18 May 2011 11:26, apneadiving < reply@reply.github.com>wrote:

You mean like handleBar or Mustache? Don't know... But seems a bit overkill here.

Reply to this email directly or view it on GitHub:

https://github.com/apneadiving/Google-Maps-for-Rails/issues/31#comment_1195706

[apneadiving]

ok I see. It's clearly compatible with what I wrote above. With some luck I could do that by the end of the week.

[johnlucas]

Cool, thanks a lot!

On 19 May 2011 00:14, apneadiving < reply@reply.github.com>wrote:

ok I see. It's clearly compatible with what I wrote above. With some luck I could do that by the end of the week.

Reply to this email directly or view it on GitHub:

https://github.com/apneadiving/Google-Maps-for-Rails/issues/31#comment_1199872

[apneadiving]

I can't manage to resolve js inclusions. Will try another day...

[apneadiving]

I'm about to push something in the git repository (not a gem release yet).

Please try. Here is how it works:

<%= gmaps("markers" => {"data" => @json, "options" => {"custom_infowindow_class" => "yellow", "custom_infowindow_status" => "opened"  } }) %> 

In javascript:

function gmaps4rails_infobox(boxText) {
return {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
};

In css file:

.yellow {
border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;
}

Basically, this does the example given here: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/infobox-basic.html

[johnlucas]

I tried. The resul is very similar to what is shown in the gmaps example. Smooth. Thank you...

I need to play a bit with it now...I need to build an infobox with a lot of info (from models), that is why I wanted to render a partial into it. I don't know how to do it yet, I will try to play with JQuery to see if I get some ideas. It is just that I don't like the idea of constructing the html in the model, what do you think?

[apneadiving]

Well, because you're using gmaps4rails your own way, I couldn't provide a standard api to do this :)

But you should really look into js partials like handlebars