I'm creating a mobile app for a medical clinic that has 4 offices/buildings. I'd like to create a Google map that marks all 4 locations, and gives the user option to get directions to each location.
I'm building this app in Phonegap and Jquery mobile. The closest thing I have found so far is this: Direction example .
I would also like the "from" field default to user's location if GPS is enabled or using geolocation.
What are the common practices to do this (from usability point of view)? And do you know any resources I can refer to?
For using gps in your project you can use the code below
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
// Did we get the position correctly?
// alert (position.coords.latitude);
// To see everything available in the position.coords array:
// for (key in position.coords) {alert(key)}
mapServiceProvider(position.coords.latitude,position.coords.longitude);
},
// next function is the error callback
function (error)
{
switch(error.code)
{
case error.TIMEOUT:
alert ('Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert ('Position unavailable');
break;
case error.PERMISSION_DENIED:
alert ('Permission denied');
break;
case error.UNKNOWN_ERROR:
alert ('Unknown error');
break;
}
});
}
Which can be found here or the phonegap docs
When you have the location you can change the value of
your form. Then there is the question of using a plugin
of google maps or not. Personally i didn't use any. Since
you are using jquery mobile you can use this .
Create the map in the init event (so you create only once) and
trigger the resize event in the pageshow event so you will not have problems
with the map appearing on the upper left corner of your screen etc.
If you use the plugin I mentioned, look for the refresh method.
The container of the map must have a size. If it doesn't it
will not show properly because jqm will give the minimum size
to the container. You can do it programmatically (check for
window height and width) and calculating the space (if there is
a header you have to include it in the calculation).
Finally if you are having problems with zoom look at this
Check out this post about Google Maps inside jQuery Mobile. I think this solves your issue.
Related
I'm writing a cross-platform mobile app with Titanium (v5.0.4, sdk 5.1.2GA). The app displays a map with markers for points of interest close to current location. If the user moves the map to a new region, all previously displayed markers are removed and a new set of markers is calculated and displayed, according to the new location. The user can click on a marker, and have an infoWindow appear. Clicking the infoWindow opens a new window for further informations.
This works fine on IOS (with MapKit). However, on Android (with Google Maps), clicking on a marker displays the infoWindow, but also centers the map on the marker, which triggers 'regionchanged' event, which causes my app to remove markers and display a new set. Basically, the user can never click the infoWindow nor reach the new window for further informations.
What I'd like to do: prevent Google Maps from auto panning to a marker when clicking on it.
Alternatively, is there a way to make a distinction between a 'regionchanged' event fired after clicking a marker, and a 'regionchanged' event triggered by the user moving the map? This would allow me to react only on the latter.
I've found this (Impossible to prevent auto panning to a marker when clicking on it (google maps)) but this is ruby on rails. Something else I came accross (can't find back the link, though) involved overloading the 'click' event handler or using the disableAutoPan infoWindow option (Google Maps: How to prevent InfoWindow from shifting the map), but this were all for the Javascript API.
So, has someone any idea?
I recently had the same problem. Although it's been a long time since you asked the question, I think the solution is worth noting here.
Make the map view respond to both click and regionchanged events
<View id="mapView"
module="ti.map"
onClick="click"
onRegionchanged="regionChanged"
method="createView">
</View>
Use a flag variable that both event listeners have access to.
var clicked = 0;
click event sets the variable.
var click = function(e) {
clicked = 1;
...
}
Wrap the functionality of regionchanged event with _.defer(...).
var regionChanged = function(e) {
_.defer(function(){
... (regionchanged code goes here)
});
}
regionchanged code should not execute if the variable is set.
var regionChanged = function(e) {
_.defer(function(){
if (clicked == 0) {
... (regionchanged code goes here)
}
});
}
Unset the variable at the end of the regionchanged code.
var regionChanged = function(e) {
_.defer(function(){
if (clicked == 0) {
... (regionchanged code goes here)
}
clicked = 0;
});
}
Here defer somehow makes sure when both events are fired (it seems to) regionchanged event comes after the click event. I think that may not always be the case but my tests didn't fail me yet.
And I know I could use boolean for clicked :)
I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:
$("#page3").on("pagecreate", function(e) {});
It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...
jQuery Mobile 1.4.0
You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.
The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.
$(document).on("pagecontainerbeforeshow", function (e, ui) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if(activePage == "page3") {
doSomething();
}
});
Demo
I am using HERE Maps to show a map letting users choose a location of interest. It works fine on desktop, but on mobile devices I am experiencing some problems.
On Android devices, if I create a map using
var map = new nokia.maps.map.Display(document.getElementById("map"), {
// Initial center and zoom level of the map
center: startCoordinate,
zoomLevel: 5,
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.ScaleBar()
]
}
);
the browser freezes after a few seconds. You can test this at karmap.com; try to scroll down to the very bottom to find the map. If I remove the code shown above the browser won't freeze anymore (but I won't get the map, of course).
Another problem occurs, when loading the page on iOS devices; in the form at the bottom you can find an input box named "Place of Birth". After typing 3 letters or more I start an ajax request to find suitable city names. This doesn't work if I use the following code (right under the code snippet to create the map):
map.removeComponent(map.getComponentById("zoom.MouseWheel"));
map.set("baseMapType", map.SATELLITE); // Activates satellite imagery on the display
If I comment that code out, the ajax calls work fine.
For me, that is some strange side effect! Does anyone have a clue what is going on?
Thanks for any help or advice!
I have a titanium app where I load a web view. In this web view I load a html5 with a chart.
I want to show a vertical line and get some information about the position of the line. This line will be controlled by a slider in Titanium App, so the line would change its position very fast and very often.
You can see something similar here: graph
In html file, I write the graph and I add a listener for an event. When the event is fired, it draw a line in some position with this code:
function updateVerticalLine(posX) {
drawSeries(c);
c.strokeStyle = '#000000';
c.beginPath();
c.moveTo(getXPixel(posX), graph.height() - yPadding);
c.lineTo(getXPixel(posX), 0);
c.stroke();
}
In Titanium app, I only fire the event when I receive the change slider event and I pass the new position of the line:
slider.addEventListener('change', function(e) {
Ti.App.fireEvent('sliderhtml5line:change', {
value : e.value
});
});
It works ok on ios, but on Android, it is very slow and events are disorganized.
Do you know how I can solve it? Is there any better option for this?
Thanks!!
it should be done the otherway.
when the user changes the slider, you should call the method in the HTML page using the evaljs function to update the user interface directly
I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.
I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.