I got problems with Android WebView and my webpage.
The page is ok in my Chrome Browser, but stays empty in the Android webview (Internet Permission granted, but no additional Permissions granted in the Manifest).
Do you have any hints for me? The other answers don't seem to apply here.
Normally I would use Googles Map View Control in Android, but in that case I really have to use a WebView. And I'm really bad at JavaScript :-(
my Javascript looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://maps.google.com/maps/api/js?v=3.exp">
</script>
<script>
if (navigator.geolocation) {
alert("Geolocation IS supported.");
navigator.geolocation.getCurrentPosition(showCurrentLocation);
} else {
alert("Geolocation API not supported.");
}
function showCurrentLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom : 15,
center : coords,
mapTypeControl : true,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
//create the map, and place it in the HTML map div
map = new google.maps.Map(document.getElementById("mapPlaceholder"),
mapOptions);
//place the initial marker
var marker = new google.maps.Marker({
position : coords,
map : map,
title : "Current location!"
});
}
</script>
</head>
<style>
mapPlaceholder {
height: 400px;
width: 700px;
background-color: graytext;
}
</style>
<body>
<div>
<div id="mapPlaceholder"></div>
</div>
</body>
</html>
and the Android Code:
WebView wvTask = (WebView) findViewById(R.id.wvTask);
wvTask.getSettings().setJavaScriptEnabled(true);
wvTask.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
wvTask.getSettings().setLoadWithOverviewMode(true);
wvTask.getSettings().setUseWideViewPort(true);
wvTask.getSettings().setBuiltInZoomControls(true);
wvTask.getSettings().setPluginState(WebSettings.PluginState.ON);
wvTask.getSettings().setGeolocationEnabled(true);
wvTask.getSettings().setLoadsImagesAutomatically(true);
wvTask.setWebChromeClient(new WebChromeClient());
wvTask.getSettings().setDomStorageEnabled(true);
wvTask.getSettings().setAppCacheEnabled(true);
wvTask.getSettings().setDatabaseEnabled(true);
wvTask.loadUrl(XXX); //here is my URL, tried both https and http - nothing worked.
Related
I have a google map api page that does not return the correct coordinates from the mouse event in firefox when the map div is not at the top left (0,0) of the browser window. If I put any css padding or margin on the map div, the mouseevent origin in google maps still starts from the top left of the browser window and not the map div. The mouseevent works correctly in IE & Chrome returning the correct lat/lng but not Firefox. Anyone have any suggestions to correct?
I created a very simple example at http://jsfiddle.net/fNPvf/15426/ that shows the coordinates as the mouse is moved over the map. You can see at the top left of the map image, the coordinates should be 0,0 but Firefox showing 50,50. The infowindow shows the correct lat/lng of the map center and you can see the difference in coordinates (50 pixel shift to top left) when you move the mouse to that point.
<html>
<head>
<meta charset="utf-8">
<style>
body {font:12px arial; margin:0px}
#map {
height:400px;
width:400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
coord = new google.maps.LatLng(38.939201, -94.747640)
function initialize() {
var mapOptions = {
zoom: 16,
center: coord
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.trigger(map, 'resize');
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent('38.939201, -94.747640');
coordInfoWindow.setPosition(coord);
coordInfoWindow.open(map);
google.maps.event.addListener(map, "mousemove", function (event) {
document.getElementById("footer").innerHTML = "Mouse X Y:" + event.pixel.toString() + " - Lat Lng:" + event.latLng.toString() + "<br />"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="margin-left:50px;margin-top:50px;"></div>
<div id="footer" style="margin-left:50px; padding:10px;"></div>
</body>
</html>
Solution:
Add parameter v=3 once calling the google maps api. The fiddle provided by user4974882 is calling 3.exp - doesn't work.
Works:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
Live example
Doesn't work correctly:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Live example
(both fiddles from user4974882)
Background:
The problem occured with Firefox Version 39. The Mozilla-team implemented some new functionality regarding offsetX/Y (https bugzilla.mozilla.org/show_bug.cgi?id=69787). Unfortunately the Google Maps API already somehow plays around with that (https code.google.com/p/gmaps-api-issues/issues/detail?id=8278) and so - once FF39 was rolled out - the problem popped up.
Problem with latest release of FF v39. Worked previously in v38.0.5.
I can confirm that the following is bugged, given a map with a fixed size and a 64px margin, "Hello World!" will only appear when you place the mouse pointer at -64,-64 relative to the marker. It appears that inside Maps, the pointer position is offset by the x/y of the map element relative to the top left corner of Firefox' client area
This issue has appeared in the last few days
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map-canvas
{
width: 640px;
height: 480px;
margin: 64px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
When creating a marker use the option {optimized:false}. It solves the issue in firefox 39.0.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map-canvas
{
width: 640px;
height: 480px;
margin: 64px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
optimized: false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
As stated - this bug crept in with FF 39.
In your example, replace the v=3.exp parameter with just v=3
So it would be
src="https://maps.googleapis.com/maps/api/js?v=3"
I am new to google maps api and am using it to put a map on my wordpress page and get the location of the user. So far, I have kept the following code in my header.php file with myapikey replaced with my actual api key.
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places&key=myapikey"></script>
I also have a wordpress page with the following code. This code works when I keep it on a html file. However, when I put this code on my wordpress page, I don't even get the map to show. I am using Google Maps API v3 Geolocation. Could someone please help me.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0 }
#map-canvas { height: 100%; width: 100%; top: -100px;}
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//Html five geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: "HTML5 is used."
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
You can't paste the complete document into the editor, what you put into the editor is expected to be te content of your page, it may be almost anything that you would put into the of a HTML-page(no html, head and body).
script and style always include either via the header/footer of the theme or via a plugin.
I am building an webapp using phonegap cordova 2.9.0. The app developed is working fine in the desktop browser but when i try to run app in android device (After getting build using build_tool it shows the first alert generated by my javascript. After that only a blank white screen appears nothing else.
The link to the app source at is link. In this app i am trying to get users current location using
navigator.geolocation
The app aims to show all available bitcoin trade places in google map withing given radius of user location.
App can be downloaded using this link.
Update:
I am able to get the geolocation points and show them in alert, but wehn i try to render them on map with marker, then map is not rendering on android device. (Working on desktop browser)
index.html
<!DOCTYPE html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
main.html
<!DOCTYPE html>
<html>
<head>
<title>CoinMap</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="js/jquery.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyA-zLxKvbiIbO8uR20Z5DemPXYh1F3bm1M&sensor=false"></script>
<script src="js/coinmap.js"></script><!--
<script src="js/coinmap-icons.js"></script>-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="bitcoin.png" />
<meta name="keywords" content="coinmap,map,bitcoin,openstreetmap" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<!--<body onload="getCoinData()">-->
<div id="map"></div>
<div id="count"></div>
<script>
alert("Getting your location....");
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(coinmap, onError, {maximumAge: 300000, timeout:10000, enableHighAccuracy : true});
}
else{
alert("GeoLocation is not available.");}
};
</script>
</body>
</html>
coinmap.js
function coinmap(position) {
alert("Latitude: " + position.coords.latitude + "\n" +
"Longitude:" + position.coords.longitude + "\n");
var lat = position.coords.latitude;
var lng = position.coords.longitude;
loadMap(lat, lng);
}
function loadMap(latitude, longitude){
var my_latLng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 8,
center: my_latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var my_marker = new google.maps.Marker({
position: my_latLng,
map: map,
title: 'My Position'
});
var markers = [];
var user_radius = 1000000;
$.getJSON("http://overpass.osm.rambler.ru/cgi/interpreter?data=[out:json];(node[%22payment:bitcoin%22=yes];way[%22payment:bitcoin%22=yes];%3E;);out;", function (data) {
$.each(data.elements, function (key, value) {
var latLng = new google.maps.LatLng(value.lat, value.lon);
var marker = new google.maps.Marker({
'position': latLng
});
markers.push(marker);
});
// Define the circle
var circle = new google.maps.Circle({
map: map,
clickable: false,
// metres
radius: user_radius,
fillColor: '#fff',
fillOpacity: .6,
strokeColor: '#313131',
strokeOpacity: .4,
strokeWeight: .8
});
// Attach circle to marker
circle.bindTo('center', my_marker, 'position');
// Get the bounds
var bounds = circle.getBounds();
for (var i = 0; i < markers.length; i++) {
if (bounds.contains(markers[i].getPosition())) {
markers[i].setMap(map);
} else {
markers[i].setMap(null);
}
}
});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
This above code is working well in chrome and firefox and mobile browser also, but not working as a wepapp after build using phonegap. Any help will be appreciated.
Any geolocation example with rendering location on map can also be helpful.
I ran into this exact same problem and found the issue to be with the options passed in. If you look at the current example on phonegap.com for getCurrent location: http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html#Geolocation
You'll notice no options are passed in, it's simply: navigator.geolocation.getCurrentPosition(onSuccess, onError);
I deleted my options and the map popped right up. I have not looked deeper into it since, so I cannot tell you the cause, but please try deleting your options and see if it works.
I'm trying to test some geolocation codes on my computer, but I'm not even able to run the examples.
Although they run perfectly from documentation website when I try to open the html file from my computer I get a blank page, all I do is trying to detect my position...
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Please help, can you find out what am I doing wrong?
You need change the link in the stylesheet to an absolute link:
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to highlight a user's current location in google maps?
Is there any method to get blue circle marker in current location using javascript google maps api?
You can use the GeolocationMarker library. It is part of the Google Maps API Utility Library.
Use the navigator.geolocation approach, and use a custom icon for your blue circle
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developers.google.com/maps/documentation/javascript/overlays#Icons
EDIT:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps User Location</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
html, body, #map_canvas{width:100%;height:100%;}
</style>
</head>
<body onload="locate()">
<div id="map_canvas"></div>
</body>
<script>
var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
function locate(){
navigator.geolocation.getCurrentPosition(initialize,fail);
}
function initialize(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
}
function fail(){
alert('navigator.geolocation failed, may not be supported');
}
</script>
</html>