I have been trying to do this for a while with no result, can anyone tell me a way to hide the address bar on a this google maps iFrame?
I have tried to hide it in our css using display:none; and this works when I inspect the element and change it there but whenever I add it into our css it just isn't having it!
<iframe src="https://www.google.com/maps/d/embed?mid=1bJn0zvKIJibY51hlco4ZbOBGek4" width="640" height="480"></iframe>
this is the class for it, and when I change this here it works and no address bar is there but changing it in our style sheet wont change it.
we are using wordpress if thats and consolation.
Due to some policy crap you can't change the CSS of an iframe which domain isn't the same as your website is... But try integrate the Google map with JavaScript.
Here's the Google reference: https://developers.google.com/maps/documentation/javascript/adding-a-google-map
Good luck :)
Related
When the user uploaded any pdf files to the website for displaying purposes I am using iframe component.
Here is the sample screenshot
Here is my iframe code
<iframe
onLoad={this.showIframe}
className='iframe'
src={attachmentUrl}
height='97%'
width='100%'
title='document'
/>
and this is the related CSS code
.iframe{
pointer-events: auto;
}
I want to disable only the hyperlinks in the pdf (which is coming from src) and when I turned the above CSS code
pointer-events: none automatically disables all the options like download, print, zoom in, zoom out.... but I want to disable only text in the pdf. Is there any way to disable the hyperlinks in the src prop? instead of disabling entire hyperlinks in the iframe or please suggest me the better approach to resolve the issue.
Please help me to resolve this issue as I am completely new to iframe.
Thanks in advance
Square up provides a couple different ways to add appointment booking to an external website. I am working with a Wordpress site with Elementor using the Astra theme, and I've attempted to create a shortcode with the following snippet. What happens is that the Square appointments takes up the entire preview pane of the editor, so I can't edit the rest of the page, or even access the shortcode/remove it.
<!-- Start Square Appointments Embed Code --><script src='linkhere'></script><!-- End Square Appointments Embed Code -->
I was able to get the calendar on WordPress by just adding the URL source in an iframe, like below, but the problem is it doesn't show up on mobile (at least on Google Chrome). On desktop, a static height is needed to display properly.
<iframe
height="1800px" src="linkhere">
</iframe>
What all can I do to address these problems? I need this embedded, but I need to be able to continue making changes to the web page in the editor. I tried templating it, but it will still render, even in a template. I tried using CSS to fix the width/height, no success. :-(
Please help me!
I am using Google Forms, get an and then I embed into my website code,
I want to custom the form's background, make it transparent.
I am using JQuery,It can read the object create by iframe from google, but if I want to change its class 'ss-form-container's css, it failed.
Can someone show me how to apply CSS to google docs's iframe?
Here is the Link to my test website: http://dive.maxinrui.com/ The questionary is on third slide.
Thanks in advanced!
You can't. Frames are not allowed to interact with each other unless they have the same origin. Since the origin of the Google Docs frame is docs.google.com while your page's main frame is on dive.maxinrui.com, you cannot "touch" the contents of the frame, so there is no way for you to apply your CSS to it.
You can apply some styling to a Google Docs form by applying a theme to it in Docs. If you need more control than that, though, you will need to find another solution.
This would be a workaround solution (if it works).
Would it be viable to copy the form source code from the Google Docs page in the iframe, embed it into your own page, then modify the CSS?
Is it possible to embed google map with custom markers to a website just by iframe? I have google map on my website with markers and everything is working with some functions in javascript. It's okay but now I want to enable some users to add same map with same markers to their website. I want to do it very easy and with less code possible. So I want to give code to users that they add to site and everything would work. Is it possible with just iframe tag? Or I must give users code in javascript too? Or is there another way? Thanks
You may use Mapsengine to create the map, they may easily be shared via iframe. But there is no option to apply custom script-code.
Another approach: use a script-file that contains the code used with the map and that also creates the map. The users may embed this script instead of an iframe, the sharing would be as simple as when you would use an iframe.
On home page of my site there is google map embedded. Size of google maps is 55mb because there are 100 markers on it and every marker have image in it(in info window).
I am using following to embed it in site
<iframe width="1070" height="460" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps/ms?msa=0&msid=211583848080531580036.0004e201d8a2ad13f0895&hl=en&ie=UTF8&t=m&ll=12.993442,79.125969&spn=22.947419,49.509262&output=embed"></iframe><br />
I do not want to load content of all marker at once.
I have done this in one of joomla site using this code in custom html article(of Joomla)
{mosmap msid='211583848080531580036.0004c74a22231f20dfa00'|lat='19.997023 '|lon='73.790102'|width='900'|height='650'|zoom='12'}
How to use above code in site which is not on Joomla CMS.
Or
Is there other way to load google map without loading its markers content at once(on page load)?
Are you just using an iFrame with a link to google maps in your website? If so you're going about it completely the wrong way. Quite apart from using the evil iFrame (I don't like them at all, if you hadn't guessed ;) ), you have no control over the map whatsoever - the script on the website you're linking to controls the map, you're simply displaying their map to the user.
Try looking at this to see how you can have your own map on your website which you control with your script.
Of course, it's entirely possible that I've misunderstood your question. If so, please let me know and I'll try to help!