gera3d
6/19/2017 - 3:55 PM

Maps with no scrolling

Maps with no scrolling

Glen Taylor
[8:53 AM] 
/* disable auto scroll for google maps -gt */
.map {
    width: 100%;
    height: 450px;
}

.map-wrap {
    position: relative;
}

.overlay {
    width: 100%;
    min-height: 450px;
    position: absolute;
    top: 0;
}

One Map example (in options with no-gutters div already there):

<div class="map-wrap">
    <div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6930.6122921024025!2d-95.400309!3d29.71089!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9a71174aa7011f2f!2sHouston+Oral+Surgery+%26+Dental+Implant+Center!5e0!3m2!1sen!2sus!4v1478275583301" width="1144" height="450" frameborder="0" scrolling="no" style="border:0" allowfullscreen></iframe>
</div>

[8:54] 
Two Maps side by side (see utahsurgicalarts): (note the padding):

<div class="row no-gutters map-wrap">
  
        <div class="col-xs-12 col-sm-6" style="padding-right: 2px";><div class="overlay" onClick="style.pointerEvents='none'"></div>
            <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6087.481932674379!2d-111.657357!3d40.281504!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc785b56cb3f72c08!2sUtah+Surgical+Arts!5e0!3m2!1sen!2sus!4v1438881455663" width="572" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>        </div>
          
       <div class="col-xs-12 col-sm-6" style="padding-left: 2px";><div class="overlay" onClick="style.pointerEvents='none'"></div>
            <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6110.35251726635!2d-111.740233!3d40.026844!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4596cfb6a160b062!2sUtah+Surgical+Arts!5e0!3m2!1sen!2sus!4v1438881626948" width="572" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>        </div>  
            
</div>