make iframe google map black and white - google-maps

I have used a google map in iframe.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=&q=Madurai,+Tamil+Nadu&aq=0&oq=madursi&sll=10.782836,78.288503&sspn=5.674603,10.755615&ie=UTF8&hq=&hnear=Madurai,+Tamil+Nadu&t=m&z=12&ll=9.925201,78.119775&output=embed"></iframe><br /><small>View Larger Map</small>
How to display a google map in black and white color?

It does work, but you should also add the formatting that the different browsers require for grayscale.
<div style="-webkit-filter: grayscale(100%);
filter: grayscale(100%);">
Here's the fiddle: http://jsfiddle.net/j9p9w62f/

By rights the only way to make a black and white Google Map is to use their Styled Maps api
Your post was tagged with API so I assume a non-iframe option is ok for you. If the inclusion method is not fixed this might will give you an idea of alternative. It is also possible to use the styled maps to generate a Google Static Map which would then also be iFrame friendly.
You could also take a look at Stamen maps Which are based on Open Street Maps, but can be used as overlay layers to Google Maps. The form of delivery is not likely possible just through a crafted iframe url.

Try to use
<iframe class="map" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps(...)"></iframe>
.map {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
This will help

This one is achieved by using some css
Here is working code
.map {
filter: grayscale(100%);
}
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4917.1193047590605!2d4.4690507720313!3d51.96022102967837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5cb67ae23c02d%3A0xdac4c06bc7904d2!2sRododendronplein+10%2C+3053+ES+Rotterdam%2C+Nederland!5e0!3m2!1snl!2ses!4v1541007683407" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Add a <div> arround the <iframe> and stle it as:
webkit-filter: grayscale(100%);

Have you tried https://mapstyle.withgoogle.com/? You can configure it as you wish and have an url or json ready to use in your code.

Related

Remove info window from an embedded Google map

I'm trying to hide info window from Google embedded map. I was searching for solution, but can't find it anywhere.I want to hide info window and leave link for bigger map.
Link to map: http://dev01-www.erisata.lt/en.html#contacts
Any solutions for this?
You can't, but you can do a workaround for your case, by adding a new div with absolute position to hide the google map text content, replace your map-container div by :
<div class="map-container">
<section style="background:#75716a; background: #e5e5e5;padding: 0;position:relative;">
<iframe scrolling="no" width="100%" height="400" frameborder="0" style="border:0; -webkit-filter: grayscale(100%); filter: grayscale(100%);" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6522.283005371661!2d25.278750538590636!3d54.69246783787969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd941c3397b6eb%3A0x20df28c924221cdd!2zxaBlaW15bmnFoWtpxbMgZy4gMjMsIFZpbG5pdXMgMDkyMDA!5e0!3m2!1slt!2slt!4v1479197857183" allowfullscreen="" class=""></iframe>
<div width="100%" style="left:0;right:0;position: absolute;bottom: 0px;background: #e5e5e5;"> </div>
</section>
</div>

cross browser embedded video grayscale filter

On my page I am embedding a video from vimeo as so
<h4>Favopurite songs</h4>
<ul>
<li>
<a href="https://player.vimeo.com/video/9159308?autoplay=1" target="vimeoPlayer">
Three little birds
</a>
<li>
</ul>
<section id="player">
<iframe class="first" src="#" name="vimeoPlayer" width="200" height="150"
frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</section>
For the css I have
iframe {filter: grayscale(100%)}
This is working in all browsers but not internet exploere 11.
I am aware that since internet exploere 10 they removed the filter property.
I have come across multiple fiddles that are suggested for images and that have hover effects over them.
I am purely looking to add a greyscale filter to my embedded videos without any hover effects and some of the fiddles I found wont work with embedded video.
any help would be greatly appriciated, Thanks
use this for different browsers
iframe{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
now test in IE11.
if IE 11 doesn't support css filters, you have to use a javascript solution to do the same thing.
cross browser grayscale
That link explains the process in detail, using modernizer to detect browsers and so on. It'd be a lot of work to implement though.

Can I add words/image over an embedded Vimeo iframe? How?

As title... Can I even do that? If so, how to? I've embedded a Vimeo video but failed to add words on it. Javascript is able to use
Many thanks
A solution with a text with an absolute position:
#video-container{
position:relative;
width:auto;
}
#foreground-text{
position:absolute;
top:50%;width:100%;text-align:center;
margin:0 auto;
color: white;font: bold 20px;
}
<div id="video-container">
<iframe src="https://player.vimeo.com/video/36477715" width="100%" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Things Programmers Also Know from Billy Keyes on Vimeo.</p>
<span id="foreground-text">Some text</span>
</div>
(video won't work in the snippet frame)
You can also use WebVTT subtitles:
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
http://html5doctor.com/video-subtitling-and-webvtt/

How to disable Google Slides presentation IFrame navigation

I'm working on a website and am using a presentation as a slideshow for concert images because it is easy and familiar for someone who is not programmatic proficient to edit what is shown during the slideshow. To hide the navigation i used CSS, and placed the IFrame in a div with the class .googleSlideshow.
The HTML:
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
</div>
The CSS:
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
easy enough! here comes the problem: when the IFrame is clicked, the presentation goes to the next slide and pauses! This is terrible, and since this is in an IFrame the components of the IFrame are not able to be effected by my CSS, or script. Is there an attribute I can add to the IFrame that will get passed down to the presentation and stop the image onclick navigation?
Adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000&rm=minimal" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
I have found a fix thanks to trial and error!
the HTML
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
<div style="top:0px;left:0px;width:100%;height:579px;position:relative;margin-top:-583px;" onclick="return false;">
</div>
</div>
the CSS
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
position:relative;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
the idea of a div blocking the click is what worked, but putting it after the iframe and then moving it to cover the iframe was better than placing the div before the iframe. i hope this helps others in a similar situation!

Having trouble with aligning an iFrame in HTML5

Now I have made a website, and I have integrated google maps into it. Now I am havign trouble with centering Google maps on the web page.
Here is my code:
<iframe width="640"
height="480"
align="middle"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="100"
margin-top:100px;
margin-left:140px;
src="https://maps.google.ca/?ie=UTF8&t=h&ll=49.894634,-97.119141&spn=27.26845,56.25&z=4&output=embed"></iframe>
Why not use margin:auto for the left and right of the iframe or the div its in.