I am using Google maps API v3, and this is my HTML file (mylocation.html) :
<!DOCTYPE html>
<html>
<head>
<title>Mylocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {zoom: 6};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions)n);
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>
When I open it on the Google Chrome, it works fine, and shows me my location.
In my project, I using WebVew to show this HTML file on Android. But when I run it, in LogCat, I get the following error:
"Uncaught TypeError: Cannot call method 'lat' of null at file:///mnt/sdcard/myloction.html:12"
(I have saved mylocation.html in the SDCard).
I'm not sure how to fix this? Could someone guide me with this?
To access Geolocation in the WebView, you need to do a bit of setup first.
You first must enable the feature in WebSettings: http://developer.android.com/reference/android/webkit/WebSettings.html#setGeolocationEnabled(boolean)
And you must also implement the WebChromeClient.onGeolocationPermissionsShowPrompt:
http://developer.android.com/reference/android/webkit/WebChromeClient.html#onGeolocationPermissionsShowPrompt(java.lang.String, android.webkit.GeolocationPermissions.Callback)
And please also ensure that your application has the appropriate Android permissions to access location.
Related
I want to use leaflet map kit in xamarin.forms uwp project. For that I have created index.html file in pcl project. But when I'm trying to read that file it always returns null.
index.html
<!DOCTYPE html>
<html>
<head>
<title>LeafletMap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--leaflet js-->
<script src="JS/leaflet.js"></script>
<!--leaflet css-->
<link rel="stylesheet" href="CSS/leaflet.css" />
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
var mbAttr = '© OpenStreetMap contributors',
mbUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
mbUrl2 = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
mbAttr2 = 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
var OSM = L.tileLayer(mbUrl, { id: 'OSM', attribution: mbAttr }),
Sat = L.tileLayer(mbUrl2, { id: 'Sat', attribution: mbAttr2 });
var baseLayers = {
"OSM": OSM,
"Satellite": Sat
};
var markerGroup = new L.LayerGroup();
// Map initialization
var map = L.map('map',{
center: [-2.1319654, -79.9319396],
zoom:5,
layer: [OSM]
});
map.addLayer(markerGroup);
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>
InitializeMap
var source = new HtmlWebViewSource();
source.BaseUrl = DependencyService.Get<IBaseUrl>().Get();
var assembly = typeof(MainPage).GetTypeInfo().Assembly;
var stream = assembly.GetManifestResourceStream("LeafletMap.index.html");
StreamReader reader = null;
if (stream != null)
{
try
{
reader = new StreamReader(stream);
source.Html = reader.ReadToEnd();
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine($"Exception \n - {ex.Message}");
}
finally
{
if (reader != null)
{
reader.Dispose();
}
}
webView.Source = source;
}
This line always returns null.
assembly.GetManifestResourceStream("LeafletMap.index.html");
Anyone know how to use leaflet mapkit in xamarin.forms?
I have referred this sample: https://github.com/osekom/LeafletMapXamarinForms.
It's working fine as it has old versioned xamarin.forms the same is not working with latest version.
It worked in original because LeafletMap is the assembly name. Presumably, your project has a different name, e.g. MyProject.
Change
assembly.GetManifestResourceStream("LeafletMap.index.html");
To
assembly.GetManifestResourceStream("MyProject.index.html");
Substitute your actual project's Assembly Name for "MyProject". By default, this will be the same as the project's name. If in doubt, open "Properties" for project, Application tab, "Assembly name:".
If still doesn't work, here is how to see all the resource ids of your assembly:
var names = System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceNames();
Put a breakpoint on a line after this. Then in VS "Immediate" window, type "names".
I'm trying to change the playback quality of a Youtube video using the iframe/javascript API.
However, the API seems to ignore my request.
Here's a simple example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlaybackQualityChange
}
});
}
function changeQuality() {
var qualities = player.getAvailableQualityLevels();
var actual = player.getPlaybackQuality();
for (var i = 0; i < qualities.length; i += 1) {
if (actual !== qualities[i]) {
console.log('Changing quality to:' + qualities[i]);
//onPlaybackQualityChange is never called!
player.setPlaybackQuality(qualities[i]);
break;
}
}
}
function onPlayerReady(event) {
event.target.playVideo();
setTimeout(changeQuality, 1000);
}
function onPlaybackQualityChange(event) {
console.log('Current quality:' + event.data);
}
</script>
</body>
</body>
</html>
If you run the code you can see that onPlaybackQualityChange is only called once the video is loaded and the request to change the video quality using setPlaybackQuality() is completely ignore.
Any help is appreciated. Thanks.
Unfortunately, the setPlaybackQuality() function has not been working for at least a couple of months.
For testing purposes try using setPlaybackRate() and you will find out that you can set the playback rate without any problems, but not the quality.
You have to use setPlaybackQualityRange to set Youtube quality.
Look more info here about setPlaybackQuality https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality
player.loadVideoById({'videoId': 'M7lc1UVf-VE',
'startSeconds': parseInt(5),
'suggestedQuality': 'hd720'});
First of all I apologize for my poor English but I can not find the answer to my question on all French forums.
I am developing an application that is to make real-time tracking of a fleet of vehicles.
I'm at the end of this application but I have a problem. I can not update my markers without reloading my web page.
I tried with settimeout() but it still charging my map
here is my code thank you for your help.
ps: when completed this application will be available in open source
<html lang="fr">
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="theme.css"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>Geonano V1</title>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0px; padding: 0px}
#EmplacementDeMaCarte{height: 100%}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialisation() {
var tableauLieux = [
//here I have a loop in php to get my markers in my database
["Paris", 48.86110, 2.34459],
["Versailles", 48.78199, 2.11045]
];
var optionsCarte = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < tableauLieux.length; i++) {
var Lieu = tableauLieux[i];
var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]);
bounds.extend(pointLieu);
var marqueurLieu = new google.maps.Marker({
position: pointLieu,
map: maCarte,
title: Lieu[0],
icon : Lieu[3],
clickable: true
});
//création de l'info-bulle
var infoBulle = new google.maps.InfoWindow({
content: Lieu[0]//ici on peut mettre des balises HTML
});
google.maps.event.addListener(marqueurLieu, 'click', function() {
infowindow.setContent(Lieu[i][0]);
infoBulle .open(maCarte,marqueurLieu);
});
}
maCarte.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialisation);
setInterval("initialisation()", 5000);
</script>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
</body>
<META HTTP-EQUIV="Refresh" CONTENT="120; URL=http://localhost/geonano.php">
</html>
You'll have to request a ressource(may be a PHP-script) which returns the data for the markers(tableauLieux) using AJAX.
Once you got the response, remove the current markers and create the new markers.
If I understand it correctly, you're redrawing the map each 5 second with all the markers.
Bascily what you want to do is store your marker in an array that you can loop through at a later time to change their lat and lng. Clear them from the map, change the information and then put them back on the map. Changing the information is going to need some ajax.
marker.setMap(null);
a good way to do that is using something like
refreshIntervalId = setInterval("requestPoints()", 4000);
function requestPoints() {
$.ajax({
url:'{% url 'gpstracking.ajax.request_tracks' %}',
type: 'get',
dataType: 'json',
data: {
vehicles: vehicles
},
success: function (positions) {
updatePoints (positions);
}
});
}
function updatePoints (positions) {
console.debug('updating markers');
var lttd;
var lgtd;
for (var i=0; i < positions.length; i++) {
lttd = positions[i].latitude;
lgtd = positions[i].longitude;
position = map.createPosition({
lat: lttd,
lng: lgtd,
});
markers[positions[i].registration].setPosition(position);
};
if (positions.length > 1) {
//map.fitZoom();
} else {
map.setCenter (lttd, lgtd);
}
}
I am able to run the google maps api to get the geo locations only on the firefox browser. It does not find the geo location on safari and Google crome. It fails stating geolocation service failed. Can some one tell me how I could make this geollocation example run on safari and google crome. I have got this example from google maps api V3
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<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>
Can some one tell me how I could make this geollocation example run on safari and google crome.
without knowing the versions, perhaps informing the browser to interpret the markup as html5 with
<!DOCTYPE html>
<html>
<head>
....
I copied following javascript code from google maps documentation, but it doesn't work, it only shows a white blank page, nothing loads.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!--
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>
Since v3 require api key what's wrong with it? I checked in google chrome and firefox but no clue.
Looks like you are missing a closing html tag, unless that is a typo.
Add this </html> at the bottom of the page.
You need to provide a center location to create your map. In your initialize() function change the map options to include the location you want to start with:
var myCenter = new google.maps.LatLng(60.0,105.0);
var myOptions = {
zoom: 6,
center: myCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
When (or if) you get a location from the geolocation service the center will be changed by your code.
Old question, will answer anyhow in case anyone else lands here.
I ended up using a slightly different implementation to get this to work:
<script type="text/javascript">
function initialize() {
var mapOptions = {zoom: 8, center: new google.maps.LatLng(-34.397, 150.644)};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp'+
'&key={{API_KEY}}&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript();
</script>
The part that I had to add to get it to work from other (nearly identical) versions of this, was the () at the end of loadScript(). The implicit function call simply was not happening.
You will need to replace {{API_KEY}} with your own. I am not sure if this is required, but it was part of what led me to a working implementation.
If you do not have one, follow the steps listed here