search

trantuanvn / jquery-ui-map

Automatically exported from code.google.com/p/jquery-ui-map
0 stars 0 forks source link

Providing map in jQuery Mobile Accordion as collapsed doesn't allow it to load properly. #51

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
What steps will reproduce the problem?
1. Create instance of JQuery Mobile installing Google Maps
2. Place within a collapsed accordion
3. Load page and open accordion

What is the expected output? What do you see instead?
The map should load normally but sadly shows up either empty or not on the 
right location/markers.
See screens.

What version of the product are you using? On what operating system?
JQM 1.1 on Chrome and Iphone

Please provide any additional information below.
If I made the accordion open to the map by default (data-collapsed="false" ) 
it'll load the map fine.

Thanks

Original issue reported on code.google.com by ghy...@allscenes.com on 7 Jun 2012 at 9:12

Attachments:

GoogleCodeExporter commented 8 years ago 
you need to add:
google.maps.event.trigger( map, "resize" );

Original comment by TRaffe...@geo.to on 2 Aug 2012 at 9:25

GoogleCodeExporter commented 8 years ago 
Thanks TRaffe,
Sadly no luck with that.
How would I implement it sorry a bit of a noob.

The jquery code I have running the map on m.golfsurrey.ca
$('#home').live('pagecreate', function() {
    $('#map_canvas').gmap().bind('init', function() { 
        $.getJSON( 'Static/Files/maps.json', function(data) { 
            $.each( data.markers, function(i, marker) {
                $('#map_canvas').gmap('addMarker', { 
                    'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                    'bounds': true 
                }).click(function() {
                    var content = '<p><a href="' + marker.filename + '" title="' + marker.title + '">' + marker.title + '</a></p>';
                    content += '<hr/>';
                    content += '<p>' + marker.address + '<br/>' + marker.phone + '</p>';
                    $('#map_canvas').gmap('openInfoWindow', { 'content': content }, this);
                });
            });
        });
    });
});

If you pull up on desktop I have the accordion expanded so try on mobile so it 
starts in an uncollapsed state opening the map accordion loads the map but 
doesn't reposition or show the markers.

Greatly appreciate the assistance.

Original comment by ghy...@allscenes.com on 3 Aug 2012 at 11:27

GoogleCodeExporter commented 8 years ago 
Seems like an important issue to me.  Map was displaying fine, until I added 
jQuery accordion.  Now it appears as a small box on left center.  Have resize, 
fit bounds, etc. in the code.

Original comment by diwa...@gmail.com on 16 Jan 2015 at 7:20