I'm very happy about what I'm able to do using Google model-viewer. It's relatively configurable, but there's more I'd like to be able to do with the camera-- for instance, setting a max zoom/min distance from the target. I've found code that seems to suggest how to modify this, but I don't know how to override the script delivered via the CDN. Is my only option to download using npm?
Excuse my naivete!
You can see this issue Zoom in/out #1172
Now it's possible to use camera control settings:
max-camera-orbit
min-camera-orbit
max-field-of-view
min-field-of-view
model-viewer(
src="https://cwervo.com/assets/3D-models/logo.glb" ios-
src="https://cwervo.com/assets/3D-models/logo-3m-scaled.usdz"
auto-rotate
camera-controls
min-camera-orbit='auto auto 100%'
max-camera-orbit='auto auto 100%'
min-field-of-view='110deg'
max-field-of-view='110deg'
)
Source: https://codepen.io/schmidtsonian/pen/VwvEwVw
I'm the maintainer of the <model-viewer> project. You aren't crazy; we haven't added the ability to control this yet.
But don't worry! We are planning to add this feature to a release very soon (currently planned for v0.7.0). Please track https://github.com/GoogleWebComponents/model-viewer/issues/458 for progress!
[edit] Also to answer your question about NPM: you can download the module from NPM and assemble a customized version of the pieces that make up <model-viewer>. Also, you could fork the project and patch it that way. I don't necessarily recommend these things, but they are options if you are desperate. If you go this route, I highly recommend asking questions on our Github project page. We are friendly and responsive to everyone.
I am facing an issue in Google API regarding charts.apis.google.com
and
Failed to load resource: the server responded with a status of 502 ()
GET https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=15|acb7bf|FFFFFF 502
Due to this, my location markers are not showing up on the map.
On my live site clients are facing this issue.
I do not know what is the exact issue. Payments are clear, everything is ok.
Please suggest a quick solution for this.
I read 1 post on the google forum.
https://groups.google.com/forum/#!topic/google-visualization-api/1xT15iybzQ4
Please help me out with this issue.
Much appreciated.
Or any alternative solution.
Thanks
I had this same issue. I was using something like this below to set an different colored image for the Marker.
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/•/" + "d3d3d3" + "/");
This was reliant on googlemapsmarkers.com and is no longer working. As soon as I do not use this site to help with the MarkerImage then all is fine
Looks like this has been deprecated
https://developers.google.com/chart/image/docs/gallery/dynamic_icons
Please note that this issue has been recognized in the Issue Tracker via Issue #128905669, there is also an alternative solution offered by one of the support from Google which is to use https://www.image-charts.com/
I am creating a Website using HTML5 and CSS3 myself. I am using jquery.tweet.js javascript file for showing my twitter feed into my website. And, I added below jQuery code into my body element:
<script>
jQuery(document).ready(function($) {
$('#latest-tweets').tweet({
username: 'sumonbdinfo',
count:1,
loading_text: "loading tweets..."
});
});
</script>
But, in my website is only now showing "loading tweets..." text, not showing my Twitter Feeds anymore.
Also, I added the jquery.tweet.js file into my head element and added jquery into my head element. But, still it's not showing on my website.
Should I put the above code into my head element of my website or I just added it in right place?
I pasted below the jquery.tweet.js file what I'm using for showing tweets on my website.
(function(a){a.fn.tweet=function(c){var n=a.extend({username:null,list:null,favorites:false,query:null,avatar_size:null,count:3,fetch:null,page:1,retweets:true,intro_text:null,outro_text:null,join_text:null,auto_join_text_default:"i said,",auto_join_text_ed:"i",auto_join_text_ing:"i am",auto_join_text_reply:"i replied to",auto_join_text_url:"i was looking at",loading_text:null,refresh_interval:null,twitter_url:"twitter.com",twitter_api_url:"api.twitter.com",twitter_search_url:"search.twitter.com",template:"{avatar}{time}{join}{text}",comparator:function(p,o){return o.tweet_time-p.tweet_time},filter:function(o){return true}},c);var b=/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;function l(q,r){if(typeof q==="string"){var o=q;for(var p in r){var s=r[p];o=o.replace(new RegExp("{"+p+"}","g"),s===null?"":s)}return o}else{return q(r)}}a.extend({tweet:{t:l}});function f(p,o){return function(){var q=[];this.each(function(){q.push(this.replace(p,o))});return a(q)}}function k(o){return o.replace(/</g,"<").replace(/>/g,"^>")}a.fn.extend({linkUser:f(/(^|[\W])#(\w+)/gi,'$1#$2'),linkHash:f(/(?:^| )[\#]+([\w\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0600-\u06ff]+)/gi,' #$1'),capAwesome:f(/\b(awesome)\b/gi,'<span class="awesome">$1</span>'),capEpic:f(/\b(epic)\b/gi,'<span class="epic">$1</span>'),makeHeart:f(/(<)+[3]/gi,"<tt class='heart'>♥</tt>")});function e(p,o){return p.replace(b,function(s){var r=(/^[a-z]+:/i).test(s)?s:"http://"+s;var u=s;for(var t=0;t<o.length;++t){var q=o[t];if(q.url==r&&q.expanded_url){r=q.expanded_url;u=q.display_url;break}}return''+k(u)+""})}function j(o){return Date.parse(o.replace(/^([a-z]{3})( [a-z]{3} \d\d?)(.*)( \d{4})$/i,"$1,$2$4$3"))}function h(o){var q=(arguments.length>1)?arguments[1]:new Date();var s=parseInt((q.getTime()-o)/1000,10);var p="";if(s<1){p="just now"}else{if(s<60){p=s+" seconds ago"}else{if(s<120){p="a minute ago"}else{if(s<(45*60)){p=(parseInt(s/60,10)).toString()+" minutes ago"}else{if(s<(2*60*60)){p="an hour ago"}else{if(s<(24*60*60)){p=""+(parseInt(s/3600,10)).toString()+" hours ago"}else{if(s<(48*60*60)){p="a day ago"}else{p=(parseInt(s/86400,10)).toString()+" days ago"}}}}}}}return"about "+p}function g(o){if(o.match(/^(#([A-Za-z0-9-_]+)) .*/i)){return n.auto_join_text_reply}else{if(o.match(b)){return n.auto_join_text_url}else{if(o.match(/^((\w+ed)|just) .*/im)){return n.auto_join_text_ed}else{if(o.match(/^(\w*ing) .*/i)){return n.auto_join_text_ing}else{return n.auto_join_text_default}}}}}function d(){var p=("https:"==document.location.protocol?"https:":"http:");var o=(n.fetch===null)?n.count:n.fetch;var r="&include_entities=1&callback=?";if(n.list){return p+"//"+n.twitter_api_url+"/1/"+n.username[0]+"/lists/"+n.list+"/statuses.json?page="+n.page+"&per_page="+o+r}else{if(n.favorites){return p+"//"+n.twitter_api_url+"/favorites/"+n.username[0]+".json?page="+n.page+"&count="+o+r}else{if(n.query===null&&n.username.length==1){return p+"//"+n.twitter_api_url+"/1/statuses/user_timeline.json?screen_name="+n.username[0]+"&count="+o+(n.retweets?"&include_rts=1":"")+"&page="+n.page+r}else{var q=(n.query||"from:"+n.username.join(" OR from:"));return p+"//"+n.twitter_search_url+"/search.json?&q="+encodeURIComponent(q)+"&rpp="+o+"&page="+n.page+r}}}}function m(o,p){if(p){return("user" in o)?o.user.profile_image_url_https:m(o,false).replace(/^http:\/\/[a-z0-9]{1,3}\.twimg\.com\//,"https://s3.amazonaws.com/twitter_production/")}else{return o.profile_image_url||o.user.profile_image_url}}function i(p){var q={};q.item=p;q.source=p.source;q.screen_name=p.from_user||p.user.screen_name;q.avatar_size=n.avatar_size;q.avatar_url=m(p,(document.location.protocol==="https:"));q.retweet=typeof(p.retweeted_status)!="undefined";q.tweet_time=j(p.created_at);q.join_text=n.join_text=="auto"?g(p.text):n.join_text;q.tweet_id=p.id_str;q.twitter_base="http://"+n.twitter_url+"/";q.user_url=q.twitter_base+q.screen_name;q.tweet_url=q.user_url+"/status/"+q.tweet_id;q.reply_url=q.twitter_base+"intent/tweet?in_reply_to="+q.tweet_id;q.retweet_url=q.twitter_base+"intent/retweet?tweet_id="+q.tweet_id;q.favorite_url=q.twitter_base+"intent/favorite?tweet_id="+q.tweet_id;q.retweeted_screen_name=q.retweet&&p.retweeted_status.user.screen_name;q.tweet_relative_time=h(q.tweet_time);q.entities=p.entities?(p.entities.urls||[]).concat(p.entities.media||[]):[];q.tweet_raw_text=q.retweet?("RT #"+q.retweeted_screen_name+" "+p.retweeted_status.text):p.text;q.tweet_text=a([e(q.tweet_raw_text,q.entities)]).linkUser().linkHash()[0];q.tweet_text_fancy=a([q.tweet_text]).makeHeart().capAwesome().capEpic()[0];q.user=l('<a class="tweet_user" href="{user_url}">{screen_name}</a>',q);q.join=n.join_text?l(' <span class="tweet_join">{join_text}</span> ',q):" ";q.avatar=q.avatar_size?l('<a class="tweet_avatar" href="{user_url}"><img src="{avatar_url}" height="{avatar_size}" width="{avatar_size}" alt="{screen_name}\'s avatar" title="{screen_name}\'s avatar" border="0"/></a>',q):"";q.time=l('<span class="tweet_time">{tweet_relative_time}</span>',q);q.text=l('<span class="tweet_text">{tweet_text_fancy}</span>',q);q.reply_action=l('<a class="tweet_action tweet_reply" href="{reply_url}">reply</a>',q);q.retweet_action=l('<a class="tweet_action tweet_retweet" href="{retweet_url}">retweet</a>',q);q.favorite_action=l('<a class="tweet_action tweet_favorite" href="{favorite_url}">favorite</a>',q);return q}return this.each(function(p,s){var r=a('<ul class="tweet_list">');var q='<p class="tweet_intro">'+n.intro_text+"</p>";var o='<p class="tweet_outro">'+n.outro_text+"</p>";var t=a('<p class="loading">'+n.loading_text+"</p>");if(n.username&&typeof(n.username)=="string"){n.username=[n.username]}a(s).bind("tweet:load",function(){if(n.loading_text){a(s).empty().append(t)}a.getJSON(d(),function(u){a(s).empty().append(r);if(n.intro_text){r.before(q)}r.empty();var v=a.map(u.results||u,i);v=a.grep(v,n.filter).sort(n.comparator).slice(0,n.count);r.append(a.map(v,function(w){return"<li>"+l(n.template,w)+"</li>"}).join("")).children("li:first").addClass("tweet_first").end().children("li:odd").addClass("tweet_even").end().children("li:even").addClass("tweet_odd");if(n.outro_text){r.after(o)}a(s).trigger("loaded").trigger((v.length===0?"empty":"full"));if(n.refresh_interval){window.setTimeout(function(){a(s).trigger("tweet:load")},1000*n.refresh_interval)}})}).trigger("tweet:load")})}})(jQuery);
So, please help me anyone how may I fix this issue? It would be really very helpful for me man. Waiting for anyone answers here!
You cannot continue using the seaofclouds tweet.js and expect to pull tweets like you used to last month. The cause of this was that twitter 1.0 api was recently replaced with 1.1 - https://dev.twitter.com/blog/api-v1-is-retired. The author of jquery.tweet.js talks about the API changes and the state of his plugin here: https://github.com/seaofclouds/tweet/#important-note-about-twitters-api-changes-in-2013 and a separate discussion can be found here: https://github.com/seaofclouds/tweet/issues/264 with an alternative (which works) - https://github.com/StanScates/Tweet.js-Mod.
Tweet.js-Mod is a modified version of the original jquery.tweet.js and uses a php script to access twitter's API version 1.1.
Installation instructions can be found here: https://github.com/StanScates/Tweet.js-Mod#how-to-use
Looks like this is a major change to how Twitter is handling requests, version 1.0 of their API allowed unauthenticated requests, but now that has changed where Twitter is pushing developers to use their embedded timelines, which requires authentication.
Discussion of Twitter transition from v1.0 to v1.1
Let me warn you about using the https://github.com/StanScates/Tweet.js-Mod#how-to-use
It works perfectly but some of your clients where the website runs may have this ERROR
ERROR:
XMLHttpRequest cannot load http://api.getmytweets.co.uk/?screenname=philipbeel&limit=5&undefined=undefined. Origin http://plugins.theodin.co.uk is not allowed by Access-Control-Allow-Origin.
Also this method does not use the Oauth method and your security can be compromised. Twitter highly discourages the uses of client side authentication.
Your solution has 2 parts
Use a php based Oauth Script to retrieve you tweets in JSON format
Using Jquery format the JSON and show it into your website
SIMPLE AND SECURE.
HERE IS A COMPLETE TUTORIAL
http://www.webdevdoor.com/javascript-ajax/custom-twitter-feed-integration-jquery/
This method seems to have stopped working.
App code was tested thoroughly last week and all was well. This morning...scrollbars are appearing on our page tab apps.
Example:
http://www.facebook.com/HondaPowersports/app_329359370439338
Very simple code on this page - it is all static HTML with just one FB method call:
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 810, height: 975 });
}
Anyone else with this same problem? Any ideas?
According to the documentation (FB.Canvas.setSize):
Note: this method is only enabled when Canvas Height is set to "Settable (Default: 800px)" in the Developer App.
Has someone modified the settings of your Facebook app? If it's not configured as stated above then it stops working.
it seems to me it is deprecated and you have to use setAutoGrow... not sure , take a look :)
Related bug: http://developers.facebook.com/bugs/322561887802154
I'm having a problem with getting my Google Maps API key to work. I originally had the problem when trying to access http://dev.domain.com using a key generated for http://domain.com, however I subsequently tried generating a key for http://dev.domain.com and it still didn't work.
I get the typical This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/. alert message when trying the site. Checking their FAQ and following it's instructions to alert(window.location.host) to check the domain returns dev.domain.com which looks correct (unless it's meant to have http:// at the start? In which case I don't see how I've done something wrong).
Both keys (dev.domain.com and domain.com) work correctly on localhost.
Does anyone have any ideas on what I can do to solve this or any further tests I can do to work it out?
I came across this question as I was just now beating my head against this same issue. I finally noticed that the code Google provided for linking to the API was different from what I'd been using. I replaced this
<script type="text/javascript" src="http://www.google.com/jsapi?key=___">
</script>
<script type="text/javascript">
google.load("maps", "2.x", { "language": "en" });
</script>
with this
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=___">
</script>
and the error went away.
I was having the same problem and it turned that i was doing 2 calls to the http://www.google.com/jsapi url. The first one for adsense (without the key parameter) and then the second one for google maps with the key. Pretty stupid mistake but the result is that the although you put the key on the second call it doesn't use it.
I was getting the same problem and when i look at src part i found that my querystring part of src is wrong.
<script src="http://maps.google.com/maps?file=api&v=2&&hl=en;key=MY_API_KEY&sensor=true"
type="text/javascript"></script>
I clearly typed wrong querystring part. &\amp;&hl=en;
I put & to wrong place. Then i changed my wrong syntax with a correct one
<script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=MY_API_KEY&sensor=true"
type="text/javascript"></script>
And voila it worked.
Google Maps APi not working in Firefox and IE but working in Chrome and Safari
CSS-Bug
Hi everyone, this is slightly off-topic, but since it cost me a whole day to figure this out i want to share it.
I had the above mentioned problem. The maps would load but except for the google log and terms of use, the map was just grey.
SOLUTION
somewhere in a parent css i had following cod:
#content * {
max-width: 100%;
}
removing it solved the problem;
hope this helps
After going through their FAQ i found that if we want our subdomains to enable Google map we have to request the API for http://domain.com/ (without www) . it worked for me.
Happy coding.
I've been fighting key issues for the last couple of hours. Was working on localhost, but not on my local network address or a domain name. I solved the issue by changing v=2 to v=2.x. I haven't tried 2.s. Also adding alert(window.location.host) for both my localhost address and domain name to a Browser Key in google's api console for maps v2.
As said in my comment I ended up using the v3 API as this never ended up being solvable.
I had the same problem when I added line breaks to the src element for readability:
<script src="http://maps.google.com/maps?file=api&
v=2&
key=ABQ...BlaBlaBla...cVw"
type="text/javascript" />
Removing the line breaks from the src element solved the problem:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQ...BlaBlaBla...cVw"
type="text/javascript" />