extInfoWindow gUtility

[Scott Haines]

Hello Everyone,
I am new to this group and before working on updating the source code
for the extinfowindow.js (originally written by Joe Monahan
http://www.seejoecode.com), I wanted to know if anyone in the group
has updated the extension to the infoWindow to work in version 3 of
the maps code.

If anyone has any other secrets which make an external hack irrelevant
please let me know. I am embarking on a v3 maps project and need to
clear the default infoWindow chrome to supply my own custom chrome.
Thanks.

Cheers,
Scott Haines
Newfront Creative

[Scott Haines]

http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/docs/examples.html#HowTo
is the original link I found the v2 code at that I want to update to
v3.

On Sep 6, 2:29 pm, Scott Haines <sc...@newfrontproductions.com> wrote:
> Hello Everyone,
> I am new to this group and before working on updating the source code

> for the extinfowindow.js (originally written by Joe Monahanhttp://www.seejoecode.com), I wanted to know if anyone in the group

[Esa]

This is v3 custom info window
http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/

[Scott Haines]

Esa,
You are the best. This is exactly what I wanted and it is great that
the community has already worked through this issue. I can't thank you
enough.

Cheers,
Scott Haines
Newfront Creative

[Scott Haines]

I found that the svn infobox js is different than the html example. I
prefer the js that was in the html version. I appended the InfoBox
function to include the opts.html, so that it is easier to work with.
(basically a hybrid of the checked in js, and the html)

function InfoBox(opts) {
google.maps.OverlayView.call(this);
this.latlng_ = opts.latlng;
this.map_ = opts.map;
this.html_ = opts.html;
this.offsetVertical_ = -195;
this.offsetHorizontal_ = 0;
this.height_ = 165;
this.width_ = 266;

var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed", function
() {
return me.panMap.apply(me);
});

// Once the properties of this OverlayView are initialized, set its
map so
// that we can display it. This will trigger calls to panes_changed
and
// draw.
this.set_map(this.map_);
}

then line 84 becomes: contentDiv.innerHTML = this.html_;

Then it is easier to execute in my opinion than the InfoBox
(latlng,map,opts) version where you have more confusion and bits of
overhead.

In HTML:

var iWindowHTML = '<div id="wrap_div">'+
'<div class="tTitle">'+
'<h3 class="mainTitle">your title</h3>'+
'<div class="cur_place">icon_or_something</div>'+
'</div>'+
'<div class="main-content">'+
'your contents'+
'</div>'+
'</div>';

google.maps.event.addListener(team, 'click', function(e) {
var infoBox = new InfoBox({latlng: team.get_position(), map:map, html:
iWindowHTML});
});

----------
What I found really nice about this approach is that you can
completely kill the need to run a predetermined infoBox background,
you can specify everything as simple DOM and css and you render your
infoBox even quicker!

I am making a Facebook application (currently in private alpha) that
needed to be able to think quickly and run in a completely dynamic
environment so the approach provided by Esa (infobox.js) and a little
hack to simplify the code was the perfect solution. Think about using
Ajax to call the contents of iWindowHTML, return and display that info
within the box. The solution is then extremely light weight. I will
upload my rev code in a little bit.

Cheers,
Scott Haines
Newfront Creative

On Sep 7, 12:25 pm, Scott Haines <sc...@newfrontproductions.com>
wrote:

[Scott Haines]

The infoBox function doesn't allow for a proper toggle effect from the
marker therefore making a user 'have' to click on the close icon to
actually close the window. So I added an addition to the construct on
an object to object basis.

google.maps.event.addListener(team, 'click', function(e) {
if(!document.getElementById('infoBox')){

var infoBox = new InfoBox({latlng: team.get_position(), map:map,

html: iWindowHTML, width:350,height:'auto'});
} else {
document.getElementById('infoBox').parentNode.removeChild
(document.getElementById('infoBox'));
}
});

What I have done is add on line 70 of infobox.js the following :
div.id = 'infoBox';
div.name = 'infoBox';

Now you can control specific nodes (markers) on the map.

Now I can go full circle and properly bobble the marker and infoBox.

Cheers,
Scott Haines
Newfront Creatve

[pamela (Google Employee)]

Thanks, Scott. Please update the thread with your final code when it's
done. The custom infowindow demos were more of a proof-of-concept than
a fully-featured infowindow, so it's great to have you putting
together a more complete example.

- pamela

[Douglass Davis]

On Monday, February 4, 2013 5:33:43 AM UTC-5, Douglass Davis wrote:

I am working on extinfowindow for google api v3 as well, since I haven't been able to find the code online.

http://devservices.northcarolina.edu/lcl/ded_gmap/system/themes/asp/js/extinfowindow.js

Here is an example of its use:

http://devservices.northcarolina.edu/lcl/ded_gmap/exams/find.php

I have added some custom modifications though.  If any one wants to add it to some repository, feel free too.

I am having one problem.  I am not sure whether this is a google maps API v3 bug or what, and no one answers my questions on stackoverflow: http://stackoverflow.com/questions/14400354/how-can-i-stop-overlay-click-from-going-to-map-or-detect-its-an-overlay-click

Basically, there is no way to stop a a click event on the infowindow.  it always goes through to the map.  None of this works to stop the event:


// overlay click event handler
ExtInfoWindow.prototype.onClick_ = function(e) {
   var evt = e ? e:window.event;

   evt.cancelBubble = true;
   evt.returnValue = false;

   if (evt.stopPropagation) {
      evt.stopPropagation();
   }

   evt.stop(); // from google.maps.MouseEvent

};

Btw: I figured out the click event problem, so that should be fixed.

 

[chris marx]

Thanks for posting this, works great

[Douglass Davis]

It still has a problem in chrome where links in the infowindow don't work.  The user clicks on them and nothing happens.  However, if I don't "steal" the click event and try to stop it, then the click will go right through to the map.  And the click on the map closes the infowindow.  Not sure how to fix this one.

[Douglass Davis]

changed the way event handling works so that mouse scroll wheel on InfoWindow won't zoom.  newest version here:

http://online.northcarolina.edu/system/themes/asp/js/extinfowindow.js

[chris marx]

In chrome, it seems evt.stopPropagation()  is all that is necessary for the click event to not affect the map,  which makes sense since that's what stopPropagation is for.   did you discover a  specific need in chrome  for cancelBubble or  returnValue?

On Wednesday, May 1, 2013 1:01:37 AM UTC-4, Douglass Davis wrote:

[Douglass Davis]

Good point. So, I went back to using an event handler from a previous version which does one or the other:

ExtInfoWindow.prototype.cancelEvent_ = function(e) {

 if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1  && document.all) ||
                  navigator.userAgent.indexOf('Opera') > -1)  {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else {
    e.stopPropagation();
  }
   return false;;
}

