How do I trigger Google Maps API methods using gMap jQuery plugin?

Question

I'm using the gMap plugin for jQuery and need to call the native Google Map API's "resize" method after map initialisation. Can anyone tell me how I'd achieve that?

I'm initialising my map element this way, as per the gMap plugin documentation:

var defaults = {
    latitude: 0,
    longitude: 0,
    zoom: 2,
    scrollwheel: false
};
$('#myMap').gMap(defaults);

The tab that the map appears in is initially hidden, which I know causes draw problems for the Google Maps API (and subsequently many of us web developers it seems).

I've tried setting the map init every time the tab is shown, but this causes flicker and also causes the map display to reset to its default state--neither of which are acceptable, unfortunately.

So, triggering the API's "resize" method via gMaps; I've tried the following when showing the tab's content, but none of them work:

$('#myMap').resize();

$('#myMap').gMap(resize);

google.maps.event.trigger(myMap, 'resize');

$(window).resize();

I've tried asking for help from the gMap Twitter account, but it seems to have been abandoned.

I'd really appreciate a better brain than mine explaining how I can call GMap methods when using the gMap plugin for jQuery.

I might encourage you to handle interactions with the Google Maps API yourself here or find another plugin. The plugin you're using references the deprecated v2 map library, and in order to actually get the map object back out of the function, you'd need to modify the plugin source to store a reference to the $gMap object--perhaps in the associated jQuery data store--so that you can find it again later. — lsuarez
– lsuarez, Commented Feb 14, 2011 at 19:36
I had a suspicion I might be required to hack access to the GMap object out of the plugin somehow, or run a native API instance/reference alongside the plugin one to regain access to certain API methods. Annoying. — markedup
– markedup, Commented Feb 15, 2011 at 8:41

fridek · Accepted Answer · 2011-04-05 22:14:57Z

1

gMap for v3 is available here: http://www.smashinglabs.pl/gmap

answered Apr 5, 2011 at 22:14

fridek

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

markedup Over a year ago

Great to see a new version being developed, fridek. Thanks for the update; will look at using v3 for my next GMaps project.

Chris Broadfoot · Accepted Answer · 2011-02-15 03:03:31Z

0

The gMap plugin seems to use v2 of the API. So calling google.maps.event.trigger won't work.

Try checkResize: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html

Otherwise, I would strongly suggest not bothering with any wrapper libraries. They do not provide much benefit, and as you can see - they make it hard to access important features of the Maps API.

answered Feb 15, 2011 at 3:03

Chris Broadfoot

5,1121 gold badge31 silver badges37 bronze badges

Comments

markedup · Accepted Answer · 2011-02-15 08:39:34Z

0

OK, I think I'll switch to v3 of the native Google Maps API and carry on from there.

In gMaps defence, whilst it doesn't add functionality, it does simplify setting up the map and adding markers to it. Which is why it intrigued me in the first place.

Thanks for the feeback.

answered Feb 15, 2011 at 8:39

markedup

1,2572 gold badges12 silver badges22 bronze badges

1 Comment

markedup Over a year ago

I've now solved this using the native GMaps v3 API. I'm triggering my map object's resize() method as part of my tab switching function, and it's working as I wanted (i.e. stateful, no flickering).

Collectives™ on Stack Overflow

How do I trigger Google Maps API methods using gMap jQuery plugin?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related