Magnific pop up for Google Maps not working on Chrome mobile. When triggered I get "Google Maps Embed API must be used in an iframe".
It works perfectly with the Google Maps URL given in the Magnific example but not when I use my own, I'm not sure if Google have changed their URL structure since but it looks like the new "embeded" URL is causing the problem.
Here's an example of the kind of URL I'm using: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2382.9841570555454!2d-6.227123684388949!3d53.32563697997466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670ec57aa7b09d%3A0x7965235d57af13f!2sClayton+Hotel+Ballsbridge!5e0!3m2!1sen!2sie!4v1453039698107
Is there a way I can change this URL to more like the working URL structure given in the example?: https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom
Been wracking my brains with this one....any help would be greatly appreciated!
Thanks!
David
I noticed this too. It's because Magnific Popup uses "maps.google." whereas Google now uses "www.google.". I had this which didn't work
https://www.google.co.uk/maps/place/Leathermarket+Gardens
and I changed it to
https://maps.google.com/maps?q=Leathermarket+Gardens
Which now works.
Hope that helps a little.
Google maps should be embedded in iframe in Magnific pop plugin
Sample:
View map
Because the right solution isn't listed here. The only thing you have to do is removing this attribute: disableOn: 700.
Keep only the code below:
$('.popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
Then it will works again.
PS: If you want to keep the new Google URL address form, you should change code inside jquery.magnific-popup.js library from:
gmaps: {
index: '//maps.google.',
src: '%id%&output=embed'
}
to:
gmaps: {
index: 'google.com/maps/',
src: '%id%'
}
Related
I've tried different kinds of embeds on my website but it doesnt seem to work. Can I still add a url and show it inside a vuejs website?
Yes we can use. The approach is iframe tag as
<iframe
src="url of live chat"></iframe>
Please use it
i want to know how to use google api, can anyone give some example using php.
eg. use api to get picasa album rss.
Any help is appreciated!
For that you have to embed the video in your html with an iframe and a url like this:
<iframe src="https://drive.google.com/file/d/{videoID}/preview" width="640" height="480"></iframe>
Just change the {videoID} for the id of you video.
To get that code from Google, you should follow the next steps:
Open the video in your Drive.
In the top right of the view, you will see an icon that says "Pop-out", Click on it.
It will open the video in a new tab.
In the new tab click on the icon of the three dots that says "More actions" (in the top-center).
Select the option that says "Embed item...". You will see a popup with html code.
In general, there is no way to "predict" or "construct" a direct link to your Drive file. The supported method of getting the link is to use the Drive API. If you make an HTTP request to the file metadata endpoint https://www.googleapis.com/drive/v2/files/{fileId} with a valid API key, the webContentLink value should be the googleusercontent.com URL for your file.
You can try this out on the Google API Explorer - drive.files.get to see all of the information which is available through the Drive API.
I have created a google+ share button ... https://developers.google.com/+/web/share/ ...
It works but it doesnt share any content ... only appear a pop-up share window => I write something into => and this text it share normal ... but not content of my page/ article ... do you know why?
in my body I have this ...
<div class="g-plus" data-action="share" data-annotation="none" data-height="24" data-href="http://localhost/welcome">ddd</div>
There is 2 kind of Google+ share button.You can use a very simple button to share anything.The properties Google+ gets from meta tags and canonical links.
Here is a link: http://www.w3docs.com/learn-javascript/google-share.html
The share button does not support prefilled text. It only supports sharing the current/specified URL.
The interactive posts API does support prefilled text but it also requires more setup to get working.
I got callback after share successfully with Facebook and Twitter.
Is it possible with Linkedin and Google Plus?
Google Plus Share :
href="https://plus.google.com/share?url={URL}"
Linkedin Share :
href="http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}"
Try Linkedin Share widget
Set callback function on onsuccess that fires when share successfully:
<script type="IN/Share+init" data-counter="top" data-url="your share Url" data-onsuccess="tracklinkedin"></script>
On tracklinkedin function:
function tracklinkedin(reponse) {
console.log('linkedin' + reponse);
//do here
}
Google Plus:
<div class="g-plus" data-action="share" data-annotation="top" data-href="your url" data-callback="trackgoogle" ></div>
function trackgoogle(reponse) {
console.log('Google Plus' + reponse.state);
if(reponse.state=='on')
{
$SS.TrackCount('googleplus')
//to do
}}
Just make your own button, with its own callback, and you can ditch the LinkedIn Share Button API SDK, JS Bundle, and inShare plugins. Some of these appear to already be outdated, deprecated, and to have known issues. All you really ought to need is...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then you can just make any button, using any HTML, CSS, or JavaScript that you like, and hyperlink it to allow sharing of a page. Since it's just a native button, you can control the callback however you like. And make a callback however you'd like...
HTML...
<a id="link" href="https://www.linkedin.com/sharing/share-offsite/?url={url}">Share on LinkedIn</a>
JS...
$('#link').click(function(e) { //callback stuff });
Source: Microsoft LinkedIn Share URL Documentation.
Google is probably a similar situation. If you are interested in a regularly maintained github project that keeps track of these URL formats so you don't have to, check it out! Social Share URLs
I'm using google's docs viewer to show a pdf document in a html page and I would like to open the document starting on page 20 instead of 1 for example.
There's hardly any documentation about Google's docs viewer service. They say in its webpage https://docs.google.com/viewer that the service only accepts two parameters (url and embedded) but I've seen other parameters searching the web, like "a", "pagenumber", "v" and "attid", none of them did anything to me. I've tried to add #:0.page.19 at the end of my url (that's the id of the div containing page number 20 inside the body google creates) but it just ignores it or works in a random way.
Do you guys know how to tell google docs viewer to show the document starting on a specific page?
I found a solution I'll post here just in case somebody is in the same situation.
Every page inside google's docs viewer iframe has an id like :0.page.X, being X the number of the page. Calling the service like this
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true#:0.page.20">
won't work (maybe because the pages ids are not yet created when the page is rendered?)
So you just have to add an onload attribute to the iframe:
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true" onload="javascript:this.contentWindow.location.hash=':0.page.20';">
and voilà, the iframe will automatically scroll down after loading.
Note that page indices are zero-based. If you want to view the 20th page of a document in the viewer, you would need use the parameter :0.page.19
I found these two ones :
1) just an Screenshot(Image) of specific page (without navigation):
https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true&a=bi&pagenumber=12
2) a link to specific page of PDF in IFRAME (with navigation):
<script>
var docURL='https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true';
var startPAGE=7;
document.write('<iframe id="iframe1" onload="javascript:go_to_page('+ startPAGE +')" src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"width="600" height="400" ></iframe>');
function go_to_page(varr) { document.getElementById("iframe1").setAttribute("src", docURL + '#:0.page.'+ (varr-1) );}
</script>
p.s. then you can have on your website go to page 3
For me this solution didn't work with the current version of google viewer. Link to specific page on Google Document Viewer on iPad helped me out. Use &a=bi&pagenumber=xx as additonal URL parameter.
Got it working in the imbed viewer
By changing the url with a timout function, this becous the pdf is not directly shown
$(window).load(function() {
setTimeout(function() { $('.gde-frame').attr('src', 'https://docs.google.com/viewer?url=http://yourdomain.com/yourpdf.pdf&hl=nl&embedded=true#:0.page.15'); }, 1000);
});
Just copy the imbed url and add your hash for the page (#:0.page.15 > will go to page 15)
You might want to change the language to your own &hl=nl
and for the people how have to support ie8
if you use a boilerplate like this:
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
you can change the output of the link directly to the pdf like this,
if( $("html").hasClass("ie8") ) {
$('#linkID').attr('href', 'http://yourdomai.com/yourpdf.pdf');
};
the pdf will be shown in the pdf reader from IE
My PDF is 13 pages, but when I used hash: 0.page.13, it only jumped to page 10. I had to setTimeout and call the same function again:
Only needed to do that once per page load, then it seems to be synched properly. I am sure there is a more elegant solution:
var is_caught_up = false;
function pdf_go(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
if (!is_caught_up){
setTimeout('pdf_catchup('+page+')', 500);
}
}
function pdf_catchup(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
is_caught_up = true;
}