CODEWITHSUNDEEP
javascriptjquery
tokmak
tokmak

Reputation: 459

Page scrolling "disabled" because of Google Map

I have navigation bar on my site, and a Google Map below it, in a div that is 100% wide. When the visitor comes to the page and tries to scroll down, instead of scrolling down, Google map zooms out, so i guess the focus is on the map/div element where the map is. Can anyone help and throw me some code snippet to fix this? A lot of users dont even know that there is something bellow the map, since they cant scroll properly. Here is a code:

<body onload="initialize()">

    <header>
        <div class="wrap clearfix">

            <h1 class="logo"><a href="#" title=""><img src="assets/images/txt/logo.png"/></a></h1>
        </div>


        <nav class="main-nav" role="navigation">

            <ul class="wrap">
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Bio">Bio</a></li>
            </ul>

        </nav>

    </header>

  <div id="map_canvas" style="width:100%; height:100%"></div>

  <div class="main" role="main">

  Some webpage content here

  </div>

Upvotes: 1

Views: 3031

Answers (3)

JLavoie
JLavoie

Reputation: 17596

Here is the detailed procedure. Make sure to edit your Javascript file and that it can be accessed in your browser! (/js/mycode.js). Just edit the HTML file, copy and paste (no need to edit the JS).

HTML (/map.html): 

<head>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
   <script src="/js/mycode.js"></script>
</head>

<body>
    <div id="map-canvas" style="height:400px;"></div>
</body>

Javascript (/js/mycode.js): (Just copy and paste!)

if ($('#map-canvas').length) {
        var map,
            service;

        jQuery(function($) {
            $(document).ready(function() {
                var latlng = new google.maps.LatLng(26.13485, -73.87206);
                var myOptions = {
                    zoom: 16,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scrollwheel: false
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                marker.setMap(map);


                $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                    google.maps.event.trigger(map, 'resize');
                    map.setCenter(latlng);
                });
            });
        });
    }

Now edit the style, latitude and longitude and other maps parameters. And here you go!

Upvotes: 0

BIOSTALL
BIOSTALL

Reputation: 1696

When initialising the map you can set an option to disable zooming when the mouse wheel is used.

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

See the 'scrollwheel' option.

Upvotes: 2

kthornbloom
kthornbloom

Reputation: 3720

Your options are:

  1. Make the map smaller so they won't always have the map over it.
  2. Put some sort of invisible dom element over the map so their cursor won't be interacting with the map. (this disables scrolling zooming, etc on the map) Something like:

HTML

<div class="overlay"></div>

CSS

.overlay {
height:100%;
width:100%;
position:absolute;
top:0px; /*adjust to move it down */
}

Upvotes: 0

Related Questions