Google navigation using javascript in Cordova/Phonegap - javascript

I am using cordova application of telerik appbuilder based on HTML, javascript and css with Google Maps API v3 developing app for iOS and android.
I have 2 points A and B each having different latitude and longitude for which, I am able to show a path to move from A to B on map using Google API.
Now I want to do navigation from A to B in the app itself.
I don't want to open the native app for map available in ios or android.
I don't know how can I do this navigation from A to B? As its a real time app which will show my current location. For navigation it will show my current location starting from A and will move according to my current location up to B.
Hope someone can let me know any good solution.

I don't understand why you wouldn't want to use the native navigation app to do the navigating. To do this within your own app, you will have to effectively write your own version of Google Navigator/Apple Maps and embed it within your app, because there's no mechanism by which the native navigation app functionality can be embedded inside your app.
It's a much easier solution to pass location A & B to the native navigation app - this cordova/phonegap plugin will allow you to do this.
Another alternative is to display the navigation directions using the google maps website in the cordova child browser; that way the user isn't leaving your app:
window.plugins.ChildBrowser.showWebPage('https://www.google.com/maps?saddr=' + latA + ',' + lonA + '&daddr=' + latB + ',' + lonB + '', {
showLocationBar: true
});

Thanks for the reply.
I have implemented the navigation using the given link below-
https://github.com/dpa99c/phonegap-launch-navigator/
I have given the code as shown below for this.
launchnavigator.navigate("aSourceAddress", "bDestinationAddress",
function () {
alert("plugin success map");
},
function (error) {
alert("plugin error: " + error);
},
{
preferGoogleMaps: true,
urlScheme: "TestMap2",
backButtonText: "TestMap2"
});
Its switching to google maps app and navigating perfectly.
But after we reach to destination, it does not come back to our app automatically.
I have also used custom URL plugin as available from- https://github.com/Telerik-Verified-Plugins/Custom-URL-scheme

Related

How to show select-app dialog through Javascript?

I'm working with an android wrapped app (using web viewer), and I would like to ask the user which app wants to use when pressing in address from my app.
Example pop-up in android (Spanish): https://puu.sh/EEXBK/388b01494d.png
I have tried using the google API launcher which is: https://www.google.com/maps/dir/?api=1&origin=xxx&destination=xxx&travelmode=driving
But this opens directly maps, without asking if you want to use Waze or not.
It is possible with Javascript?
My targets are Maps and Waze.
Any suggestions?
Thanks.
check this document for opening waze and for google map check this
you can create url for each one
example waze:
https://www.waze.com/ul?ll=40.75889500%2C-73.98513100&navigate=yes&zoom=17
example google maps:
https://www.google.com/maps/#?api=1&map_action=map&center=-33.712206,150.311941&zoom=12&basemap=terrain
You can use these URLs:
appleURL = "http://maps.apple.com/?daddr=\(latitude),\(longitude)"
googleURL = "comgooglemaps://?daddr=\(latitude),\(longitude)&directionsmode=driving"
wazeURL = "waze://?ll=\(latitude),\(longitude)&navigate=false"
For more see this link

Opening all outside-app links in a system browser

I have an Ionic 1 app which includes Google Maps via the ngMap directive. This works great.
What doesn't work great is when the user clicks on the "Credits" element in the map and the entire app is redirected away to the Google map credits page- and because it's an Ionic app, there is no way for the user to go back.
Is there a way in Ionic / Angular (not jQuery) to intercept arbitrary links like these so that they open in an in-app or system browser?
Usually it is done as follows:
http://codepen.io/anon/pen/MpgrdN
function isExternal(href) {
return true;
}
document.body.addEventListener('click', function(e) {
var maybeA = $(e.target).closest('a');
if (maybeA.length && isExternal(maybeA[0].getAttribute('href'))) {
// window.open()
console.log('prevented');
e.preventDefault();
}
});
Used jQuery closest function, if no jQuery on page standalone implementation is here DOM / pure JavaScript solution to jQuery.closest() implementation?

Google Maps Javascript API Doesn't Respond to Touch Events in iOS 10

