I am loading google maps in my WebView using a local html file (assets folder). The map has a kml overlay. The problem I'm facing is that when the kml file is updated, the respective changes are not being reflected in my WebView. I also tried removing the files, in which case, the map still shows the previously loaded overlays. So I assume its related to cache. For preventing caching, I tried using manifest in html, but it was not successful. My codes are as follows.
wv_map.getSettings().setJavaScriptEnabled(true);
wv_map.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
wv_map.clearCache(true);
wv_map.clearHistory();
wv_map.loadUrl("file:///android_asset/content.html");
The content.html being:
<!DOCTYPE html>
<html manifest="map.cache">
<head>
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#map img {
opacity: .4;
}
.gmnoprint a, .gmnoprint span {
display:none; //remove copyright and terms of use
}
.gmnoprint div {
background:none !important;
}
.gm-style-mtc {
display: none; //remove satellite option
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function initMap() {
layer0 = new google.maps.KmlLayer(*MY_URL_TO_KML_FILE*,
{
preserveViewport: true
});
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 2,
center: {lat: 10, lng: 120},
streetViewControl: false //remove the icon of person from the map
});
layer0.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
map.cache (in same location as content.html) file's content is:
CACHE MANIFEST
#CACHE
#cache nothing
NETWORK:
*
Finally, the kml file is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<GroundOverlay>
<color>#7cff0000</color>
<drawOrder>1</drawOrder>
<Icon>
<href>URL_TO_OVERLAY_IMAGE</href>
</Icon>
<LatLonBox>
<west>90</west>
<east>95</east>
<south>-19</south>
<north>25</north>
</LatLonBox>
</GroundOverlay>
</Document>
</kml>
I update the overlay image via Icon tag.
Thanks.
Related
I want to convert a website into an android app using Apache Cordova and visual studio 2015. Below is my index.html code:
<!doctype html>
<html lang="en">
<head>
<title>Zoggle</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
if (navigator.network.connection.type == Connection.NONE) {
networkError()
} else {
loadApp()
}
}
function loadApp() {
navigator.app.loadUrl("http://zoggle.zolmeister.com")
}
function networkError() {
navigator.notification.alert('Zoggle requires an internet connection')
var $net = document.createElement('div')
$net.innerHTML = 'Zoggle requires an internet connection'
document.body.appendChild($net)
}
</script>
<style>
body {
padding: 15px;
background: #23252e;
color: #01ced3;
text-align: center;
}
div {
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>
When I run the code, it shows me a blank black page. I want to load the web page the link is given..Please Help.
You can use Inappbrowser Plugin to load the website in your app
http://www.plugreg.com/plugin/apache/cordova-plugin-inappbrowser
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/
I am developing one Android app using Cordova. On the app startup I want to show some dynamic message on the UI which is index.html. How can I show this message from Java code.
index.html
MainActivity.java
How to update the value of text box on index.html ?
In short I want to update some value from my JAVA code not from JavaScript!
Thank you
This is how i do it. (less stress)
First you need to attach an event listener to the OnLoad Event of the index.
HTML
<body onLoad="showMessage()">
JavaScript
function showMessage()
{
alert('Hello Message');
}
Now the showMessage() function will be called as soon as the page load is completed. Do note that you can also create your own method for displaying a message instead of using an alert.
You're welcome.
UPDATE
This is a simple method for showing a dynamic message (instead of an alert)
I'm only adding this because i'm guessing that you are requesting help with the code also. So here is a super sweet alert box, complete with animations.
First make sure you have the required HTML on the page that will be used to display the message
HTML
<div id="Page_Alert" class="Animate_Opacity">
<div id="Page_Alert_Box_Container" class="Box_Container Animate_MarginTop">
<div id="Page_Alert_Title">Alert Preview</div>
<div id="Page_Alert_Content">This is just a preview of what an alert popUp will look like.</div>
<div class="Buttons_Container">
<div class="BTN" onClick="hide_AlertWindow()">OK</div>
<!-- <div class="BTN">CANCEL</div> -->
</div>
</div>
<div class="bg"></div>
</div><!-- End Alert Pop Up -->
CSS
#Page_Alert{position:absolute; top:0; left:0%; width:100%; height:100%; z-index:-20; opacity:0; overflow:hidden;}
#Page_Alert > .bg{position:absolute; top:0; left:0; width:100%; height:100%; background:BLACK; opacity:.6; z-index:0;}
#Page_Alert > .Box_Container{position:relative; margin:auto; margin-top:-45%; width:80%; min-height:100px; background:WHITE; color:#444; z-index:1;}
#Page_Alert > .Box_Container > #Page_Alert_Title{position:relative; margin:auto; padding-top:18px; width:90%; font-family:OpenSansBold; color:BLACK; font-weight:bold; font-size:1.2em; z-index:1;}
#Page_Alert > .Box_Container > #Page_Alert_Content{position:relative; margin:auto; margin-top:12px; width:90%; background2:RED; font-size:.9em; z-index:1;}
#Page_Alert > .Box_Container > .Buttons_Container{position:relative; margin:auto; margin-top:24px; width:95%; height:40px; background2:RED; z-index:1;}
#Page_Alert > .Box_Container > .Buttons_Container > .BTN{position:relative; margin-right:13px; min-width:3px; height:30px; color:#0286A4; display:block; float:right; text-align:right; font-size:1.15em; font-family:OpenSansSemiBold;}
.Animate_Opacity
{
transition:opacity .5s;
-moz-transition:opacity .5s; /* Firefox 4 */
-webkit-transition:opacity .5s; /* Safari and Chrome */
-o-transition:opacity .5s; /* Opera */
}
.Animate_MarginTop
{
transition:margin-top .4s;
-moz-transition:margin-top .4s; /* Firefox 4 */
-webkit-transition:margin-top .4s; /* Safari and Chrome */
-o-transition:margin-top .4s; /* Opera */
}
Now all you do is call this function on page load (or when ever you wish to show an alert.
JavaScript
function show_AlertWindow(_title,_content)
{
var Page = document.getElementById('Page_Alert');
var Box = document.getElementById('Page_Alert_Box_Container');
var Title = document.getElementById('Page_Alert_Title');
var Content = document.getElementById('Page_Alert_Content');
Title.innerHTML = _title;
Content.innerHTML = _content;
Page.style.zIndex=15;
setTimeout(function(){ Page.style.opacity=1; },100);
setTimeout(function(){ Box.style.marginTop = 45 +'%'; },400);
}
function hide_AlertWindow()
{
var Page = document.getElementById('Page_Alert');
var Box = document.getElementById('Page_Alert_Box_Container');
Page.style.opacity=0;
setTimeout(function(){ Page.style.zIndex=-1; },200);
setTimeout(function(){ Box.style.marginTop = -45 +'%'; },300);
}
Soooo... if your body tag is like this
<body onLoad="show_AlertWindow('Alert Title','Hello message from alert')">
You will see a sweet dynamic alert box animate onto the screen.
Your welcome! (I practically did all of the work for you)
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;
}
How to get city name with out using GPS ,GPRS or WiFi? In case we have to use GPS how to identify city name?
First get your last known location and get the latlag
than pass that in google api url Google Web Api
It will give you json response and you can get what ever you want area, city, state, country etc.
One way might be that you can get a city name via IP address.
It's not foolproof, though. I just tried the API at this website, but it listed me in San Jose when I'm actually physically in San Francisco.
You want a reverse geocoder for this purpose, such as the one built-in to Google Maps. An example of HTML and Javascript usage of this follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeLatLng() {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input type="button" value="Reverse Geocode" onclick="codeLatLng()">
</div>
<div id="map-canvas"></div>
</body>
</html>
This code is interpreted to generate this page. Good luck...
generally GPS for outside and wi-fi for inside is used to get location then get city name from it, in your case IP address seems to be solution but actually it might be wrong
I want to display a MapView that may be used to select a point to be displayed by StreetView in a separate area. I know that the API disallows multiple MapViews in a single process.
How can I cause StreetView to display in a different area than that which displays MapView?
I have been able to grab a static streetview without any problems, but I want to have dynamic StreetView and MapView.
aTdHvAaNnKcSe (THANKS in ADVANCE)
You can load 360 degree panoramic Google street-view in your WebView.
Try following activity in which both google-street-view and google-map can be navigated simultaneously in single Activity :
public class StreetViewActivity extends Activity {
private WebView webView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mappingWidgets();
}
private void mappingWidgets() {
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(false);
// If you want to load it from assets (you can customize it if you want)
//Uri uri = Uri.parse("file:///android_asset/streetviewscript.html");
// If you want to load it directly
Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple");
webView.loadUrl(uri.toString());
}
}
You can place this as static HTML page in assets folder of your application and then you can modify it's java-script according to your needs using Google street-view API.
Here I am posting sample streetviewscript.html that you can put in assets folder of your application and customize it according to your needs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 800px"></div>
<div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div>
</body>
</html>
Edit : For simultaneously navigating two street views, load following HTML from assets :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Events</title>
<STYLE type="text/css">
body, html { height:100%; padding:0; margin:0;}
#pano { float:left }
#pano1 { float:right }
</STYLE>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var cafe = new google.maps.LatLng(37.869085,-122.254775);
var heading_value = 270;
var pitch_value = 0;
var zoom_value = 1;
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: heading_value,
pitch: pitch_value,
zoom: zoom_value
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
panorama2.setPano(panorama.getPano());
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
panorama2.setLinks(panorama.getLinks());
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition();
panorama2.setPosition(panorama.getPosition());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading;
panorama2.setPov(panorama.getPov());
pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
});
}
</script>
</head>
<body onload="initialize()">
<div style="width:100%; height :100%; background-color:Lime;">
<div id="pano" style="width:50%; height:100%; background-color:Blue;">
</div>
<div id="pano1" style="width:50%; height:100%; background-color:Gray;">
</div>
</div>
<div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;">
<table>
<tr>
<td><b>Position</b></td><td id="position_cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading_cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano_cell"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
</body>
</html>
How can I cause StreetView to display in a different area than that which displays MapView?
Street View is only available on the device as its own activity (from its own application) and therefore cannot be displayed alongside any of your own widgets.
On Android have a look at the sample Street View Panorama and Map available at https://developers.google.com/maps/documentation/android/code-samples. But i am not sure if it will also do for custom street views.