Zoom mouseover bing maps

**SergiyNesterenko90** · 01-07-2010, 07:07 PM

Hey guys,
I have integrated the Bing Maps API into my webiste, however there is one problem that still seems to elude me.
As I hover over the bing maps <div>, and use the scroll wheel on my mouse, the maps zoom in and out, but at the same time, my page scrolls up and down as well. This is obviously very irritating, so I need some way to prevent the whole page from scrolling up and down when the mouse is over the map.
Any suggestions?
Thanks ahead of time.

**djr33** · 01-07-2010, 07:53 PM

Without looking at any of the code at all, there's a general way to stop the default action when you're using Javascript instead. For example:
<a href="..." onclick="dothis(); return false;">
Basically, instead of loading the link it will "dothis()" (some function, like maybe loading a popup window), then return false, notifying the browser that the action is complete.
A shorter way to write it is:
<a href="..." onclick="return dothis();">
So it just "returns" (read "does") the function, and then stops execution.

To apply this to your page, just find the part where the "scrolling" event is captured and add a "return" like above. Because this is actually several events, you may need to add it in several places.
Depending on how complex the code is this may be very difficult to do, or even impossible.
There are probably some other ways to avoid this issue entirely, such as setting some property to the div where scrolling is self contained, but I'm not sure how you would best approach that.

If you need more help, please post a link to the page on your site that contains the problematic script so we can check it out.

**SergiyNesterenko90** · 01-08-2010, 12:39 AM

The code just looks like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
      <script type="text/javascript">
      var map = null;
            
      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
      }   
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

Of course, I have other content on the page that isn't relevant to this, and it is that other content that stretches my page out so that there is a scroll bar on the main page.

Thread: Zoom mouseover bing maps

Thread Tools

Search Thread

Zoom mouseover bing maps

Bookmarks

Bookmarks

Posting Permissions