integrate-google-map-with-phonegap

Integrate Google Map with PhoneGap | Apache Cordova

Want create site? Find Free WordPress Themes and plugins.
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
Did you find apk for android? You can find new Free Android Games and apps.
  • 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?

  • Cherry

    Code: 3
    Message: Timeout expired

    What this means?

    • Have you enabled Location in your mobile ? If yes, you can recreate from step 1

  • tperrelli

    Hello! First of all, congratulations for the post. In this case, how do you set Google API restrictions, considering that you are running on device? You should put http or ip restrictions, but in this case, mobile device wouldn’t run. Do you leave it without any restrictions? Thanks in advance!

MyMail WordPress Plugin free
Save $50 USD on Ionic Firebase Chat Source CodeEXPLORE