And I removed the click handling hack. Also, Re: my previous post, instead of trying to cancel mouse scroll events, now, whenever the user mouses over the infowindow, I just turn zoom by scroll wheel off until they mouse out.

Updated code is here:

http://online.northcarolina.edu/system/themes/asp/js/extinfowindow.js

- Doug

[Douglass Davis]

Anybody know why I can't drag to select text in the ExtInfoWindow here (Firefox, Safari, Chrome)?

http://devservices.northcarolina.edu/lcl/ded_unco/exams/find.php?q%5Bmode%5D=next&q%5Bipinfo%5D=Y&q%5Btext%5D=RALEIGH%2C+NORTH+CAROLINA%2C+USA&q%5Bnsg%5D=Y&q%5Bhasloc%5D=Y&q%5Bsptext%5D=&q%5Bloc%5D=Raleigh%2C+NC%2C+USA&q%5Bgb%5D=&bounds%5Beast%5D=-78.1758648238635&bounds%5Bnorth%5D=36.1492039269212&bounds%5Bwest%5D=-79.1013641761364&bounds%5Bsouth%5D=35.394964376276&result_center%5Blat%5D=35.772096&result_center%5Blon%5D=-78.6386145&&m[setvp]=Y&m[vp][lat]=35.96447903742144&m[vp][lon]=-79.03841375131549&m[vp][zoom]=12&m[setwin]=Y&m[win][cent]=444&m[win][loc]=962&m[win][tab]=0&m[mtype]=roadmap


ExtInfoWindow JS for that site is here:

http://devservices.northcarolina.edu/lcl/ded_unco/system/themes/asp/js/extinfowindow.js

Thanks,
Doug

[chris marx]

 I can get  it to highlight with a right-click,  sure there is no on mouse down or click cancel function somewhere still in there?

[Doug Davis]

FYI:  New version with improved event handling here:

http://online.northcarolina.edu/system/themes/asp/js/extinfowindow.js

Problem with not being able to select text in the infowindow has been corrected (thanks Josh Holiday).