How can i use google earth API with backbone.js+jquery mobile ?
I have created application using backbone.js, underscore.js and jQuery Mobile.
For google earth API, I am using sample code listed at https://developers.google.com/earth/documentation/#using_the_google_earth_api
My template rendering, and all other pages are working fine But when i load google earth API in one tag, it's not loading and in js console i get message: "ERR_INVALID_DIV ".
Google.earth module never calls back initCallback, It's always calls failureCallback when google.earth.createInstance is invoked.
I explain some sample code of mine application as under, so based on that may be you get my code structure and it helps you to solve my issue.
my js code as under,
myjs1.js
var ge;
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
console.log(' init call back call ');
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
console.log(errorCode);
}
Now my Backbone code as under,
myjs2.js
WebApp.MyPage= Backbone.View.extend({
initialize:function (result) {
this.template =_.template($('#myPage').html());
},
render:function (eventName) {
var self = this;
mydata = object dict of my data;
$(self.el).html(self.template({mydata:mydata}));
google.load("earth", "1");
init();
google.setOnLoadCallback(init);
}
Now my HTML code like as under,
<script type="text/template" id="myPage">
<div data-role="page">
<div data-role="content">
<div id="map3d" style="height: 400px; width: 600px;"></div>
</div>
</div>
</script>
myhtml.html
Is there any way to fix this?
Any help appreciated.
The Earth API works with the Google Earth Plugin, which is available only on Windows and Mac OSX. It is not available on mobile devices, sorry!
If you're testing on your Mac or Windows system, you should be able to get it working. The error code ERR_INVALID_DIV sounds like it isn't finding the map3d div. I would put a debugger; statement in the code just before the google.earth.createInstance() call, and then look around in the DOM inspector and see if map3d is in the DOM. It should be coming in from your template if that part is working.
But this won't help you when you try to load your site on a mobile device, because you won't have the Earth plugin available there.
Related
Im trying to implement google adsense ads and they aren't showing up, but when I inspect the area they are suppose to be it looks like they are there. Im working in a rails 5 app and I am using turbolinks, which Ive seen may cause issues. Heres the code in my project:
<div class: 'recipe-card-link'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout="image-top"
data-ad-layout-key="-90+2e-hl+fr+q4"
data-ad-client="ca-pub-****************"
data-ad-slot="8061638025"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
When I inspect the item it has a bunch of etc inputs and looks like it called the script and put everything there but nothing shows up. Its just a white space.
EDIT: Attached an image of what it shows when I inpsect (since I cant copy all of it)
1.- First, try changing:
script async to script async='async'
2.- Then use the following JS to run adsense.
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-YOURID",
enable_page_level_ads: true
});
//]]>
</script>
I'm trying to create a image upload with the kendo editor.
I'm always getting an error:
ReferenceError: uid is not defined
...==E&&(E=1),g?(b&&(A+=-b),w&&(I+=-w),e=new
Date(Date.UTC(F,D,E,A,I,H,N))):(e=new ...
kendo.web.min.js (Zeile 11)
I'm using jQuery 1.8.3 and kendoui.web.2013.1.319.open-source
My code is as follow:
<div id="example" class="k-content">
<textarea id="editor" rows="10" cols="30" name="reply-content"></textarea>
</div>
<script>
$(document).ready(function () {
$("#editor").kendoEditor({
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/images/ImageBrowser/Read",
destroy: "/images/ImageBrowser/Destroy",
create: "/images/ImageBrowser/Create",
thumbnailUrl: "/images/ImageBrowser/Thumbnail",
uploadUrl: "/images/ImageBrowser/Upload",
imageUrl: "/images/ImageBrowser/Image?path={0}"
}
}
});
});
</script>
Has someone experienced the same issue?
You are probably returning a list of string, but the editor is waiting for an json result (name, type, size). You can check the demo with a sniffer to see what kind of results is expected from read/thumbnail, etc. Not very sure if you really must implement an server class for Kendo's client equivalent, but, by default, the result for Read is expected as Json for sure.
New finaly i got it to work. I used some workarounds but see your self.
You can also test the functionality on the site: http://jonas.dnsd.me/forum/topic?id=113
But stil it has some bugs like the url: /imageBrowser/?path=/image.jpg. I remove '/?path=' with a javascript function, but it works just for 3 images.
If you upload a image the window will not refreseh.
I would appreciate some ideas about the issues.
Now it is working like a charm ... see at http://jonas.dnsd.me/forum/topic?id=113
I updated to new source code
i'm building a mobile app using jquery mobile and phonegap (Apache Cordova), the problem is that first i need to make a DB query before i decide which page i want to load first, if it's the "login" page or the "main page".
Based on the phonegap documentation i need to bind the "deviceready" event to know when the device is ready and then make the DB queries.
document.addEventListener("deviceready", onDeviceReady, false);
The function called "onDeviceReady" creates the DB if it's not created and then makes a query to a table named "users" and if there is one or more users i wan't to show a page named "main.html" otherwise a page named "login.html".
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
Basically, the problem is that while this functions are executed the first page is loaded because the following code is executed before the "onDeviceReady" function is called:
$(document).bind( "mobileinit", function(){
$.mobile.listview.prototype.options.filterPlaceholder = "Buscar...";
//-> patch for phonegap
$.mobile.allowCrossDomainPages = true;
$.mobile.page.prototype.options.backBtnText = "atrás";
});
$( document ).bind( "pagebeforeload", function( event, data ){
// here i think i would say to phone gap not to load any page until i make the db queries
//i think i can't make the DB queries here because the "pagebeforeload" is launched before the "deviceready" function
});
If the code of the first page according to the DOM in ASC order this page is loaded:
<div data-role="page" id="page-init">
<div data-role="header" data-theme="c" data-position="fixed">
<h1>Init page</h1>
</div><!-- /header -->
</div>
If i change the page to "main.html" using $.mobile.changePage("main.html"); once i checked if there is one or more user records on the "users" table, the "page-init" page is loaded first and then the "main.html" and i don't want this because the user can se a kind of flash.
I just want decided once i checked to the "users" table which page is going to be displayed first.
I learned the following here on stackoverflow but i can't find the answer anymore so i will answer it myself:
in the end of your index:
$(document).bind("mobileinit", onMobileInit);
$(document).ready(onPageLoad);
in any JS file or script tag in index:
function onMobileInit() {
console.log("mobile init");
$.mobile.autoInitialize = false;
}
function onPageLoad() {// Document.Ready
console.log("document ready");
try {
if(someCondition) {
document.location.hash = "#profile";
} else {
document.location.hash = "#signIn";
}
} catch (exception) {
} finally {
$.mobile.initializePage();
}
}
P.S. you can put the init code somewhere else, but a loading screen would be better since it is a db call, i use the browser storage which is way way faster i think
It sounds like this can be solved with a loading screen.
Just create your first page as a loading screen then check your database and load the correct page based on the database results. You can even add the JQM spinner to tell your user that something is going on.
This question is old, however I can say that for me just assigning the hash you want to document.location.hash, for example document.location.hash = "#profile";, without the mobile initialization procedures worked fine. You need to do this before document.ready() is run.
I have a subpage in a jquery mobile page where I'd like to insert att Google adwords conversion cookie. But using the traditional snippet from Adwords doesn't work. On Android it even makes the page go blank.
Anyone done this before?
You are probably loading the conversion script later on the page by doing something like this:
(function(){
var s=document.getElementsByTagName('script')[0];
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.googleadservices.com/pagead/conversion.js';
s.parentNode.insertBefore(ga,s);
})();
Or using a jQuery function to load scripts that is similar to the function above. Turns out that you can't include the conversion.js script in this manner because it uses document.write to write the img tag on the page. Because it uses document.write some browsers will remove everything from the page and replace the content with the output of document.write, which in this case is an empty gif.
You better use the default tag provided by google to mark a conversion. If you need to load it without a page refresh just open an iframe to a page that contains this tracking code.
<script type="text/javascript">
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "Purchase";
if (10.0) {
var google_conversion_value = 10.0
}
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="http://www.googleadservices.com/pagead/conversion/1234567890/?value=10.0&label=Purchase&script=0">
</noscript>
Of course this is just an example. You should use your own code that have your unique conversiod_id.
I researched this a bit, and came across the following links:
http://www.google.com/ads/mobile/publishers/web-publishers.html
https://support.google.com/adsense/bin/answer.py?hl=en&answer=185668
So it looks like depending on the type of ad you're running, you will have to get a customized unit for mobile.
However, I am still not sure why the page would go blank. I mean, I can totally see how some ad code does that when you try to lazy-load it, but I'm not sure why it happens in your situation.
I am using the new v3 of the Google Maps API. Basically the issue I have is that I have a Google Map within jQuery UI Tabs. The map is not in the first tab, so you have to click the tab to view the map, but it does not always render correctly. I.e. sometimes the map images are not correctly placed.
I had this problem when I was using v2 of the API, but I managed to resolve the problem by initializing my Map like this:
map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});
Unfortunately that doesn't work in v3. I had a look at the suggestions in this thread: Problems with Google Maps API v3 + jQuery UI Tabs
Nothing really worked for me, but I used one of the workarounds in that I initialize the map function on tab load:
$(function()
{
$("#tabs-container").tabs({show: function(event, ui)
{
if(ui.panel.id == "viewmap")
{
mapiInitialize();
}
}});
});
This is all good but I much rather prefer for the map to be "there" when the user clicks on the tab. It sometimes takes a few seconds for the map to load up and all the user see's in that time is a plain gray background - some sort of loading indicator might have helped.
So does anybody have any suggestions? My markup and CSS is as follows:
<div id="tabs-container">
<ul>
<li><span>Details</span></li>
<li><span>Location Map</span></li>
<li><span>Reviews (<?php echo $numrows; ?>)</span></li>
</ul>
<div id="details"><?php echo $details; ?></div>
<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
<div id="map" style="height: 340px;"></div>
</div>
<div id="reviews"><?php echo $reviews; ?></div>
</div><!-- end tab-container -->
Try this when you are initializing your jQuery UI tabs:
$("#tabs-container").tabs({
show: function(event, ui) {
google.maps.event.trigger(map, 'resize');
}
});
Note: You will have to initialize the map before you initialize the tabs.
Once you switch to the tab that has the map call google.maps.events.trigger(map, 'resize'); that should then make it display correctly.
just use
map.setZoom( map.getZoom() );