Jquery mobile and Google maps [on hold]
- by Jack
I have been trying to get my google maps to display within a page of a mobile app. The map will display for a second, and then disappear. I have read about a jquery bug, but i can't seem to find a way to get this code to work. any help would be greatly appreciated.
<script>
var geocoder;
var currentLocation;
var searchResults;
var map;
var directionsDisplay;
var directionsService;
function init(){
geocoder = new google.maps.Geocoder();
if (navigator.geolocation){
navigator.geolocation.watchPosition(showLocation, locationError);
}
else {
alert("Geolocation not supported on this device");
return;
}
}//init function
function showLocation(location){//start showlocation
currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
$('#lat').attr("value", currentLocation.lat());
$('#lng').attr("value", currentLocation.lng());
geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': currentLocation}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
if (results[0]){
var address = results[0].formatted_address;
$('#loc').html(results[0].formatted_address);
var info = "Latitude: " + location.coords.latitude + " Longitude: " + location.coords.longitude + "<br />";
info += "Location accurate within " + location.coords.accuracy + " meters <br /> Last Update: " + new Date(location.timestamp).toLocaleString();
$('#acc').html(info);
$('#address').attr("value", results[0].formatted_address);
}else{
alert('No results found');
}//end else
//if(!map) initMap();
}else {
$('#loc').html('Geocoder failed due to: ' + status);
}//end else
});//end of function
if (!map) initMap();
}//end showlocation function
function locationError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("Geolocation access denied or disabled. To enable geolocation on your iPhone, go to Settings > General> Location Services");
break;
case error.POSITION_UNAVAILABLE:
alert("Current location not available");
break;
case error.TIMEOUT:
alert("Timeout");
break;
default:
alert("unkown error");
break;
}//endswitch
}//endlocationerror
function initMap(){
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: currentLocation
};//var mapOptions
map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);
google.maps.event.trigger(map, 'resize');
var bounds = new google.maps.LatLngBounds();
bounds.extend(currentLocation);
map.fitBounds(bounds);
//new code
//var center;
//function calculateCenter(){
//center = map.getCenter();
//}
//google.maps.even.addDomListener(map, 'idle', function(){
//calculateCenter();
//});
//google.maps.even.addListenerOnce(map, 'idle', function(){
//google.maps.even.trigger(map,'resize');
//});
//google.maps.event.addDomListener(window, 'resize', function() {
//map.setCenter(center);
//});//end new code
}//end initMap()
//-------------------------------------------------------------------------------
$(document).on("pageinit", init);
