I'm new on phonegap and i want to use google maps plugin for phonegap. But when i use framework 7, the app load the map without problem but then it appear part of the last screen.
For Example:
When I open the app i'm in index.html, then when i click on map button of menu for 1 second i got the map without problem, but then part of the index.html shows with transparency above my map
map.html
<!-- We don't need a full layout in this file because this page will be parsed with Ajax. -->
<!-- Top Navbar-->
<div class="navbar ">
<div class="navbar-inner">
<div class="left">
</div>
<div class="center sliding">
</div>
<div class="right">
</div>
</div>
</div>
<div class="pages">
<div data-page="mapa" class="page hidden-navbar no-navbar no-toolbar">
<div class="page-content">
<div style="background-color: white">
<div style="width:100%;height:300px" id="map_canvas"></div>
<br><br><br><br><br><br>
<p class="button" id="boton_mapa">Cuadrar</p>
</div>
</div>
</div>
javascript:
var myApp = new Framework7({
swipePanel: 'left',
});
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});
// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
document.addEventListener("deviceready", onDeviceReady, false);
var map;
myApp.onPageInit('mapa', function (page) {
myApp.closePanel();
})
myApp.onPageAfterAnimation('mapa', function (page) {
var div = document.getElementById("map_canvas");
map = plugin.google.maps.Map.getMap(div);
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
})
function onMapReady() {
var button = document.getElementById("boton_mapa");
map.animateCamera({
target: {lat: -12.196486, lng: -77.002614},
zoom: 17,
tilt: 60,
bearing: 140,
});
button.addEventListener("click", onButtonClick);
}
function onButtonClick() {
// Move to the position with animation
map.animateCamera({
target: {lat: -12.196486, lng: -77.002614},
zoom: 17,
tilt: 60,
bearing: 140,
}, function() {
// Add a maker
map.addMarker({
position: {lat: -12.196486, lng: -77.002614},
title: "YY",
snippet: "Decripción Corta 1"
}, function(marker) {
// Show the info window
marker.showInfoWindow();
// Catch the click event
marker.on(plugin.google.maps.event.INFO_CLICK, function() {
// To do something...
alert("Hello world!");
});
});
map.addMarker({
position: {lat: -12.197486, lng: -77.003614},
title: "XX",
snippet: "Decripción Corta 2"
});
});
}
I'm using this documentation at most of code of the official site https://github.com/mapsplugin/cordova-plugin-googlemaps
index.html
mapa.html in that order ( sorry for big pictures )
Any idea would be great! thanks!
I personally gave the last pages some HTML IDs to hide them onMapReady and show them on page:beforeout
Related
I'm rather new to this and currently working on my first app (for a school project). I followed this https://www.w3.org/TR/geolocation-API/ tutorial. When I open the project in the browser (on a pc) it gives the coordinates but once installed (though phonegap) on my phone nothing seems to happen. Also the implementation with google maps does not seem to work (also not on the pc). Can any of you help me or redirect me to easy to follow guids?
These are the sources I looked at as well:
https://demos.jquerymobile.com/1.4.5/map-geolocation/
https://www.w3.org/TR/geolocation-API/
https://forum.jquery.com/topic/jquery-mobile-activating-geolocation-on-mobile-devices
https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api
https://cordova.apache.org/docs/en/3.0.0/cordova/geolocation/geolocation.getCurrentPosition.html
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}
</script>
<html>
<head>
...
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
<script>
</head>
<body>
...
...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=******(Your API Key)">
</script>
</body>
<html>
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
The application runs fine on first launch, I can switch views and display ng-dialogues(i am using named ui-views),
After one or two suspensions or re-launches it still respond fine, and I can still scroll and type in inputs.
But it refuses to switch to other view or display an ng-dialogue. This issues goes away after force stopping the app.
I have tried to switch launch mode in config.xml to singleInstance and singleTask with no success. The problem is also present in release build.
Is doubt that my code causing this because it runs once right? Any idea?
Here is a sample code for the angular route main controller and index.html.
route
(function() {
"use strict";
angular
.module("cvideo")
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home", {
url: "/",
views: {
nav: {
templateUrl: "app/components/navbar/navbar.html",
controller: "NavCtrl"
},
content: {
templateUrl: "app/main/main.html",
controller: "MainCtrl"
}
}
})
.state("jobs", {
url: "/jobs",
views: {
nav: {
templateUrl: "app/components/navbar/navbar.html",
controller: "NavCtrl"
},
content: {
templateUrl: "app/components/job/newJob.html",
controller: "JobCtrl"
}
}
});
$urlRouterProvider.otherwise("/");
}
})();
index.html
<body>
<div ui-view="nav"></div>
<div class="content" ui-view="content"></div>
</body>
MainCtrl
(function(){
"use strict";
angular.module("cvideo")
.controller("MainCtrl", function ($scope, ngDialog) {
$scope.jobs = [];
for (var i = 1; i < 10; i++) {
var job = {
title: "Job Offer " + Math.round(Math.random()*1000),
date: new Date(100*60 * 60 * 24 * 365*50*i),
description: "Job Offer "+i+" Description.",
qualification: "Job Offer " + i + " Required Qulifications.",
video: {
limit: i*10,
local: "",
web: ""
}
};
$scope.jobs.push(job);
}
$scope.preview = function (job) {
$scope.job = job;
ngDialog.open({
template: "app/components/job/job.html",
scope: $scope,
showClose:false
});
};
});
})();
main.html
<div class="jumbotron col-md-4" ng-repeat-start="job in jobs">
<div class="container">
<div class="row" ng-click="preview(job)">
<h3 ng-bind="job.title"></h3>
<label ng-bind="job.date|date:'Due MM/dd/yyyy'"></label>
<p ng-bind="job.description.length>100?job.description.substr(0,97)+'...':job.description"></p>
<div class="clearfix" ng-if="$index%3==2"></div>
</div>
</div>
</div>
<div ng-repeat-end=""></div>
I am creating a phonegap app. In my app I will have a not draggable Google Maps.
In the browser, mousemove event fire continuously while I move the mouse around over the map.
I expected the same behavior in my mobile phone, but the mousemove only fire once.
This is my main.js file
var app = new function () {
return {
initialize: function () {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(23.5403, -74.5463),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(map, 'mousemove', function (event) {
console.log('move');
});
google.maps.event.addDomListener(map, 'mousedown', function (event) {
console.log('down', event);
});
google.maps.event.addDomListener(map, 'mouseup', function (event) {
console.log('up', event);
});
}
}
};
google.maps.event.addDomListener(window, 'load', app.initialize);
This is my index.html file
<html>
<head>
<style>
#map-canvas {
width: 100%;
height: 400px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Could anyone take a look and help my get all the mousemove events? I tried touchmove but I could not make it work with Google Maps.
I manage to fire the event constantly adding the code
function move(event) {
console.log('touchmove', event);
event.preventDefault();
}
document.getElementById('map-canvas').addEventListener('touchmove', move, false);
I am developing an android application (build with Phonegap) that requires to display the current location of a user and to load KMZ file (with poly lines) on Google Map (use of google map api).
My application loads the map on a specific zoom level (11) and map is centered based on user's current location (reduce data consumption). I noticed that for android OS 4.2.2 the map is not loaded at all, message displayed " access denied to your current position".
On the other hand map is loaded correctly for android OS 4.1.2, 4.3, 4.4 (not get any message).
Is this a security issue/bug for android 4.2.2?
Or it is a bug related to the Phonegap I use to build the APK?
How can I resolve this issue? Is there any configuration I need to do in the mobile?
Thanks
It works fine on Android 4.2.2 or any other supported version. There might be a mistake in your code settings.
I just re-confirmed by creating a sample App.
Steps:
(1) Include Google API Key and Maps jS link in the html header section
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_VALUE_&sensor=true"></script>
<title>Hello World</title>
</head>
<body>
<b>Road View</b>
<div id="map-canvas" style="width: 100%; height: 200px"></div>
<b>Street View</b>
<div id="pano" style="width: 100%; height: 200px;"></div>
<b>Live Traffic Update View</b>
<div id="traffic" style="width: 100%; height: 200px;"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
(2) In the index.js file declare following function to render maps
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
app.renderMap();
},
receivedEvent: function(id) {
},
renderMap: function() {
// --- Road View
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway, zoom: 11
};
var map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions);
// ---- Street View
var panoramaOptions = {
position: fenway,
pov: { heading: 34, pitch: 10 }
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
// ---- Live Traffic View
var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('traffic'), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
};
app.initialize();
(3) Add permission in the AndroidManifest.xml file.
(4) Set your project API level to your desired version, for instance 4.2.2
(5) Run App on device and it should show three different types of Map Views ( Road, Street and Live Traffic)
This is the JS file code I use to load KML files on map, get current position, display marker:
'use strict';
angular.module('ehunter.controllers', []).
controller('RegionListCtrl', ['$scope', '$http', '$window',
function($scope, $http, $window) {
$http.get('regions.json').success(function(data) {
$scope.regions = data;
});
$scope.openBrowser = function(url){
$window.open(url, "_blank", "location=yes");
}
}])
.controller('RegionViewCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.region = angular.fromJson($routeParams.r);
var map;
var src = "MY_SERVER"+ $scope.region.File;
initialize();
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
}
getLocation();
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function displayPosition(position) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
marker.setVisible(true);
marker.setMap(map);
map.setCenter(marker.position);
});
}}
}])
I am trying to use the camera. I've searched for an example or a guide but I couldn't find anything.
What I want to do is to simply open the camera on the push of a button, get a picture, and display the image - all using ionic and angular.
Here is what i did
index.html:
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header contentPadding">
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="takePicture()">
{{text.buttonTitle}}
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
</ion-content>
The controller:
$scope.takePicture = function(){
var cameraOptions = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
};
var success = function(data){
$scope.$apply(function () {
/*
remember to set the image ng-src in $apply,
i tried to set it from outside and it doesn't work.
*/
$scope.cameraPic = "data:image/jpeg;base64," + data;
});
};
var failure = function(message){
alert('Failed because: ' + message);
};
//call the cordova camera plugin to open the device's camera
navigator.camera.getPicture( success , failure , cameraOptions );
};
Perhaps this can help you: Ionic Cordova Example
Immediately available for Phonegap Build!
Thank you #AMG for posting a link to the Ionic Camera example project. I analyzed it and found that we need to inject Camera into the controller, like so:
.controller('MyCtrl', function($scope, Camera) {
Note that there is not a dollar sign before Camera. This really should be documented more explicitly.
Also, you need to add this factory:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])