O'Reilly logo

PhoneGap 3 Beginner's Guide by Giorgio Natili

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – showing device position with Google Maps

Get ready to add a map renderer to the PhoneGap default app template. Refer to the following steps:

  1. Open the command-line tool and create a new PhoneGap project named MapSample.
    $ cordova create ~/the/path/to/your/source/mapmample com.gnstudio.pg.MapSample MapSample
    
  2. Add the Geolocation API plugin using the command line.
    $ cordova plugins add https: //git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git 
    
  3. Go to the www folder, open the index.html file, and add a div element with the id value #map inside the main div of the app below the #deviceready one.
    <div id='map'></div> 
  4. Add a new script tag to include the Google Maps JavaScript library.
    <script type="text/javascript" src="https: //maps.googleapis.com/maps/api/js?key= ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required