Looking to make a change on my index page - swapping out a long Google Map for an embedded image version on mobile. The map displays fine on desktop, but on mobile it's too lengthy and makes scrolling difficult. I already adjusted the JS setting to "scrollwheel: false" for desktop, but it didn't solve the issue on mobile. Even when I reduced the map width to 90%, it still appeared oversized on mobile screens. So, my plan is to replace the map with an image version when the screen size drops below 767px. But I'm unsure about how to execute this swap from gmap to image. Any advice would be much appreciated!
Some information about the page - it's rendered using 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(<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9c48b988eb991988a91d78d96">[email protected]</a>_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;
}