I've been struggling days to get my KML-File working on a Google Maps API. I originally downloaded a GPX-File and made it to .kml to use it on my Maps.
Here's the HTML code:
<script type="text/javascript">
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(47.2769,8.650017),
zoom:9,
panControl:true,
zoomControl:false,
mapTypeControl:true,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
var ctaLayer = new google.maps.KmlLayer({
url: 'kml/route.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What seems to be the problem? The Map gets displayed, but the Layer with KML-information does not appear. Does it have to do with a connection error to Google? My Firebug Console keeps reporting me network errors like:
"NetworkError: 407 authenticationrequired - https://maps.gstatic.com/intl/de_de/mapfiles/api-3/15/0/main.js"
BTW The KML File seems to be OK. I uploaded it on Google Maps and it does work.
Does anyone know a better solution to get my GPX cyclingcourse displayed on Google Maps?
You should host your kml file somewhere.
https://developers.google.com/kml/articles/pagesforkml?hl=en
Related
I am trying to play back a video (currently hosted on S3 with public access) by creating a blob URL.
I have used Elastic Transcoder to encode the video since it is supposed to set the MOOV atom to the top (beginning).
I am unable to get the code to work but also found a working example: link here
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'https://ovation-blob-url-test.s3.amazonaws.com/AdobeStock_116640093_Video_WM_NEW.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream();
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
</script>
</body>
</html>
What am I doing wrong? I looked at tools ie.e MP4Box or QT-FastStart but they seem to be kind of old school. I would also be willing to change from MP4 to M3U8 playlist but then I don't know what MIME types to use.
At the ned of the day I am trying to play back a video/stream and hide the URL (origin) potentially using blob.
Thank you guys!
So, first, even though this code seems to be taken from mozilla documentation site, there are a few issues - you are not checking the readyState before calling endOfStream thus the error you get is valid, secondly, the play() call is blocked by the autoplay policy changes. If you add an error handler, you will actually see that the appendBuffer fails. Here is the updated snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'https://ovation-blob-url-test.s3.amazonaws.com/AdobeStock_116640093_Video_WM_NEW.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
// console.log(mediaSource.readyState); // ended
if (mediaSource.readyState === "open") {
mediaSource.endOfStream();
video.play();
}
});
sourceBuffer.addEventListener('error', function (event) {
console.log('an error encountered while trying to append buffer');
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
</script>
</body>
</html>
So lets advance to next issue - the actual error. So, using chrome://media-internals/ we can see that the video actually fails to load do to incompatibility with the ISOBMFF format:
I am not familiar with Elastic Transcoder, but it seems that is it not producing an mp4 file suitable for live streaming. Also, if using mse, putting moov at the beginning is not enough, the video actually has to meet all of the ISOBMFF requirements - see chapters 3. and 4.
The working sample you mentioned is not a valid comparison since it uses the blob for the src, where the ISOBMFF rules do not apply. If it is fine for you to go that way, don't use MSE and put the blob directly in the src. If you need MSE, you have to mux it correctly.
Ok, so I got the original code example to work by encoding my MP4 videos with ffmpeg:
ffmpeg -i input.mp4 -vf scale=1920:1080,setsar=1:1 -c:v libx264 -preset medium -c:a aac -movflags empty_moov+default_base_moof+frag_keyframe output.mp4 -hide_banner
Important is: -movflags empty_moov+default_base_moof+frag_keyframe
This setup also scales the video to 1920x1080 (disregarding any aspect ratio of the input video)
However, based on the comments of the original post, I do believe there might be a more efficient way to generate the blob url and ingest into a video tag. This example was copied straight from https://developer.mozilla.org.
If anyone comes up with a better script (not over-engineered), please post it here.
Thank you #Rudolfs Bundulis for all your help!
I use Muse and I want to be able to share the current URL dynamically. I have achieved this with Facebook and Twitter. However Google Plus is still evading me.
This is the JS code I have been working with.
<script language="javascript">
function gplussharecurrentpage() {
sharelink = "https://plus.google.com/share?url={URL}"+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.co.uk";
googleplusbtn(url);
</script>
I have a button linked to activate the script however it comes back with a this link is not valid.
Any ideas?
i've got two PHP projects in which i use the Google Maps Api to convert adress data into geo coordinates. The first project uses this code (i post ir here in a shorted version) and works:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function latlong(adresse) {
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode( { 'address': adresse}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// I NEVER GET IN HERE with my second project
alert("It works!");
} else {
alert('It works not');
}
});
}
}
// Start Converting
latlong('teststreet 10, 91578 Leuterhausen');
As you can see, i don't use an API Key in this section
<script src="https://maps.googleapis.com/maps/api/js"></script>
but it works anyway (Alert box "It works" is shown).
Now i have built another project with the same code but it does not work (Alert Box "It works not" is shown).
Do you have any idea...
...why the first project works WITHOUT an API key?
...what i have to change in the code so that the second project works?
When i use this code in the header
<script src="https://maps.googleapis.com/maps/api/js?key=[here i place in my key]"
async defer></script>
i get the error message: "Google Maps API error: ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error"
How can i activate the key?
Every help is appreciated.
Best regards
Daniel
If the app has been running before google enforced the use of API keys the app should still run, apps published after the change will require the key ...read here : https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update
I have problem with Google Maps on my site.
Maps and code works locally but when i publish map it shows only gray background.
I have Joomla site.
Please could someone help me.
This is my code:
<head>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="/maps/westcampus.js"></script>
<script>
var infowindow;
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.42362457157549, -122.0921247138165),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 10
});
for (var x in westcampus) {
var building = westcampus[x];
var location = new google.maps.LatLng(building.lat,building.lng);
addMarker(map, building.name, location);
}
}
var bounds = new google.maps.LatLngBounds ();
function addMarker(map, name, location) {
var marker= new google.maps.Marker({
position: location,
map: map
});
bounds.extend (location);
google.maps.event.addListener(marker, 'click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: name
});
infowindow.open(map,marker);
});
map.fitBounds (bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width: 100%; height: 400px;"></div>
</body>
</html>
and DB
var westcampus = [{'name':'Google West Campus 1','lat':37.423901,'lng':-122.091497,'ost': "Ostatak!"},
{'name':'Google West Campus 2','lat':37.424194,'lng':-122.092699,'ost': "Ostatak!"},
{'name':'Google West Campus 3','lat':37.423901,'lng':-122.092456,'ost': "Ostatak!"}];
thanks
There seems to be nothing wrong with the code you're using.
So the problem is with the server, and where it's requesting the map from.
Are you running SSL, and trying to request the JavaScript via HTTP ? Maybe remote to the server and see if you can run the page locally there. Investigate the network with chrome of fiddler. Might be returning 403 somewhere or something along those lines.
Or a load timing issue. Sometimes google maps need the resize event called once the map triggers the idle event. So it recalculates the bounds of the map tiles.
Can't really suggest anything else. Good luck.
Following code works in Chrome (22.0) but not in Safari (6.0)
<!DOCTYPE html>
<html>
<head>
<script>
function onGo(e) {
var fr = new FileReader();
var file = document.getElementById("file").files[0];
fr.onload = function(e) {
var data = new Uint8Array(e.target.result);
var blob = new Blob([data], {type: 'audio/mpeg'});
var audio = document.createElement('audio');
audio.addEventListener('loadeddata', function(e) {
audio.play();
}, false);
audio.addEventListener('error', function(e) {
console.log('error!', e);
}, false);
audio.src = webkitURL.createObjectURL(blob);
};
fr.readAsArrayBuffer(file);
}
</script>
</head>
<body>
<input type="file" id="file" name="file" />
<input type="submit" id="go" onclick="onGo()" value="Go" />
</body>
</html>
In Safari, neither callback (loadeddata nor error) is called.
The content used is an mp3 file, which is normally played back with audio tag.
Is there any special care needed for Safari?
Many years later, I believe the example in the OP should work just fine. As long as you somehow set the mime type when creating the blob, like the OP does above with the type property of the options passed in:
new Blob([data], {type: 'audio/mpeg'});
You could also use a <source> element inside of an audio element and set the type attribute of the <source> element. I have an example of this here:
https://lastmjs.github.io/safari-object-url-test
And here is the code:
const response = await window.fetch('https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Alexander_Graham_Bell%27s_Voice.ogg/Alexander_Graham_Bell%27s_Voice.ogg.mp3');
const audioArrayBuffer = await response.arrayBuffer();
const audioBlob = new Blob([audioArrayBuffer]);
const audioObjectURL = window.URL.createObjectURL(audioBlob);
const audioElement = document.createElement('audio');
audioElement.setAttribute('controls', true);
document.body.appendChild(audioElement);
const sourceElement = document.createElement('source');
audioElement.appendChild(sourceElement);
sourceElement.src = audioObjectURL;
sourceElement.type = 'audio/mp3';
I prefer just setting the mime type of the blob when creating it. The <source> element src attribute/property cannot be updated dynamically.
I have the same problem, and I spend a couple days troubleshooting this already.
As pwray mentioned in this other post, Safari requires file extensions for media requests:
HTML5 Audio files fail to load in Safari
I tried to save my blob to a file, named it file.mp3 and Safari was able to load the audio that way, but after I renamed the file to have no extension (just "file"), it didn't load.
When I tried the url created from the blob in another tab in Safari:
url = webkitURL.createObjectURL(blob);
it download a file right away called "unknown", but when I tried the same thing in Chrome (also on Mac), it showed the content of the file in the browser (mp3 files start with ID3, then a bunch of non-readable characters).
I couldn't figure out yet how I could force the url made of blob to have an extension, because usually it looks like this:
blob:https://example.com/a7e38943-559c-43ea-b6dd-6820b70ca1e2
so the end of it looks like a session variable.
This is where I got stuck and I would really like to see a solution from some smart people here.
Thanks,
Steven
Sometimes, HTML5 audio can just stop loading without any apparent reason.
If you take a look to the Media Events (http://www.w3schools.com/tags/ref_eventattributes.asp) you´ll see an event called: "onStalled", the definition is "Script to be run when the browser is unable to fetch the media data for whatever reason" and it seems that it should be helpful for you.
Try listening for that event and reloading the file if necessary, with something like this:
audio.addEventListener('onstalled', function(e) {
audio.load();
}, false);
I hope it helps!
Just use source tag in audio.
<audio controls>
<source src="blob" type="blobType">
</audio>