css media queries replace map with embed image

I'm trying to replace a gmap that I have on my index page with an embedded image version for mobile. The map looks okay on desktop but when I view it on mobile it is too long and scrolling to the end of the page is challenging due to the gmap. I've set "scrollwheel: false" on the JS which fixed this for desktop but on mobile still does not work. I've also placed the map width to 90% but the map still looks to large on mobile. So I've decided to replace the map with an embedded image version of it once the screen size goes under 767px. The only thing is that I'm not sure how to go about swapping the two (gmap to image). Any advise would be greatly appreciated.

Some details about the page, it is being displayed using the RoR's "render".

index.html:

<div id="map" class="google-maps">
     <%= render "gmap" %>
</div>

_gmap.html:

<script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({
       provider: {
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.HYBRID,
          maxZoom: 64
       },
       internal: {
          id: 'map'
       }
    }, function() {
       markers = handler.addMarkers(<%=raw@hash.to_json%>);
       handler.bounds.extendWith(markers);
       handler.fitMapToBounds()
    });
    handler
</script>

gmap.css

.google-maps {  
    width: 90%; 
    height: 100%; 
    margin: 0 auto;
    position: absolute;
    top:0;
    z-index:1;
}