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

Question

Hi I have a android application developed using phonegap in Eclipse. I want to add a map to my application. How do I do that?

Do I need to add a plugin for that? If yes then which one and where will I get that?

I want to be able to load map for a particular location based on the map url. The map URL wil be saved in the DB. I have managed to get the URL but cannot figure out how to add a map.

Any help??

Answer 1

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