I am trying to show a particular location by embedding a Google map to my site using Maps Engine Lite. However I get this black bar (with the text Untitled Map as shown below) at the top of the map which I need to get rid of. Any ideas how to proceed with this -
There are no implemented options to hide the bar, but it could be done via CSS.
example assuming a desired iframe-size of 580x160
<div style="height:160px;display:inline-block;overflow:hidden;border:1px solid #000">
<iframe style="position:relative;top:-27px; border:none;"
src="/path/to/embedmap"
width="580" height="187"></iframe>
</div>
The iframe is wrapped in a div with a height set to the desired height. The height of the iframe is set to the desired height +27px . Via top:-27px; the iframe will be moved 27px upwards, the bar disappears.
Related
I used the following code to embed a google map at www.tastysfreshburgersandfries.com/locations but there are white bars above and below it and I can't seem to figure out how to remove them. Any help with fixing that would be great.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3431.7169822552632!2d-81.45959308200993!3d30.670097134060587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e4fee54019994b%3A0xbe6be3a817d34edf!2sTasty's+Fresh+Burgers+and+Fries!5e0!3m2!1sen!2sus!4v1476217073308" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
.wpb_content_element { margin-bottom: 35px}, you can play with it and also, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner { padding-top: 35px; } that also needs to be changed.
But I would suggest you to create a separate class and apply it instead of messing with existing CSS styles, as I can see its from other framework.
You have padding on the row that has the iframe (it isn't the iframe which generates the white bars). Look this
I can figure you are using Visual Composer. First do a click on the pencil who is in the upper right corner of the row to see the Row Settings.
Then go to Design Options tab, and check what values do you have on the padding section.
I am trying to put a pdf object on my web page. The pdf loads fine, but it creates a gray area around the document. I know that the gray area is part of the pdf document and it is just part of the object, but I am trying to find out how to get rid of it. I have adjusted margins and padding. I have adjusted height and width to try and get it to go away. I have tried passing a zoom option to the pdf when it opens and nothing worked.
I want the document to load without creating any sort of edges or borders on the page. Any help would be appreciated. The markup that applies to it is below. I'm pretty sure it won't help much but you never know.
<article class="main_content">
<object id="resume_object" type="application/pdf" data="images/AlexsResume30Jan15.pdf">Alex's Resume</object>
</article>
article.main_content{
margin-top:70px;
}
#resume_object{
height:1190px;
width: 910px;
margin-left:20%;
margin-right:20%;
padding:-20px;
background-color:white;
}
I am facing a problem and any kind of response would be respectful.
I want to show people's cv's ( pdf type ) on my page and I am using flexpaper to do so.
I have some iframes with some specific style ( width,height ) and inside those iframes I place my document.
My problem is that he document's size is much bigger than the iframe's, which forces it to create scroll bars.
I want to make my document preview appear smaller in order to fit the iframe size without any scroll bars appearing. Below is an image of my preview so far.
<div class="some class that i get from my php">
<i class="icon-download-alt"></i>
<a href="a link that i get from my php">
Cover Letter</a> <a onclick="$(this).parent().find('iframe').toggle();return false;">(Preview)</a><br><br>
<iframe src="/flexpaper/php/split_document2.php?subfolder=&doc=documentsName" style="width:100%; min-height:400px; display:none;"></iframe>
<br>
</div>
Thank you.
Try setting the FitWidthOnLoad parameter to true in the viewer like so:
FitWidthOnLoad : true
make sure you have 100%/100% on width/height on the viewer and you should be sweet
I try to embed Google maps' street view on my website, but something weird shows up on the result:
http://www.biei.us/photography/autorotate/
as you see, the zoom slider and google logo has a white background. How do i fix this?
this is the code I use:
http://www.biei.us/photography/wp-content/themes/galleria-v2/autorotate/pano01.js
and this is how i embed it:
(in header)
(in body)
Any help is appreciated,
Jeff
For me there is also a white border for the tiles.
There are padding,'background'-and border-settings for img that also have been applied to the images of the panorama.
Use this CSS to override it:
#pano img{padding:0 !important;border:none !important;background:none;}
I have this webbrowser view of a page, with a Google map.
Then I have added some #Media Print style
<style type="text/css">
#media print
{
body{font-family:georgia,times,sans-serif;}
img{max-width:500px;}
#headerblock{display:none;}
#navigationblock{display:none;}
#thewaydiv{display:block;}
#footerblock{display:none;}
#contentmap{min-height:100px; position:relative; width:100%;}
#map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;}
}
</style>
When I then use print page or print view then I get this:
As you can see the Google map is OK in the size for the page, but it's too big/just a little part of the true image. How can I fix this, so I get a Google image like the Browser View on the Print View?
This cannot be done using CSS.
You will need a special page with a map sized as it has to be printed, or zoom-out the map before printing(this may be done using javascript).
I also ran into this issue with dynamic data driven maps.
I did however find a way of using css to make this work a little smoother without having to manipulate the map using the API or a clunky separate map page.
I gave the map a container div with a defined height and set its css overflow to hidden.
I added a second map under the first using the same setup but with a printable dimension like 700px width by 500px height.
Lastly the print stylesheet simply has display:none for the first map revealing the second hidden map in its container.
Is this hacky?
Maybe, but it worked instantly for me.