Map-in-upper-left problem: jquery-1.6.4 vs jquery-1.7.2 about jquery-ui-map

[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 [email protected] 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 [email protected] 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 [email protected] 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 [email protected] 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 [email protected] on 18 Dec 2012 at 12:03