View
 

Integrating with Google Maps on the iPhone

Page history last edited by Amped 1 year, 11 months ago

This tutorial covers a way to open the "Maps" app from a PhoneGap app.

 

SOLUTION A:

Via John Boxall of Handi Mobility fame on the PhoneGap mailing list:

 

http://groups.google.com/group/phonegap/browse_thread/thread/8ea8042cb18defd8/090d328f4f8a6685?lnk=gst&q=google+map#090d328f4f8a6685%20http://discussions.apple.com/thread.jspa?messageID=8025518

Essentially to get maps to work you'll need to make two changes.

First in the phone gap code, look for where the gap syntax string splitter is defined. Change it from ":" to "::" so that it doesn't split URLs (http *:* // www ...)

Second inside gap.js change all the gap strings to "::". Now you should be ready to go.

To open a map, gap uses the protocol "gap::openmap::q=<link to a googmaps url or kml file>"

Note this is different than in the native web version ... so you'll want to add some code to change your links depending on whether ppl are coming through gap or Safari.

   if (typeof(Device) != "undefined") {

       MAP = "gap::openmap::q=";

   } else {

       MAP = "maps:q=";

   }

 

 

SOLUTION B: WITHOUT MODIFYING SW

looking at last release has been developed a call openmap

so to open native google maps on iphone the easy command is

<a href="/ja vascript:Device.exec("openmap:q=roma');">Roma</a>

To solve the problem here underlined ":" my solution is to encode 2 times the ":". So the link is:

<a href="/ja vascript:Device.exec("openmap:q=http%253A//code.google.com/apis/kml/documentation/KML_Samples.kml');">google</a>

 

in fact ":" is equal to %3A   and "%" is equal to %25  so substituing ":" with "%253A" you obtain the requested results

 

the space between ja & vascript is only for the edit module of this wiki. The space mustn't be considered!!!

 

 

Note: You can't test this with the iPhone Simulator, because it doesn't have the "Maps" app.