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.
Related
I have a project in asp.net core and I want to use offline map, Does open layer v6 support offline map?
I can't find an example, any one can help?
You need to download the ol.js and ol.css or use the link from the document.
Then you need to use bigemap to download the map file(png).
Put them in wwwroot, then reference them in layout.
<link href="./ol.css" rel="stylesheet" />
<script src="./ol.js"></script>
Select a place to put the map, and adjust the size.
<div id="map" class="map"></div>
Use js to draw this map.
<script type="text/javascript">
var map = new ol.Map({
target: 'map', //the id of map
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),//Set the map center
zoom: 4 //Default load level
})
});
var offLineMap = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'tile/a.png' // the map has been downloaded
})
});
map.addLayer(offLineMap);
</script>
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 am porting a chrome extension to firefox and want to keep as much code as possible. I am working with the sdk and I am new with JavaScript, so please bear with me if it is just a nooby mistake ;)
I need to get some stuff via a couple of XMLHttpRequests in content-scripts.
The "firefox-way" of doing things would be to use the sdk-request-api and work via messages between the main- and the content-script like so. Besides the fact that it would mean a lot of work for me to implement this throughout the whole addon, I also need to get binary data, which seems not to be possible.
The workaround for this is documented here. I would prefer to avoid this, since I think I read somewhere that it is a beta-feature right now and it seems to be pretty "work-aroundy".
Ideally I would like to implement it this way. In the upcoming Firefox 24 it should be possible to allow content scripts to access certain domains. Therefore I am using Firefox Aurora right now. I added the following code to my package.json:
"permissions": {
"cross-domain-content": ["http://mozilla.org"]
}
My main.js creates a panel when a button is clicked and loads the scripts into it:
var testPanel = require("sdk/panel").Panel({
contentURL: data.url("pages/background.html"),
contentScriptFile: [data.url("util/jquery-1.8.2.min.js"), data.url("pages/xhrTest.js")]
})
testPanel.show();
And this is my xhrTest.js:
var xhr = new XMLHttpRequest();
xhr.open("GET","http://mozilla.org",true);
xhr.onerror = function () {
console.log("Error");
};
xhr.onload = function () {
console.log("loaded");
}
xhr.send();
While debugging, it jumps from status 2 to 4 with an empty response and calls the "onerror". The status is 0, statustext is empty and I don't see any other indicators of what went wrong.
Now I don't know if this is still the same-origin-policy blocking me, or if I did something else wrong?
I'd really appreciate any help I can get :)
Thanks in advance,
Fabi
Hrm, I can't really see a glaring error. Here is an example add-on based on the docs that does work, at least it does for me in Firefox 24 Beta:
Main.js:
// main.js
var data = require("sdk/self").data;
var panel = require("sdk/panel").Panel({
height: 250,
contentURL: data.url("panel.html"),
contentScriptFile: data.url("panel-script.js")
});
panel.on("show", function(){
panel.port.emit("show");
});
require("sdk/widget").Widget({
id: "test-widget",
label: "Test-Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: panel
});
Panel.html:
<!doctype HTML>
<html>
<meta charset="utf-8">
<head></head>
<body>
<pre id="forecast_summary"></pre>
</body>
</html>
Content script:
// panel-script.js
var url = "https://hn-test.firebaseio.com/articles/e5b10c82600b51732af584583a7f57c4a7c01bff.json";
self.port.on("show", function () {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.onload = function () {
var element = document.getElementById("forecast_summary");
// formatting
var pretty = JSON.stringify(JSON.parse(request.responseText), null, ' ');
element.textContent = pretty;
};
request.send();
});
Package.json:
{
"name": "jp-crossdomain-xhr",
"fullName": "jp-crossdomain-xhr",
"id": "jid1-B2RaQxOBKox8wA",
"description": "a basic add-on",
"author": "",
"license": "MPL 2.0",
"version": "0.1",
"permissions": {
"cross-domain-content": ["https://hn-test.firebaseio.com"]
}
}
Github Repo
I would like to have a map on the contact page of my sub-domain at http://www.pedregoza.org/birds/contact.html. I have faithfully copied the code in the various examples for google maps, and done the style sheet in my .css. I have specified referral domains such as .pedregoza.org/birds/ etc, all to no avail. I am functional in html and I can edit java scripts when needed, but I find the google maps api to be very complicated, given that the internet is full of similar complaints to mine. Here is the error that I keep on getting: *Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key* And yes, I have generated a new key, enabled API v.3, and tried a bunch of other suggestions people have made. If I can't get this to work, then I guess google maps is only useful for static map displays, which is kind of sad. I was hoping people could zoom in and out of the map on our site. If anyone has a suggestion; I would be happy to try it. I know I am not alone with this problem.
First You must get your location Latitude and Longitude from :
http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false
try this html code in your page. str_lat and str_lng are your location.
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type='text/javascript' src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false>
</script>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(str_lat,str_lng);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:'Location!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas'/>
</body>
</html>;
I have Bing Maps on a page in my WinJS Windows 8 Application.
The Map has a few pins each with its own Infobox. When clicking on the pin it displays the infobox correctly with its content. The content contains a hyperlink that links to a different page in the Windows 8 Application. The app navigates to this page correctly, however the back button stops working and the App Bar can't be accessed either. (Navigating to the page normally works fine)
I think something goes wrong with how the page navigates and how the navigator records the state. I am new to this so it might also just be a stupid question.
Here is the code in the page's .js file:
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/testBing/testBing.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
}
});
})();
var pinInfobox = null;
function initMap() {
try {
var mapOptions =
{
credentials: "credentials",
center: new Microsoft.Maps.Location(-33.961176, 22.420985),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 5
};
var mapDiv = document.querySelector("#mapdiv");
map = new Microsoft.Maps.Map(mapDiv, mapOptions);
centerPosition();
}
catch (e) {
var md = new Windows.UI.Popups.MessageDialog(e.message);
md.showAsync();
}
}
function addPushPin(location) {
map.entities.clear();
var pushpin = new Microsoft.Maps.Pushpin(location, null);
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { title: 'My Pushpin', visible: true, description: "<a href='/pages/player/player.html'>Profile</a>" });
Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
map.entities.push(pushpin);
map.entities.push(pinInfobox);
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
function centerPosition() {
var geolocator = new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(function (loc) {
var mapCenter = map.getCenter();
mapCenter.latitude = loc.coordinate.latitude;
mapCenter.longitude = loc.coordinate.longitude;
map.setView({ center: mapCenter, zoom: 15 });
addPushPin(mapCenter);
});
}
function displayInfobox(e) {
pinInfobox.setOptions({ title: e.target.Title, innerHTML: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
pinInfobox.setLocation(e.target.getLocation());
}
The HTML just has the following
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!--Bing Mapps Reference -->
<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
<link href="testBing.css" rel="stylesheet" />
<script src="testBing.js"></script>
</head>
<body>
<div class="testBing fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to testBing</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="mapdiv"></div>
</section>
</div>
</body>
</html>
The comment by Dominic Hopton is correct: foo.html gets loaded as the whole page instead of as part of your app's navigation process. If the links are supposed to do an app navigation (as opposed to open in an external web browser), you can add this code to your page's ready function to convert the link click into a navigation event.
WinJS.Utilities.query("a").listen("click", function (e) {
e.preventDefault();
nav.navigate(e.target.href);
});
If you have some links that should navigate and some that should open in a browser, you can modify the query. For example, if can can add a CSS class to links that should open in a web browser, you could change the query to:
WinJS.Utilities.query("a:not(.defaultClick)")
You might also be able to modify the query to examine the href attribute of the link to check for "http" like so:
WinJS.Utilities.query("a:not([href^=http])")
I have not tested this last example yet, but if it works as I suspect it would, it would have a links that start with "http" (so including "https") behave normally, while all links that have a relative URL or a package URL will be converted to navigation events.
I don't recommend that you do this blindly, but depending on your app, this simple shortcut might change the behavior to match your expectations.