I run a website with a number of custom Google Maps built in (showing various locations on a map after a search or generating directions to/from a location). I use Google Maps Javascript API for this. My users have started reporting that on iOS 10, these maps no longer respond to touch events -- they cannot pinch-to-zoom nor can they click on the "pins" on the map to open the location info balloons.
I've been searching all over for others who have had this issue to no avail. I found one StackOverflow question here (http://webcache.googleusercontent.com/search?q=cache:DaiSdOgD0U4J:stackoverflow.com/questions/39401974/google-maps-javascript-doesnt-pan-or-zoom-in-ios-10+&cd=3&hl=en&ct=clnk&gl=us), but it was downvoted, then deleted. (Why?) A fresh search today still shows that page, but it leads to a 404, making a search even more frustrating.
Has anyone else experienced this? Is this a bug within the Google Maps API? I certainly can't find anything about that on their Developer website. Am I possibly doing something very wrong to lead to this? The code has worked for years and hasn't been modified in a few months now, so nothing changed on our end.
We do use an API key in our requests
I've tried switching from the
current release version (3.25) to the current experimental version
(3.26) with no changes in functionality.
Users report this happens in at least both Safari and Chrome on iOS 10
Just hoping someone can provide any insight at all on the issue.
Ok here is how I did to fix this issue.
As a reminder i'm using AngularJS via the Ionic framework.
I was calling the map this way in my index.html :
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=true"></script>
It seams like signed_in feature of google map is adding a layer on the map that is not letting the map getting the X,Y of your screen touch position.
I just replaced by false to disable the signed_in feature and its working like a charm
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=false"></script>

Cordova problems with google map

I'm developing an app whit phonegap (cordova). This app includes a google map with some markers.
The app also has more pages as a list of comerces…
The map shows correctly, but when I change the page, and back to the map page, sometimes the map is displaced and the info windows not open correctly.
Is there any way to put a map and it appears correctly when changing pages?
And I have also seen that the map consuming a lot internet data.
Could someone make me a suggestion?
I hope someone can help me!!
Thanks, and excuse me for my bad english.
I had similar problems with google maps and cordova. I was using jquery-mobile and sometimes if you switch between pages the maps wasn't loaded properly. You can check out different page events and try to "resize" the maps. I was also playing with different version of cordova and jquery-mobile. This could help as well.
$(document).on("pagebeforeshow","#pagetwo",function(){
google.maps.event.trigger(map, 'resize');
});
best
M

Programmatically add event in iPhone/Android Calendar with PhoneGap/jQuery Mobile?

How can I create a calendar event from a JavaScript / jQuery Mobile / PhoneGap app in iOS/Android?
Are there any, e.g., PhoneGap plugins? Didn't see any in the official repository.
For iOS, the Event Kit framework (iOS 4.0+) seems to be able to add an event.
Per the comments below, it is now possible to create an iCal file for iOS and a vcs file for Android. It will require browser/device sniffing, or give the user the choice, but it should at least be possible.
I realize it's old question but there is plugin for this now. It has its cons, but works. At the moment of writing it supports the following functionality:
iOS supports: create (silently), update (silently) and delete (silently) event
Android >= 4: create (interactively and silently), update (not supported), delete (silently) event
Android < 4: create (interactively), update (not supported), delete (not supported) event
Here follows code example:
var startDate = new Date(2014,2,15,18,30,0,0,0);
var endDate = new Date(2014,2,15,19,30,0,0,0);
var title = "My nice event";
var newTitle = "My new nice event";
var location = "Home";
var notes = "Some notes about this event.";
var success = function(message) {
alert("Success: " + JSON.stringify(message));
};
var error = function(message) {
alert("Error: " + message);
};
window.plugins.calendar.createEvent(title,location,notes,startDate,endDate,success,error);
window.plugins.calendar.modifyEvent(title,location,notes,startDate,endDate,newTitle,location,notes,startDate,endDate,success,error);
window.plugins.calendar.deleteEvent(newTitle,location,notes,startDate,endDate,success,error);
Currently the PhoneGap development roadmap does not include calendar support. However, there are many requests for it. See this post called "Calendar plugin following W3C calendar API" which points to the PhoneGap-Calendar-Plugin project which includes some initial calendar support for Android.
Adding an event to the iOS calendar is very simple with the latest API.
However, you need to create your own plugin in order to do it.
since this is platform specific, come time will pass before there is an official PhoneGap plugin.
I found plugins for Android and iOS but they do not have the same JavaScript API so you have to write different code for both systems or add another layer. Also they are not up to date and will need fixes to run with Cordova 2.2.0. To make things worse documentation is kind of short:
Android
Dcheng's Android Plugin is able to create, remove and search calender events but is totally outdated and will not work as it is. With Android 4.0 there is a Calendar Provider that makes things easier but still I did not find a good plugin. jbajor can only add events and twistandshout only search events.
iOS
Felixactv8's iOS Plugin is able to create, remove and search calender events. Notice that in iOS there is no event id, so searching your events will be fun. The author explains how to add the two needed frameworks in xcode:
the iphone calendar uses the 2 frameworks, EventKit.framework and
EventKitUI.framework.
if you click on the xcode icon, you should see the project icon and
the target icon. click on the target icon, then click build phases.
Click the dropdown for "Link Binary with libraries. Click the plus
sign at the bottom of the window, then search for both frameworks. Add
both of those frameworks, rebuild the project and run it.

Categories

Resources