1

I'm building a userscript (script to install in browser to modify 3rd party pages) for GeoGuessr.com. It adds a button that allows to expand the small guess map to fullscreen.

While I had no problems with the layout, the issue is that the Google Map does not resize:

enter image description here

The page is built with Backbone and does not have an API to access any of the views, much less the internal Google Maps object.

I tried 

$(window).trigger('resize');

to trigger a window resize event because I noticed when I do this manually the map resizes. Yet nothing happens (Chrome 29).

Is there any way to force the Google Map to resize in my userscript?

stephanos
  • 3,319
  • 7
  • 33
  • 47

1 Answers1

2

If you resize the div container of the map, you must also resize the map object itself. As stated in the Reference:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize').

Where map is the variable name of the google.maps.Map object. (Which I'm guessing you can only access if it's in the global namespace).

Update:

First thing is first, to access properties that are built by the Backbone.View.extends you need to access the prototype of the class - in this case window.gg.guessMapView.prototype. Next we need to specify the el that the view will use. Because this is generated initially by the Backbone view - as it should be - you have no access to it. See this article for more info. What we want to do is attach an existing html element to it, which is the #guessMapContainer element. 

window.gg.guessMapView.prototype.$el = $('#guessMapContainer')

Once an element is specified you want to re-initialize the view so that it renders the map again. Which can be done with the initialize() method already implemented for the view.

window.gg.guessMapView.prototype.initialize()
Suvi Vignarajah
  • 5,758
  • 27
  • 38
  • Well, I know ... and since I cannot access the object, I'm looking for a workaround/hack here... – stephanos Sep 04 '13 at 06:40
  • @stephanos make use of [Chrome Dev Tools' JS unminifier](http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html) to check out what's going on in the code. From what I see the map object is defined in a backbone view, which is part of a global variable `window.gg`. – Suvi Vignarajah Sep 04 '13 at 14:37
  • that's what I thought as well at first, but the `window.gg` contains the View "class" not the instance; later in a closure an instance is created - but not accessible :( – stephanos Sep 04 '13 at 18:43
  • hmm..true, but there is still a way to make it work. See update to answer. Keep in mind though this is a hack specific to your problem, which is not what stackoverflow is for, hopefully someone else in the future will find this solution relevant though. – Suvi Vignarajah Sep 04 '13 at 19:33
  • thanks for the update! I tried it in the Chrome console and it worked, but when I applied it to the userscript the reference to window.gg was undefined - maybe it has only limited access (sandbox?) to the Javascript environment... – stephanos Sep 05 '13 at 09:51
  • would this help? http://stackoverflow.com/questions/5006460/userscripts-greasemonkey-calling-a-websites-javascript-functions (I actually have minimal experiences with userscripts, I've played around with Chrome extensions before though and know it's possible to access a page's global functions and variables through that.) – Suvi Vignarajah Sep 05 '13 at 15:08
  • thanks for your efforts! the workaround you linked to does indeed work; however when I tried it out I realized that calling `initialize()` resets the maps zoom level and - much more severe - the guess/marker which makes it unusable :( – stephanos Sep 05 '13 at 16:56
  • no worries and yes that would make sense..i was assuming it was going to be triggered on the page load, i'm interested to know what solution you do come up with though (i'm sure it's possible - just keep hacking) – Suvi Vignarajah Sep 05 '13 at 17:42