googlearchive / js-info-bubble Goto Github PK

Hello,

When the width and height is calculated the border width isn't in the calculation. This will result in showing a scrollbar when the height of the content is larger then the minHeight.
By adding the following lines after line 1730 it will fix this issue.

height += this.getBorderWidth_();
width += this.getBorderWidth_();

Perhaps you can use this.

With kind regards,

Frank

Hi,

I am using infobubble.js for my map app from last three years, but from last couple of weeks I am facing unusual problem due to infobubble.js on Google chrome My application start taking huge time to load on Google chrome but on other browsers such as firefox it works fine.

And I am sharing the screenshot of my app timeline:

So kindly help me how to sort out this issue.

Application URL: http://maps.dicrc.in/BM/

Chrome Version 50.0.2661.102 m
Google API v3
Fusion Table V2

Thanks & Regards,
Piyush

The close button should have a css class in order to make it possible to actualy style it. Adding a custom close element is not possible, because click events are all catched by the infobubble js.

That would be just awsome 😸 !

Hello

Is it possible to change arrow position relative to the entire infobubble?

In the infobubble demo, the arrowPosition property only operates along the bottom edge of the infobubble.

Currently, I'm not using any infowwindow plugin, and have a normal infowindow appearing to the right of a marker, and would like the arrow to be re-positioned as well.

For reference, there's another custom infowindow plugin that does this; here's their demo:
https://github.com/atmist/snazzy-info-window/tree/master/examples#multiple-markers

In IE11, this.get('closeSrc') initiates a request to /undefined.
Setting it in config while creating new instance of infobubble doesn't make any difference.

Infobubble shows up in the wrong location when first viewing via internet explorer. However when refreshed the info bubble shows up in the correct area

How do I add an additional CSS element to the infoBubble? I want the bottom margin of the marker popup to be 0.

There is an issue in tabs height calculation that cause problem in close button position.

I explain this issue by examples.

• Example One

Close button styles in above image.

One of above infobubble tabs size in chrome.

One of above infobubble tabs size in firebug.

• Example Two

Close button styles in example two( above image ).

One of above infobubble tabs(example 2) size in firebug.

I logged this.tabHeight_ and both had same value 26.

As you can see in example two, close button position is not as same as close button position in example one because tab heights are different in examples.

Close button of Info Bubble not appear. Please help me. Thank you

The first setContent always works. But while dynamically updating the content of the same infoBubble, sometimes the content does not get updated. I have been unable to figure out a step by step reproduction.

But the following works:

infoBubble.content_.innerHTML = Blaze.toHTMLWithData(tmplt, opt);
infoBubble.updateContent_();

So I assume that the setContent is not triggering these changes at random.

Gutter size is based on arrowsize.

Would be helpful to be able to set this explicitly. For example I have a mobile device use case where we need the infobubble to be full screen but still show the arrow (no gutter). I can't do this without modifying the codebase.

Or in any other offset than upper right?

as per SO issue http://stackoverflow.com/questions/33184410

I'm trying to add dynamic content inside a google maps infobubble:

• one first marker click an empty infobubble appears
• on SECOND click of the marker the correct content is loaded

JS Fiddle here: http://jsfiddle.net/goredwards/n64324pn/

I'm using the domready event on the previously defined infobubble object to launch the function that retrieves my dynamic content (html string) and then uses jQery .html or .append to add it to an element that's already defined in the infoBubble content.

I'm getting all the right signals in console that the domready function is being completed and the dynamic html is being correctly found on 1st marker click.

However...

• jQuery does NOT seem to find the element in the content on the infoBubble until the 2nd click

As the answer to my SO question pointed out:

the issue seems to be the open_-method of the infobubble(which will be called in the open-method):

InfoBubble.prototype.open_ = function(opt_map, opt_anchor) {
  this.updateContent_();
  if (opt_map) {
    this.setMap(opt_map);
  }
  //............................
}

It first calls the method updateContent_ (where the domready-event will be triggered) and then sets the map. But the overlay will not be added to the map until the map-property has been set, the content is a DocumentFragment/Node that hasn't been attached to the document yet, so jQuery may not find it.

What's the correct way to add dynamic content using the domready function if the content isn't actually available in the DOM when domready is fired ?

Shouldn't the domready event be fired after the setMap() call so that the infobubble elements can actually be found in the DOM ?

I am creating multiple markers with InfoBubble on the page using a for loop.

I saw in Chrome that InfoBubble takes around a millisecond to create on an avaergae.

But on IE10 , IE Edge - it takes on an average 60 ms .

Here is the sample :
var infoBubble = new InfoBubble( {
content : someHTMLString
minWidth : 310,
backgroundColor : 'rgb(1,89,68),
borderRadius : 0 ,
borderWidth : 0 ,
backgroundClassName : 'branch_bubble_data',
disableAutoPan: false,
maxHeight : 200
})

If I simply add the following bootstrap script/style on a page with Infobubble, the tabs get stacked (see attached screenshot).

" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"
"... el="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"

please advise

I kept getting a

InfoBubble is not a constructor

error in NPM environment.

To fix, I added module.exports = InfoBubble at the bottom of the infobubble.js file.

Under the current infobubble.js code the 'autoPan' feature is very basic - simply centering the selected / clicked marker, rather than moving the map just enough to make the infobubble visible.

Compare the following jsfiddles :

1. Using the standard google.maps.InfoWindow() - http://jsfiddle.net/goredwards/3r7r1zkq/
2. Using the current infobubble.js code - http://jsfiddle.net/goredwards/v9934fqm/

...you may have to move the map to have the marker near the edge to see the autopan effects.

The part of the code that's problematic is the panToView() function which contains code to
effectively centre the map on the selected pin.

This might be fine for very small maps, but on larger maps is completely unnecessary and frankly has an annoying effect that can't be useful in many circumstances.

Was there a plan to update this part of the code to be more in line with the far superior performance of the standard google.maps.InfoWindow() autoPan feature ?

I would like to install this package via NPM but without package.json is not possible.

I can't find a way to change the default animation of when the bubble opens.

I find out there is a lot there is a lot going on when attaching an Info bubble to the markers.
I have some ideas/suggestions to improve the performance of it:

• Using only one element and changing the content dynamically.
• Lazy loading render when mouseover.
• Improve the code pref on render.

I may add more things on the process.

hi i want add box-shadow in to the infoBubble how can i do this ?

Dear,
I am using your infobubble.js file to create customize Info window, but I am facing one issue.
maxWidth is not working.

var infoBubble = new InfoBubble({
maxWidth: 100,
content: infocontent,
padding:2,
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
});
infoBubble.open(mymap, marker);

I have changed many times the maxWidth value but there is not changes. other parameters are working except maxwidth.

please give me update on this

Is there a way to change the close button image to either a simple X character or to update the path to a different close button?

Hi

Any clue to change the info bubble draw method when a marker is near of the map bounds?

If marker is near of the top show the bubble below the marker, and if is near of the right or left show the marker at the opposite direction instead of panning the map?