Below is my google maps code which embeds a google map iframe into my website. However I need to know which part of the code gets rid of the description bubble as it is in the way and looks awful.
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps/embed/v1/vie?f=q&source=s_q&hl=en&geocode=Fef8HgMdTF8HACGtndVv4fvEAykHADl3VT_YRzGtndVv4fvEAw%3BFf-gHwMdtnoIACG4YnecgIb83ykH1S7ttDnYRzG4YnecgIb83w&q=mildenhall+to+raf+lakenheath&aq=&sll=52.387544,0.494041&sspn=0.099739,0.244446&ie=UTF8&ll=52.378862,0.524008&spn=0.035347,0.068778&t=m&saddr=mildenhall&daddr=raf+lakenheath&output=embed/v1/view"></iframe>
'&iwloc=near' no longer works with the new google api.
Thanks in advance
This answer :
Google Maps Embed - Remove Place Card
has a method of using a container div with overflow:hidden and a negative margin on the iframe to chop off the top containing the description bubble.
Just Add :
&iwloc=near in iframe src
Used like this:
<iframe width="400" scrolling="no" height="300" frameborder="0" src="https://maps.google.co.uk/maps?hl=en&q=so21+1aj&z=10&output=embed&iwloc=near" marginwidth="0" marginheight="0"></iframe>
Using jQuery I removed the bubble, from actual version of / place autocomplete version / google maps, modyfing one original function:
autocomplete.addListener('place_changed', function() {
// ... the function code, before it's closing
// tag I added 3 lines: //
$("div[class='gm-style-iw']").prev('div').remove(); // bubble
$("div[class='gm-style-iw']").next('div').remove(); // close button
$("div[class='gm-style-iw']").remove(); // text
});
it is also necessary to attach the jQuery library
Related
I'm hoplessly trying to remove the title of my Google Sheet that is embed on my webpage (by Webnode). I've already tried adding &chrome=false to the link, but then it doesn't work (it says that it can't load the document). Where should I put that in the code? Or what's the way of removing the title?
Here's the code:
<iframe width="90%" height="420" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRERjtiSWcFvm5gtyyfJbsb83RD3Du9-hUCWwMiSo4AaFDEbe1nyn_vFYVsyE5XqryBdvMsNY3EV6Vs/pubhtml?widget=true&headers=false"></iframe>
Hahaha, I resolved my second issue in a row. :D
For some reason, webnode added that "&" something at the end of "chrome=false", and now it is working!
<iframe width="90%" height="420" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRERjtiSWcFvm5gtyyfJbsb83RD3Du9-hUCWwMiSo4AaFDEbe1nyn_vFYVsyE5XqryBdvMsNY3EV6Vs/pubhtml?widget=true&&chrome=false&headers=false"></iframe>
I want to add a position from google map in my project using this code
<div class="map">
<iframe src="https://myurl"></iframe>
</div>
but it didn't work. I receive the message error msg:google n'autorise pas la connexion
use google map guide https://developers.google.com/maps/documentation/javascript/adding-a-google-map instead of using <iframe> and it is considered a bad practice due to securtiy concerns
If you would like to use an iframe, you can use the Maps Embed API. On the link, you can put your address and it will generate an iframe snippet for your address. Please note that you need to have API key included as the value of your key parameter.
Here is a sample snippet that you can use:
<div id="map">
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJB6jLlpY0_RIRMfzxHQUfogc&key=PUT_YOUR_API_KEY_HERE" allowfullscreen></iframe>
</div>
Hope this helps!
I want to solve the problem in Google Map when I do z-index: -1 Do not activate the map but the div is above the map as I want ... I want to activate the map with the div remains above the map
<div id="map" style="z-index: -1;"></div>
<div id="filter-div-for-sale-mobile" style="transform-origin: left 78.5px;top: 39px;left: -273.61px;width:360.5px;" class="zsg-popover_arrow-up zsg-popover-adjustable popover-thick-top popover-no-close popover-visible filter-button-popover listing-type-popover">
I would recommend using the iframe option provided by Google as it is much more controllable in regards to the CSS styling perspective of making it responsive on a page.
Sample of what I mean. (the width and height for the iframe attribute aren't required)
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?zoom=10¢er=51.5074%2C-0.1278&key=..." allowfullscreen></iframe>
It could be helpful to include the position of your element (fixed,relative or absolute ) etc.
Also what browser are you using?
I will try and be as thorough with my question as possible the first go round. My question is this:
I am trying to embed a Vimeo video on to Blogger that plays at a specific timestamp, i.e. 4mins 32secs, instead of the beginning of the video without it autoplaying. The video will embed fine at the timestamp but it will autoplay and I cannot figure out how to turn that feature off. The code for the video is below:
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s" webkitallowfullscreen=""width="500"></iframe>
I have tried various methods "?autoplay=0" etc. but I guess I am not getting the code right.
Any help would be greatly appreciated
have you tried like this ?
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s?autoplay=0" webkitallowfullscreen=""width="500"></iframe>
if it didn't work then try to find it by inspect element, it may be changed to ?autopplay=1 after page load,
so try this method it worked for me
first your html, paste a screenshot of your vimeo video in an image tag and define an onclick function for that and bind iframe on click function,it should work
here is the code
<div id="parent-div" >
<img id="vimeo-video" src="images/homeVideo.png" onclick="return imgClick();" />
</div>
and your javascript function
function imgClick() {
jQuery('#image-for-video').hide(); //hide the image to display your video
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://player.vimeo.com/video/1992892829?autoplay=0");
ifrm.style.width = "496px";
ifrm.style.height = "277px";
// add rest of your values
ifrm.frameborder = 0;
document.getElementById("parent-div").appendChild(ifrm);
return false;
}
How do I open an iframe in a new window? I tried with "scrolling='auto'". It did not work.
I put my code here:
<iframe width="572px" scrolling="auto" height="335px"
frameborder="1" src="http://XXXX.com/iframe-page"
style="border: 0px none #ffffff;" name="national-campaign"
marginheight="0px" marginwidth="0px">
</iframe>
I want to open a link in a new window. I have two sites, a corporate site and a dealer site. On the corporate site, I have a page with only an image that I want to display in both corporate site and dealer site. When you click on the image, it goes to view detail page. However, what I want in my dealer site is, when you click on the iframe image, it opens the tab in a new window, instead of displaying detail page inside the iframe.
Any ideas? Cheers.
You can do it with jquery and window.open method.
HTML:
<iframe id="iframe" width="572px" scrolling="auto" height="335px"
frameborder="1" src="http://XXXX.com/iframe-page"
style="border: 0px none #ffffff;" name="national-campaign"
marginheight="0px" marginwidth="0px">
</iframe>
JS :
var iframe = $("#iframe");
var newWindow = window.open(iframe.attr(src), 'Dynamic Popup', 'height=' + iframe.height() + ', width=' + iframe.width() + 'scrollbars=auto, resizable=no, location=no, status=no');
newWindow.document.write(iframe[0].outerHTML);
newWindow.document.close();
iframe[0].outerHTML = ''; // to remove iframe in page.
The easy way is to use a hyperlink with an attribute target="_blank".
If the height and width are important to you (cf. your example), then you can use the JavaScript method window.open.
Try to add target="_top" inside that link.
or alternatively if you need to open a new page from a link inside an iframe if i understood correctly you can:
Using jQuery:
$('iframe a').attr('target', '_blank');
I would recommend that you just use a hyperlink to another page rather than an iframe. Or a screenshot image that is actually a link.
Some users may be 'smart' enough to right-click within the iframe (in internet explorer) and select a 'open in new window' option, but others wouldn't do that.