Map-in-upper-left problem: jquery-1.6.4 vs jquery-1.7.2

[GoogleCodeExporter]

What steps will reproduce the problem?
0. Use 3.0-rc version of plugin

1. Create map using jquery-mobile 1.1.0 and jquery-1.6.4
--> works as expected (beautifully)

2. Create map using jquery-mobile 1.1.0 and jquery-1.7.2
--> maps is put off-center in upper left of screen,
won't recenter or be dragged into place

3. It could be my code, but the following sample works great
with 1.6.4, then I make 1 change to 1.7.2 and the problem shows:

    $('#map_canvas').gmap( { 'center': defaultLoc, 'zoom' : 14, 'zoomControlOptions': {'position':google.maps.ControlPosition.LEFT_TOP} })
    .bind('init', function(evt, map) {
        $('#map_canvas').gmap('addControl', 'controls', google.maps.ControlPosition.BOTTOM_CENTER);
        document.getElementById('controls').style.display = 'inline';
    }); // end .bind

Note: jquery-mobile-1.1.0 "officially" supports using jquery 1.6.4 so
using 1.6.4 is an okay work-around for me.

Original issue reported on code.google.com by libby.ba...@gmail.com on 19 Apr 2012 at 4:15

[GoogleCodeExporter]

Update: This was in a jquery mobile app on Android. I am able to use
maps again in my app with jquery 1.7.2 and jqmobile 1.1.0. What worked
for me with jquery 1.6.4 had to be tweaked to work again. Nothing crazy
and nothing not already in Johan's docs, except maybe step 1.

1. trigger 'pageinit' event on the map page (is not the first page in app)
which creates the map, trigger is done from first app page 'pageinit' event
2. later in app, add marker, re-center map as usual then changePage to map page
3. refresh with :
$('#page-map').live("pageshow", function() {
    $('#map_canvas').gmap('refresh');
});

It's kind of jumpy when going to the map page, but that could be from Android
+ jquery mobile.

This was part of upgrade from jquery mobile 1.0.1/jquery 1.6.4
to jquery mobile 1.1.0 / jquery 1.7.2. 

Original comment by libby.ba...@gmail.com on 20 Apr 2012 at 12:16

• Changed state: Invalid

[GoogleCodeExporter]

Why does one of the 2 below don't work?
$('#location').gmap('option', 'zoomControlOptions', { style: 
google.maps.ZoomControlStyle.SMALL, position: 
google.maps.ControlPosition.TOP_RIGHT });

$('#location').gmap('option', 'zoomControlOptions', { 'style': 
'google.maps.ZoomControlStyle.SMALL', 'position': 
'google.maps.ControlPosition.TOP_RIGHT' });

What i'am doing wrong to appy the zoomControlOptions?

Original comment by ludwig.g...@gmail.com on 7 Jun 2012 at 8:17

[GoogleCodeExporter]

Do you get any errors?

Did you try:
$('#location').gmap('option', 'zoomControlOptions', { 'style': 
google.maps.ZoomControlStyle.SMALL, 'position': 
google.maps.ControlPosition.TOP_RIGHT });
(quote the zoom control option names, don't quote the constants)

Original comment by libby.ba...@gmail.com on 7 Jun 2012 at 8:38

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Ok, it's solved, I miss placed a some comment. for people that have the same 
trouble, my final solution:

    $('#location').gmap({
                    'center': hiddenLatitudeId + ',' + hiddenLongitudeId,
                    'disableDefaultUI': true,
                    'callback': function () {
                        var self = this;
                        self.addMarker({ 'position': hiddenLatitudeId + ',' + hiddenLongitudeId }).click(function () {
                            self.openInfoWindow({ 'content': 'Bark location provide content' }, this);
                        });
                    }
                });

                $('#location').gmap('option', 'mapTypeId', google.maps.MapTypeId.ROADMAP);
                $('#location').gmap('option', 'streetViewControl', 'true');
                $('#location').gmap('option', 'zoomControl', 'true');

                $('#location').gmap('option', 'zoom', 15);

                $('#location').gmap('option', 'zoomControlOptions', { 'style': google.maps.ZoomControlStyle.SMALL, 'position': google.maps.ControlPosition.TOP_RIGHT });

                $('#location').gmap({ 'center': hiddenLatitudeId + ',' + hiddenLongitudeId, 'scrollwheel': true });

Original comment by ludwig.g...@gmail.com on 11 Jun 2012 at 6:28

[GoogleCodeExporter]

Hi.. I use jQueru 1.8.2 and jQuery Mobile 1.2.0...I solved changing the 
handler.. 

from:

$('#directions_map').live('pageinit', function() {

to:

$('#directions_map').live('pageshow', function() {

Original comment by we...@webbb.com.br on 18 Dec 2012 at 12:03