I have intent filter to intercept url's from Google maps.
My problem is: shortened link. If I don't know coordinates - links are useless. Unfortunately in Google maps for android links are shortened. In web user can choose type of Google maps link - short or not. In this case I have chance to use coordinates.
In short: If have link like this
http://maps.google.com/maps?q=45.089036,+-106.347656&num=1&t=h&vpsrc=0&ie=UTF8&z=4&iwloc=A
there is not problem to read coordinates. But if link is:
http://m.google.com/u/m/zIOcsV
ooops... Google have internal way to solve this link.
Does anybody found way to get coords from second link?
you can use this example of jquery mobile app using google maps geo coordinates:
jsfiddle-google-maps-geo-coordinates
or with custom images here: jsfiddle-google-map-with-images
the head is:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!--link rel="stylesheet" href="/Content/jquery-mobile-responsive.css" /-->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&language=en"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
$(Start);
function Start() {
$("#google_map .ui-collapsible-heading").click(function () {
var locations = [
['<br/>Main Office', 31.590496, 34.561981, 4],
['Sensor 16<br/>User Name: 16_DE-1R', 31.590595, 34.562980, 5],
['Sensor 17<br/>User Name: 17_TEN-2MP', 31.590694, 34.563979, 3],
['Sensor 18<br/>User Name: 18_TEN-2MP', 31.590793, 34.564978, 2],
];
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 17,
center: new google.maps.LatLng(31.590892, 34.561977),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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][3], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
});
}
</script>
and body:
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="a">
<a data-icon="back" href="#" rel="external">Back</a>
<h1>Sensor</h1>
</div>
<div data-role="content">
<div class="content-primary">
<h2>Sensor: 16</h2>
<div data-role="collapsible-set">
<div id="google_map" data-role='collapsible' data-collapsed=true data-theme="b" data-content-theme="d">
<h1>Sensor Map</h1>
<div id="googleMap" style="width:100%; height:300px;"></div>
</div>
</div>
<ul data-role="listview" data-inset="true" data-theme="b">
<li data-role="list-divider"></li>
<li>Configure Comm</li>
<li>Measurements</li>
<li>Users</li>
</ul>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More Options</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Actions</li>
<li>Add User</li>
<li>Edit Sensor</li>
<li>Delete Sensor</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-theme="a">
<h4>Mobile</h4>
</div>
Related
**hi, i was trying obtain data from a page but i don't know how to obtain this data: Chapter 120 and de url link
This is the code from page (i simplified it):
<div class="row">
<div class="col-12">
<div class="card chapters" id="chapters">
<ul class="list-group list-group-flush">
<li class="list-group-item p-0 bg-light upload-link" data-index="0">
<h4 class="px-2 py-3 m-0">
<div class="row">
<div class="col-10 text-truncate">
<a style="display: block;" class="btn-collapse" onclick="collapseChapter('collapsible490362')" role="button"> Capítulo 120.00</a>
</div>
</div>
</h4>
<div style="display: block;" id="collapsible490362">
<div class="card chapter-list-element">
<ul class="list-group list-group-flush chapter-list">
<li class="list-group-item">
<div class="row">
<div class="col-2 col-sm-1 text-right">
<a href="https://lectortmo.com/view_uploads/599487" class="btn btn-default btn-sm">
<span class="fas fa-play fa-2x" style="color:#2957ba"></span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
In this line we can see the text (Chapter 120) that i need show in TextView but i don't know how to obtain it
<a style="display: block;" class="btn-collapse" onclick="collapseChapter('collapsible490362')" role="button"> Chapter 120</a>
And in this line we can see the url that i need:
<a href="https://lectortmo.com/view_uploads/599487" class="btn btn-default btn-sm">
This is my method to obtain data parsing:
#Override
protected ArrayList<TMODatosSeleccion> doInBackground(Void... voids) {
String url = getIntent().getStringExtra("valor");
tmoDatosSeleccions.clear();
try {
Document doc = Jsoup.connect(url).get();
Elements data = doc.select("div.row>.col-10");
int size = data.size();
Log.d("doc", "doc: "+doc);
Log.d("data", "data: "+data);
Log.d("size", ""+size);
for (Element e : data) {
String numeroCap = e.select("a").attr("none");
String urlManga = e.select("div.row>.col-2").select("a").addClass("btn").attr("href").trim();
tmoDatosSeleccions.add(new TMODatosSeleccion(numeroCap, urlManga));
}
} catch (IOException e) {
e.printStackTrace();
}
return tmoDatosSeleccions;
}
Someone can help me?
Print Screen:
You could get the two links you are trying to find using:
Elements data = doc.select("div.row a");
for (Element e : data)
{
// process the link
}
Or you could get them individually using:
Elements data = doc.select("div.row>.col-10 a");
if (data.size() == 1)
{
Element e = data.get(0);
// process col-10 link
}
data = doc.select("div.row>.col-2 a");
if (data.size() == 1)
{
Element e = data.get(0);
// process col-2 link
}
The main problem you were having was that the col-2 element was not nested inside the col-10 element, so your loop would not have found any items.
I have built a Cordova Android app using jQuery Mobile and Google Maps V3.
The Map works fine for some time, but when I try to zoom or drag the map for 4-5 times the app freezes. It only works again if I clean my cache/RAM. I have used custom markers, and marker positions are from a SQLite database.
<div data-role="page" data-theme="f" id="Gomap" style="width:100%; height:100%;">
<div role="banner" class="ui-bar-a ui-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-theme="f" href="branch_locator.html" data-rel="back" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">
Back
</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow">
</span>
</span>
</a>
<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">
Google Map
</h1>
</div>
<div data-role="content" class="map" id="content">
<div id="map_canvas" style="height:100%;">
<div class="img-container"><img src="img/loading8.gif" /> </div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="foot">
</div>
<!-- /footer -->
<script type="text/javascript" src="js/map.js"></script>
</div>
map.js
var latt1;
var longg1;
var latt2;
var longg2;
$("#Gomap").on("pageshow", function(e) {
var s = $(this).data("url");
var lat1Part = s.split("&")[0];
var long1Part = s.split("&")[1];
var lat2Part = s.split("&")[2];
var long2Part = s.split("&")[3];
latt1 = lat1Part.split("=")[1];
longg1 = long1Part.split("=")[1];
latt2 = lat2Part.split("=")[1];
longg2 = long2Part.split("=")[1];
loadScript();
});
function initialize() {
$('#map_canvas').empty();
var ur_pos = new google.maps.LatLng(latt1, longg1);
var br_pos = new google.maps.LatLng(latt2, longg2);
$('#map_canvas').gmap();
$('#map_canvas').gmap({
'center': ur_pos
});
$('#map_canvas').gmap({
'zoom': 6
});
$('#map_canvas').gmap('addMarker', {
'position': br_pos,
'bounds': true,
'icon':'img/logo.png',
'animation': google.maps.Animation.DROP
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Some Text Here</B>'
}, this);
});
$('#map_canvas').gmap('addMarker', {
'position': ur_pos,
'bounds': true,
'animation': google.maps.Animation.DROP
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Your Current Position</B>'
}, this);
});
$('#map_canvas').gmap('refresh');
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=GMAP KEY HERE&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
I'm trying to load JSON from my wordpress-based website. I'm using phonegap to create an app on android, ios and windows. I'm using this js for the JSON, calling for business hours (shours1, shours2, shours3):
(function(){
'use strict';
var app = angular.module('app', ['onsen', 'angular-images-loaded', 'ngMap', 'angular-carousel']);
app.controller('restaurantController', function($http, $scope, $compile, $sce){
$scope.getHours = function(){
$scope.isFetching = true;
$scope.shours1 = '';
$scope.shours2 = '';
$scope.shours3 = '';
$http.jsonp('http://signsrestaurant.ca/api/get_posts/?post_type=restaurant&posts_per_page=-1&callback=JSON_CALLBACK').success(function(response) {
// Get's the first restaurant
$scope.restaurantJson = response.posts[0];
$scope.isFetching = false;
console.log( $scope.restaurantJson.custom_fields.shours1[0] );
$scope.shours1 = $scope.restaurantJson.custom_fields.shours1[0];
$scope.shours2 = $scope.restaurantJson.custom_fields.shours2[0];
$scope.shours3 = $scope.restaurantJson.custom_fields.shours3[0];
});
}
});
})();
Here is my html:
<ons-page ng-controller="restaurantController" ng-init="getHours()">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Location</div>
<div class="right" ng-show="isFetching">
<ons-toolbar-button><ons-icon icon="ion-loading-c" fixed-width="false" ></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<div class="app-page">
<div class="app-page-photo">
<ons-row class="app-map">
<ons-col>
<map center="[43.664639, -79.384649]">
<marker
position="[43.664639, -79.384649]"
title="Signs Restaurant & Bar"
animation="Animation.BOUNCE"
visible="true" ></marker>
</map>
</ons-col>
</ons-row>
<ons-list class="app-photo-buttons">
<ons-list-item modifier="action-buttons">
<ons-row class="action">
<ons-col class="action-col">
<div class="action-icon"><ons-icon icon="ion-ios-star-half"></ons-icon></div>
<div class="action-label">Rate</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon"><ons-icon icon="ion-bookmark"></ons-icon></div>
<div class="action-label">Favorite</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')"><ons-icon icon="ion-ios-telephone"></ons-icon></div>
<div class="action-label" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')">Call</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')"><ons-icon icon="ion-map"></ons-icon></div>
<div class="action-label" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')">Directions</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Monday <span class="label label-danger">{{ shours1 }}</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Tuesday-Thursday <span class="label label-default">{{ shours2 }}</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Friday-Sunday <span class="label label-default">{{ shours3 }}</span>
</div>
</ons-list-item>
</ons-list>
</div>
</div>
</ons-page>
It seems to be working partially. The shours do load, but only after I rotate my android or click on the menu. It doesn't load off-hand immediately. It basically needs some sort of a refresh to get it to load. I would appreciate it if someone can help me out with this.
Thanks a lot to Andreas Argelius. I wrapped the
$scope.shoursX
in
$scope.$evalAsync(function() { ... })
and that did it.
EDIT: I spoke too soon. It worked and it didn't. The issue still persists.
I want to add Google maps v3 with Geolocation into my jQuery Mobile / PhoneGap Android app but I've some problems:
It locates my position correct, but it's (the radius?) too close. I've changed the value of the radius at my code, but nothing happens. You can see the problem here: http://s7.directupload.net/images/131214/nbc3wudy.png
The second problem concers the height. You can see that at the screenshot too. The maps is too high for the screen, but I don't know how to change it.
And the last problem is this error: /android_asset/www/js/jquery.ui.map.js: Line 46 : Uncaught TypeError: Cannot call method 'apply' of undefined
Here is my code:
index.html
<div data-role="page" id="GPS">
<div data-role="header">
LeftPanel
<h1></h1>
</div>
<div data-role="content" id="map-content">
<div id="map-container"></div>
</div>
<script type="text/javascript">
$('#GPS').on("pagecreate", function() {
var positionOutput = function(position){
var longpos = position.coords.longitude;
var latpos = position.coords.latitude;
$('#map-container').height($(window).height());
$('#map-container').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map-container').gmap('addMarker', {'position': clientPosition, 'bounds': true});
$('#map-container').gmap('addShape', 'Circle', {
'strokeWeight': 0,
'fillColor': "#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
}
});
};
navigator.geolocation.getCurrentPosition(positionOutput);
});
</script>
</div>
CSS:
#map-content {
padding: 0px;
}
I am trying to add a google map to my android tablet to detect where the terminal is.But the map is not displayed completely. only a small part was displayed. and after rotate the screen, it can displayed perfectly.
I did all this according to http://www.digitalnoiz.com/mobile-development/geolocation-jquery-mobile-maps/
This is my html code:
<head>
<link href='stylesheets/jquery.mobile-1.1.0.css' rel='stylesheet' />
<link href='stylesheets/my.css' rel='stylesheet' />
<script charset='utf-8' src='javascripts/jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
<script charset='utf-8' src='javascripts/jquery.ui.map.min.js' type='text/javascript'></script>
<script charset='utf-8' src='http://maps.google.com/maps/api/js?sensor=true' type='text/javascript'></script>
<script charset='utf-8' src='javascripts/application.js' type='text/javascript'></script>
<script charset='utf-8' src='javascripts/jquery/jquery.mobile-1.1.1.js' type='text/javascript'></script>
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap/cordova-2.0.0.js"><\/script>
</head>
<body>
<!-- Diagnostic -->
<div data-role='page' id='diagnostic_page'>
<div data-position='inline' data-role='header' data-theme='a'>
<h2>
Diagnostic
</h2>
<a data-icon='arrow-l' href='#index_page'>
Back
</a>
<a data-role='button' href='#diagnostic_page' id='PageRefresh'>
Refresh
</a>
</div>
<div data-role='content' style='padding: 15px'>
<ul data-divider-theme='a' data-inset='true' data-role='listview'>
<!--there are some other list variables-->
<li data-theme='c'>
Show current location:
<a class='classspan' href='#location_page'>
Click on me
</a>
</li>
</ul>
</div>
</div>
<!-- show current location -->
<div data-role='page' data-theme='c' id='location_page'>
<div data-position='fixed' data-role='header' data-theme='a'>
<a data-icon='arrow-l' href='#diagnostic_page'>
Back
</a>
<h2>
DigitalNoiz
</h2>
<div data-role='header'></div>
Geolocation
<div id='map_canvas'></div>
<div id='geolocation'></div>
</div>
</div>
</body>
This is my Jquery code, all my function code are edited in application.js.
function onLoad() {
console.log('Init reached');
$.mobile.allowCrossDomainPages = true;
$.mobile.showPageLoadingMsg();
$.support.cors = true;
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
console.log('Starting up...');
// navigator.app.overrideBackbutton(true);
document.addEventListener("backbutton", onBackKeyDown, false);
console.log('Initializing db');
refreshpage();
getPosition();
}
function getPosition(){
var geoOptions = { enableHighAccuracy: true, timeout: 10000 };
navigator.geolocation.getCurrentPosition(function(position){ // geoSuccess
// we have the position
var geolocation = $('#geolocation');
geolocation.html('<table></table>');
var table = geolocation.find('table');
if(position.coords.latitude)
table.append('<tr><th>Latitude</th><td>' + position.coords.latitude + '</td></tr>');
if(position.coords.longitude)
table.append('<tr><th>Longitude</th><td>' + position.coords.longitude + '</td></tr>');
if(position.coords.altitude)
table.append('<tr><th>Altitude</th><td>' + position.coords.altitude + '</td></tr>');
if(position.coords.accuracy)
table.append('<tr><th>Accuracy</th><td>' + position.coords.accuracy + '</td></tr>');
if(position.coords.altitudeAccuracy)
table.append('<tr><th>Altitude Accuracy</th><td>' + position.coords.altitudeAccuracy + '</td></tr>');
if(position.coords.heading)
table.append('<tr><th>Heading</th><td>' + position.coords.heading + '</td></tr>');
if(position.coords.speed)
table.append('<tr><th>Speed</th><td>' + position.coords.speed + '</td></tr>');
if(position.coords.timestamp)
table.append('<tr><th>Timestamp</th><td>' + new Date(position.timestamp) + '</td></tr>');
//show position on map
var map_canvas = $('#map_canvas');
map_canvas.gmap(
{'center' : position.coords.latitude + ',' + position.coords.longitude,
'zoom' : 12,
'disableDefaultUI':true,
'callback':function(){
var self = this;
var marker = self.addMarker({ 'position' : this.get('map').getCenter() });
marker.click(function(){
self.openInfoWindow({ 'content' : 'This is your current location' }, this);
});
}
});
}, function(error){ // geoError
navigator.notification.alert('error: ' + error.message + '\n' + 'code: ' + error.code);
}, geoOptions);
}
Can anybody could give me some advices?
I had this too (especially in Chrome on the desktop) and solved it by resizing the map when it had finished rendering (in 'idle' state):
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
Give your map div a size ( both width and height):
<div id='map_canvas' style="width:400px; height:500px"></div>