iPhone & Google maps

pupx

Hi

I try to write a sample application (found tutorial in a magazine) with jo and phonegap.

When I click on the first menu item (track) the google map won't load?

I uploaded the files here: http://goo.gl/03dfL

I attached the main.js file.

I'd appreciate any help.

Thank you

dave

Possibly missing google developer auth codes or something? I haven't played with the google map api in like, oh, ages (c'mon, I worked in the Yahoo! Maps team for a couple years). :)

disjfa

I don`t know if this helpes. But the joContainer and the divs you use inside kind of create an empty element so the googlemaps wont show. So you just have to work arount that.

Made a kitchensink file without the phonegap js, but working in a browser so you should get around what you want.

include these in the <head>
<script src="http://www.google.com/jsapi"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

(if you use the kitchensink demo include this in menu.js)
{ title: "Googlemap test", id: "googlemap" }

And include the attached file in js folder and include in the index.html (attached file doesn`t work)

googlemap.js:

joCache.set("googlemap", function() {
    var mapCard, joMap, map;
    
    map = joDOM.create("div", {id:"map", width:"100%", height:"100%"});
 mapCard = new joContainer(map);
 mapCard.setStyle({position: "absolute", top:"0", left:"0", bottom: "0", right: "0"});
   
    mapCard.activate = function() {
        if(!mapCard.mapActivated) {
            if(google.loader.ClientLocation) {
                var latt = google.loader.ClientLocation.latitude;
                var longg = google.loader.ClientLocation.longitude;
                var latlng = new google.maps.LatLng(latt, longg);
            } else {
                var latlng = new google.maps.LatLng(-34.397, 150.644);
            }
            var myOptions = {
                zoom: 14,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(map, myOptions);
            mapCard.mapActivated = true;
        }
    }
    
    mapCard.setTitle("Googlmap");
    
    return mapCard;
});

jpsheridan

Hello,

Yes I'm a few months but what the heck...

I ran this in the kitchen sink app. The maps load fine.

Any idea why I can't drag the map around? I'm testing this in Chrome by the way, though I also ran it over the network on my iPhone. Neither let me drag the map.

I'm getting the following error in the console:

"Uncaught TypeError: Object [object Object] has no method 'item'"

Cheers,

JP

jpsheridan

So first the map doesn't seem to work if you put it inside a joCard, and then load that into a joStack. It works directly being pushed onto the stack and displays fine.

Second the error I was getting in chrome and the inability to drag the map was due to a bug in the Ripple emulator which doesn't seem to be fixed in the new version either - v0.94 I think. Turn the emulator off or run in the phone and it works fine.

Btw I highly recommend using the Ripple emulator if you're doing Jo Dev, or any mobile Dev for that matter! There's a standalone and it works as a chrome extension as well.

John Paul

jpsheridan

Hello all,

Just to give an update. The map displays if I set a specific width and height on the div container. I can then place the map div in a joCard and it renders correctly.

//width:"100%", height:"100%" didn't work

mapBox = joDOM.create("div", { id:"map", width:"320px", height:"432px"});

mapCard = new joCard(mapBox).setTitle("Agents");

I've no idea how to put in a code block in a post here so that'll have to do ;)

Anyway maybe I could have explicitly stated the width and height of the joCard or wrapped mapBox in another div with a set width/height (in which case I would set width/height on mapBox) and perhaps that would work also.

Thanks,

JP

Howdy, Stranger!

Categories

In this Discussion