Integrating
Google maps API v3 with
PhoneGap(Cordova)
How
to show a Google map in your Phonegap app using Google Map api V3,
and what whitelist urls to add to your project. This blog expect you
know how to set up a new Phonegap project.
About
the PhoneGap:
PhoneGap
is an open source framework for quickly building cross-platform
mobile apps using HTML5, Javascript and CSS.
Building
applications for each device–iPhone,
Android, Windows Mobile and more–requires
different frameworks and languages. PhoneGap solves this by using
standards-based web technologies to bridge web applications and
mobile devices.
Google
Maps Android API v3:
Before
planning your migration, you should take time to understand the
differences between the Google Maps JavaScript API v2 and the Google
Maps JavaScript API v3. The newest version of the Google Maps
JavaScript API has been written from the ground up, with a focus on
modern JavaScript programming techniques, increased use of libraries,
and a simplified API. Many new features have been added to the API,
and several familiar features have been changed or even removed.
API
(Application programming interface)
An
API is a specification used by software components to communicate
with each other.
An
API may describe the ways in which a particular task is performed.
Obtaining
an API Key:
Before
you start, you will need a specific API key from Google.The key is
free, and are required to complete this process.
Steps
to create your API key:
2.
Click
the Services
link
from the left-hand menu.
3.
Activate
the Google
Maps API v3 service.
4.
Click
the API
Access link
from the left-hand menu. Your API key is available from the API
access page,
in the Simple API Access section. Maps API applications use the
Key for browser apps.
Set-up
:
Well
assuming that you have downloaded PhoneGap, kindly replace your
index.html with existing code for android into your eclipse. Your
index.html file for android should be placed in a path which looks
something like this:
assets-www\index.html
Well,
once having replaced, never bother about the source folder.
Working
with google map V3:
You
may wish to load the Maps API JavaScript code after your page has
finished loading, or on demand. To do so, you can inject your own
<script> tag in response to a window.onload event or a function
call, but you need to additionally instruct the Maps JavaScript API
bootstrap to delay execution of your application code until the Maps
JavaScript API code is fully loaded. You may do so using the callback
parameter, which takes as an argument the function to execute upon
completing loading the API.
The
following code instructs the application to load the Maps API after
the page has fully loaded (using window.onload) and write the Maps
JavaScript API into a <script> tag within the page.
Additionally, we instruct the API to only execute the initialize()
function after the API has fully loaded by passing
callback=initialize to the Maps API bootstrap:
Loading
the Google Maps API:
The
URL contained in the script tag is the location of a JavaScript file
that loads all of the symbols and definitions you need for using the
Google Maps API. This script tag is required.
The
key parameter contains your application's API key.
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/jskey=Your_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
Map
Options:
To
initialize a Map, we first create a Map options object to contain map
initialization variables. This object is not constructed; instead it
is created as an object literal. There are two required options for
every map: center and zoom.
var
map;
function
initialize() {
var
mapOptions = {
zoom:
8,
center:
new
google.maps.LatLng(-34.397, 150.644),
};
The
Map Object:
The
JavaScript class that represents a map is the Map class. Objects of
this class define a single map on a page. (You may create more than
one instance of this class - each object will define a separate map
on the page.) We create a new instance of this class using the
JavaScript new operator.
When
you create a new map instance, you specify a <div> HTML element
in the page as a container for the map. HTML nodes are children of
the JavaScript document object, and we obtain a reference to this
element via the document.getElementById() method.
map
= new
google.maps.Map(document.getElementById('map-canvas'),mapOptions);
Latitudes
and Longitudes:
Because
we want to center the map on a specific point, we create a LatLng
object to hold this location by passing the location's coordinates in
the order { latitude, longitude }
center:
new
google.maps.LatLng(-34.397, 150.644),
Loading
the Map:
While
an HTML page renders, the document object model (DOM) is built out,
and any external images and scripts are received and incorporated
into the document object. To ensure that our map is placed on the
page after the page has fully loaded, we only execute the function
which constructs the Map object once the <body> element of the
HTML page receives an onload event. Doing so avoids unpredictable
behavior and gives us more control on how and when the map is drawn.
google.maps.event.addDomListener(window,
'load',
initialize);
Note
that, in order for your Activity to access the Internet and load web
pages in a WebView, you must add the INTERNET permissions to your
Android Manifest file:
<uses-permission
android:name="android.permission.INTERNET"
/>
Gratitude..........!!!!!!!
