How to Display Map (Google) on a Phonegap Android Application

how do you display map (Google) on a phonegap android application

Map (Google) on a phonegap android application

Get current Latitude and Longitude

navigator.geolocation.getCurrentPosition(onSuccess, onError);

function onSuccess(position) {
   var current_lat = position.coords.latitude;
   var current_lng = position.coords.longitude;

}

function onError(error)
{
   alert(error)    
}

Demo

You can show map in phonegap app both way using Plugin or without plugin

1) Using Plugin

Phonegap-googlemaps-plugin

2) Without Plugin

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

<div id="map_canvas" style="width:100%;height:100%; position:absolute;"></div> 

JAVASCRIPT

 var secheltLoc = new google.maps.LatLng(your_latitude, your_longitude);

 var myMapOptions = {
   zoom: 16
   ,center: secheltLoc
   ,mapTypeId: google.maps.MapTypeId.HYBRID
 };
 var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
 var image = "img/map_pin.png"
 var marker = new google.maps.Marker({
 map: theMap,
 draggable: false,
 position: new google.maps.LatLng(latitude, longitude),
 visible: true,
 icon: image,
 title:restaurantName // Title
});

 var myOptions = {
  content: ""
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, -110)
 ,pixelOffset: new google.maps.Size(140, 110)
 ,zIndex: null
 ,boxStyle: { 
  background: "url('tipbox.gif') no-repeat"
  ,opacity: 0.90
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };

 var contentString = '<div class="map_anotaion_title">Yor Content</div>'; //Address on pin click

var infowindow = new google.maps.InfoWindow({
  content: contentString
 });
 infowindow.open(theMap,marker); 
 google.maps.event.addListener(marker, "click", function (e) {
    infowindow.open(theMap,marker);     
 });

Multiple markers in map

var locations = new Array(3);

locations [0] = new Array(3);
locations[0][0] = "Bondi Beach";
locations[0][3] = 23.0300;
locations[0][4] = 72.4000;
locations[0][5] = 3;

locations [1] = new Array(3);
locations[1][0] = 'Coogee Beach'
locations[1][6] =  21.3600;
locations[1][7] = 71.1500;
locations[1][8] = 4;

locations [2] = new Array(3);
locations[2][0] = 'Cronulla Beach';
locations[2][9] = 22.3200;
locations[2][10] = 73.0000;
locations[2][11] = 73.0000;

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 6,
  center: new google.maps.LatLng(locations[0][12], locations[0][13]),
  mapTypeId: google.maps.MapTypeId.HYBRID
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][14], locations[i][15]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Demo

PhoneGap, Embedded Google map is not showing in Android Build

I have solved this problem.

All access like tags started to work when I have added this plugin to my confix.xml file:

<plugin name="com.indigoway.cordova.whitelist.whitelistplugin" source="pgb" />

Then I have uploaded my project to PhoneGap Build website and downloaded application worked.

Using Google Maps API with PhoneGap

The beauty of cordova is that you always have good plugins which are relatively simple to install and use.One of the plugins available for using google map in cordova apps is given below

https://github.com/mapsplugin/cordova-plugin-googlemaps

However you can also go ahead using the Google maps javascript API in cordova to build the navigation part of your application. I recently used this in my cordova app and it worked very well. I have used the features of Google maps like navigation, adding custom markers, place auto complete etc.

Open Google Maps with Phonegap 7.0.1

The pages you can load, scripts you can load, etc, are now controlled by CSP (Content Security Policy), rather than just the old WhiteList mechanism in the config.xml. So, if you want to access pages you have to setup your Content Security Policy appropriately. To use Google maps you at least need to add google.com to the default src, gstatic.com to data. These may not be enough, and if you they aren't probably the only option is looking at the errors in the developer console, see here how to get Chrome Developers console on Android, and here to see it on iOS. I always find a bunch of trial and error is required to CSP set just right.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' google.com data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' google.com; media-src *">

That said, you probably don't want Google Maps taking control of your application (or maybe you do?) so other recommendations to use the In App Browser plugin would recommended. It's only adding one plugin and using some javascript to open the window:

cordova.InAppBrowser.open('https://www.google.com/maps/dir/?api=1&origin=43.9815648,7.5328161&destination=41.802425,12.6021389', '_blank', 'location=yes');

Android Phonegap - How to Open Native Google Maps Application

Use the geo: type uri.

<a href="geo:38.897096,-77.036545">open map</a>

and the user will get the choice of opening any of the mapping applications installed on their device.

---

Related Topics