Fonts is getting blur when google map iframe is loaded

I’ve notice something strange in one of my page.
The fonts in the page is getting very blur after google maps is loaded.
The page:
http://aranrd.wpengine.com/contact/
You can see that at the moment google maps is loaded, the fonts inside it’s section, inside the grey area, getting blur.
This is a page template I’ve build for the contact page.

<?php get_header(); ?>

<div class="container">

    <div id="contact-page">

        <h1><?php _e( 'CONTACT', 'aran-rd' ); ?></h1>

        <div id="primary" class="content-area contact-inner">


            <div class="row top-row">

                <div class="col-sm-6">
                    <?php echo do_shortcode('[gravityform id=2 title=false description=false ajax=false]'); ?>
                </div>

                <div class="col-sm-6">

                    <!-- google maps iframe -->
                    <iframe src="https://www.google.com/maps/d/u/1/embed?mid=zWesdBo33x1E.kHaxSgqiUyNY" width="640" height="280"></iframe>

                    <div class="row inner-row">

                        <div class="col-sm-6">

                            <div class="location-details">

                                <?php _e( '43 Haeshel Street,<br/>Caesarea Buisness Park<br/>P.O.B 3067', 'aran-rd'); ?>

                            </div>

                        </div>

                        <div class="col-sm-6">

                            <div class="contact-details">

                                <?php _e( 'Tel: 972-4-623-9000,<br/>Fax: 972-4-627-3260<br/>E-mail: info@aran-rd.com', 'aran-rd'); ?>

                            </div>

                        </div>

                    </div><!--.inner-row-->

                </div>

            </div>


        </div><!--#primary-->

    </div><!--#contact-page-->

</div><!--.container-->

<?php get_footer(); ?>

Anyone knows what’s going on?