Jquery Mobile not loading Google Map (except on refresh)

Question

I\'m using Jquery Mobile 1.0 and Google Maps v3 to load a user location map. The map loads fine when accessed via direct url but when accessed from a link, it chokes up and not

Answer 1

Amazing response of lulalala - thank you for solving my issue. I changed the HTML code (class="gmap_canvas" instead of id="gmap_canvas") according to his answer. In addition I added

google.maps.event.trigger(map, "resize");

to show the map properly.

See also function showMap for details.

In the html I changed the div tag for the map into:

and I added a rel="external" - Attribute to all of the anchor tags:

KARTE
LISTE
                    
OPTIONEN

 

My code (jquery)

    var activePage;

        $( '#karte' ).live( 'pageinit',function(event){
            activePage = $(event.target);
            initialize();
        });

        function initialize() {
            // prepare Geocoder   
            clearOverlays(); 
            var geocoder = new google.maps.Geocoder();
            navigator.geolocation.getCurrentPosition(function(position) {
                var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                var myOptions = { // default map options
                    zoom: 12,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                showMap(myOptions);
                google.maps.event.trigger(map, "resize");
                findPlaces();
            });
        }


        function showMap( options ) {
            canvas = $('.gmap_canvas', activePage);
            canvas.css({width: '100%', height: '100%', position: 'relative'});
            map = new google.maps.Map(canvas[0], options);
            myLatLng = options.center;
        }

    // clear overlays function
    function clearOverlays() {
        if (markers) {
            for (i in markers) {
                markers[i].setMap(null);
            }
            markers = [];
            infos = [];
        }
    }

    // clear infos function
    function clearInfos() {
        if (infos) {
            for (i in infos) {
                if (infos[i].getMap()) {
                    infos[i].close();
                }
            }
        }
    }

    // find custom places function
    function findPlaces() {
        var cur_location = myLatLng;
        // prepare request to Places
        var request = {
            location: cur_location,
            radius: radius,
            type: [type],
            keyword: [keyword]
        };
        // send request
        service = new google.maps.places.PlacesService(map);
        service.search(request, createMarkers);
    }

// create markers (from 'findPlaces' function)
function createMarkers(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        // if we have found something - clear map (overlays)
        //Eigene Winzer von der Datenbannk holen

        $.getJSON(urlInit, function(data){      
            $.each(data.winzer, function(restaurant, daten){
                var locationObject = new Object;
                locationObject.name = daten.name;
                locationObject.geometry = new Object;
                locationObject.geometry.location = new google.maps.LatLng(daten.latitude,daten.longitude);
                locationObject.vicinity = daten.ort;
                createMark(locationObject);
            }); 
        });

        // and create new markers by search result
        for (var i = 0; i < results.length; i++) {
            createMark(results[i]);
        }
    } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
        alert('Sorry, nothing is found');
    }
}

// creare single marker function
function createMark(obj) {

    // prepare new Marker object
    var mark = new google.maps.Marker({
        position: obj.geometry.location,
        map: map,
        title: obj.name,
        animation: google.maps.Animation.DROP
    });
    markers.push(mark);

    // prepare info window
    var infowindow = new google.maps.InfoWindow({
        content: '' + obj.name + 
        '
Rating: ' + obj.rating + '
Vicinity: ' + obj.vicinity + ''
    });


    // add event handler to current marker
    google.maps.event.addListener(mark, 'click', function() {
        clearInfos();
        infowindow.open(map,mark);
    });
    infos.push(infowindow);
}