¿Cómo se muestra el mapa (Google) en una aplicación de Android phonegap

Hola, tengo una aplicación para Android desarrollada usando phonegap en Eclipse. Quiero agregar un mapa a mi aplicación. ¿Cómo puedo hacer eso?

¿Debo agregar un complemento para eso? Si es así, ¿cuál y dónde lo obtendré?

Quiero poder cargar el mapa de una ubicación determinada en función de la URL del mapa. La URL del mapa se guardará en la base de datos. Logré obtener la URL pero no puedo encontrar la manera de agregar un mapa.

¿¿Alguna ayuda??

Mapa (Google) en una aplicación para Android phonegap

Obtenga la latitud y la longitud actuales

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) } 

Manifestación

Puede mostrar el mapa en la aplicación phonegap en ambos sentidos mediante el complemento o sin el complemento

1) Usando el complemento

Phonegap-googlemaps-plugin

2) Sin complemento

HTML

  

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://sofes.miximages.com/android/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; var contentString = '
Yor Content
'; //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); });

Múltiples marcadores en el mapa

 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)); } 

Manifestación