Integrate Google Map with PhoneGap | Apache Cordova

integrate-google-map-with-phonegap
integrate-google-map-with-phonegap

In this tutorial, I’m going to explain how to Integrate Google Map with Phonegap / Apache Cordova based Projects.

Step by Step Guide:

1. Create Cordova Project:

cordova create GMapExample com.phonegappro.gmapexample GMapExample

2. Change Working Directory

cd GMapExample

3. Add Platform

cordova platform add android
cordova platform add ios

4. Add Plugin https://github.com/apache/cordova-plugin-geolocation

cordova plugin add cordova-plugin-geolocation

5. Add Google Map JavaScript Library with your index.html

<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>

6. Get User’s location using Geolocation plugin


navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000 });
function onSuccess(position) {
 var lat=position.coords.latitude;
 var lang=position.coords.longitude;
}
function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } 

Integrate Google Map with PhoneGap Full Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geo Location</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="cordova.js"></script>
<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000 });
function onSuccess(position) {
var lat=position.coords.latitude;
var lang=position.coords.longitude;

//Google Maps
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {zoom: 4,center: myLatlng}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({position: myLatlng,map: map});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
google.maps.event.addDomListener(window, 'load', onSuccess);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

7) Build your project & Run it

cordova build android

Screenshot

phonegap-google-maps-example
phonegap-google-maps-example

Not Working ?

  • Check your Internet connection
  • Make sure, you’ve enabled “Location Option” under your Phone Settings
  • Was this Helpful ?
  • Yes   No
  • mate where is your index.js file

    • You don’t require that, becoz, I wrote all code inside tag with same page

      • but dont you think the navigator object is valid only after the onDeviceready is triggered?

        • you can write every code inside deviceready event

  • Rafael

    Help!! Code:2 – Message: Application does not have sufficient geolocation permissions

    • You must enable Location setting

      • Rafael

        And how could I do this directly by example? When you open the app, it requests the appropriate permissions? Can you help me? I made a number of examples, but all do not work when I use the command “build cordova android”

        • You can check permission, please refer geolocation documentation

  • Francisco

    i need help!!! im using phonegap build to create a project which implements google maps, ive created a new project and then added to the config.xml the geolocation plugin but when i build and run the app i can only see a white screen with 2 buttons at the top which say Map and Satelite, but none map is displayed , ive run your app and it works perfect! but i dont lnow what am i doing wrong, could you please tell if theres a diference when using phongap build that could affect?

    • Dear @disqus_3pxAz3MIJ5:disqus , You need to work with whitelist plugin

  • Couleurs Afrik Marcello

    Hi, i need help , i try it but i have some error, code error :3 and the map don’t show, but in the web navigator i have this error: TypeError: position.coords is undefined in the console

    • Please check,
      1) Network connection
      2) Enable Location

      • Couleurs Afrik Marcello

        thanks for your reply, i check enable location is on,now i don’t have any error but the map don’t show

  • lapisan langit

    wow working perfectly… i have tried using mapsplugin but had blank maps…your tutorial is great

  • Анатолій Ольшевський

    Thanks, you code really works! But I would like to know why my link doesn’t work so well.
    Link
    In browser it works fine.

    • You may want to load maps after device ready

  • Okechukwu John

    Pls. I also need help. I used phonegap desktop to create app. At first I was receiving geolocation coords, but that later stopped. I then changed to html5 geolocation and that too stopped. As it stands now testing your code, I am only seeing white screen. I put my phone location on, used wifi and direct sim data connectivity without success. Even when I tried it on android virtual device it was showing the same white screen. I count on your prompt help. Thanks.

    • 1) Download my example & Try on your system.
      2) Be aware of whitelist plugin

  • Walter Wong

    Q1) May I know if this plugin allows creating a direction between 2 input locations and multiple markers on the native Google map?
    Q2) Is there any Google API service billing issue involved?