none
Bing Maps API v8 Zoom Control not working RRS feed

  • Question

  • I have been moving as map to HTTPS and have problems only with the Chrome browser where the zoom control does not work.

    Initially I loaded the map asychronously in HTTPS in Chrome and the zoom did not work.  I switched to asychronous with a callback and the secure site now works:

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?branch=release&callback=GetMap'></script>

    The non-secure site will not work but it works in all other browsers.

    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?&branch=release'></script>

    Has anybody else encountered problems with Chrome or are there settings which need to  be changed in the browser?  

    The sites are:

    https://sysmaps.co.uk/sysmaps_bing.html

    http://www.sysmaps.co.uk/sysmaps_bing.html

    Wednesday, January 11, 2017 10:18 AM

Answers

  • I'm able to reproduce this on your site, but only on your site. This does not reproduce anywhere else. This issue is most likely due to code in your application. Digging through your code it looks like you are loading the map twice for the same div. As such it is possible that the zoom buttons you are seeing are for the first map, which is hidden behind the second one. Make sure that the each map you load has a unique div to load into. Also, there are some known issues when loading more than one map. These are resolved in the experimental branch and will be in the main release branch in the next week or two. You can see if this makes a difference by adding "&branch=experimental" to the map script URL.

    [Blog] [twitter] [LinkedIn]


    Thursday, January 12, 2017 3:08 AM
  • It's "&branch=experimental" not "release = experimental".

    [Blog] [twitter] [LinkedIn]

    Friday, January 13, 2017 8:33 PM
  • Ok, I've managed to reproduce this in your app, but only in your app. I tried a couple dozen other applications using Bing Maps V8 and none of them have this behavior. As I mentioned before your code loads two maps into the same map div. This is not supported and is more than likely the source of your issue. I tried hiding one of the child map containers and found the zoom buttons started working. As I mentioned before I suspected that the zoom buttons you are seeing is for the first map which is hidden behind the second map. When you use the zoom buttons is looks like nothing is happening, but the reality is that the bottom map is trying to zoom.


    [Blog] [twitter] [LinkedIn]

    Monday, January 16, 2017 8:51 PM
  • Ok, after a few hours of debugging I managed to find the issue. First off, only one map is loading inside the map div now which certainly helps. The issue appears to be with the logEvent3 function. This function is set to run on the maps mousemove event which is firing constantly as you move the mouse on the map. In here you have code that updates the center and zoom level of the map with the current center and zoom level of the map. When a user clicks on the zoom button, that event isn't finished doing its thing firing before the mouse move event fires. When the mouse move event fires and gets the current zoom level of the map it is getting the level before the zoom button was clicked as the zoom button event hasn't finished its calculations. Thus you end up setting the map view back to what it already was. This would also explain why zooming the map using the mouse wheel is laggy as well. Here is a code sample that reproduces the issue:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <meta charset="utf-8" />
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol'></script>
    
        <script type='text/javascript'>
            var map;
    
            function GetMap() {
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'You Bing Maps Key'
                });
    
                Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                    map.setView({ center: map.getCenter(), zoom: map.getZoom() });
                });
    
                Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function (e) {
                    map.setView({ center: map.getCenter(), zoom: map.getZoom() });
                });
            }
        </script>
    </head>
    <body onload="GetMap()">
        <div id="myMap" class="map" name="mapDiv" style="; width: 1886px; height: 769px; border: 1px solid black; visibility: visible;"></div>
    </body>
    </html>

    The solution is to no set the map view in the maps mouse move event. Note that it doesn't make sense to do this anyways as it makes no difference in the map view. This will actually reproduce the issue in all browsers if the mouse moves slightly when pressing the zoom button. It happens more often Chrome as the mouse move event fires on mouse down and up as well.

    Going through your code I noticed a few issues that you may want to look into:

    • EntityCollections are deprecated. Use the Layer class and add it to the map using map.layers.insert.
    • Infoboxes can't be added to EntityCollections or Layers. You have to use the setMap function.
    • Looks like Google Maps is being used with Bing Maps. Why? This is against the terms of use of both platforms. This would also mean you aren't taking advantage of the map session which provides geocoding.


    [Blog] [twitter] [LinkedIn]


    Wednesday, January 18, 2017 7:19 PM

All replies

  • I'm able to reproduce this on your site, but only on your site. This does not reproduce anywhere else. This issue is most likely due to code in your application. Digging through your code it looks like you are loading the map twice for the same div. As such it is possible that the zoom buttons you are seeing are for the first map, which is hidden behind the second one. Make sure that the each map you load has a unique div to load into. Also, there are some known issues when loading more than one map. These are resolved in the experimental branch and will be in the main release branch in the next week or two. You can see if this makes a difference by adding "&branch=experimental" to the map script URL.

    [Blog] [twitter] [LinkedIn]


    Thursday, January 12, 2017 3:08 AM
  • Thanks for this.  I have tried adding release = experimental and this makes no difference.  I have worked through the code and the map only appears to load once.

    The problem arises only in Chrome.

    If you click on the zoom buttons it disables other actions such events when you pass a mouse over buttons.

    However if you open the Chrome page as a new Window rather than as a tab, the zoom works correctly.

    Friday, January 13, 2017 6:34 PM
  • It's "&branch=experimental" not "release = experimental".

    [Blog] [twitter] [LinkedIn]

    Friday, January 13, 2017 8:33 PM
  • Apologies, I was using:

    script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?branch=experimental'></script>

    I still only works if you open a new Window and not with a new tab.  Opening a tab and clicking the zoom button disables the market layer.

    Sunday, January 15, 2017 5:20 PM
  • Ok, I've managed to reproduce this in your app, but only in your app. I tried a couple dozen other applications using Bing Maps V8 and none of them have this behavior. As I mentioned before your code loads two maps into the same map div. This is not supported and is more than likely the source of your issue. I tried hiding one of the child map containers and found the zoom buttons started working. As I mentioned before I suspected that the zoom buttons you are seeing is for the first map which is hidden behind the second map. When you use the zoom buttons is looks like nothing is happening, but the reality is that the bottom map is trying to zoom.


    [Blog] [twitter] [LinkedIn]

    Monday, January 16, 2017 8:51 PM
  • Sorry I still can't work this one out.  Chrome is OK on a Mac but not in Windows.  I can only find one map div and all other browsers work.  I know this is outside the area but why does this only happen with Chrome Windows and what can I do to stop it?
    Wednesday, January 18, 2017 3:26 PM
  • Ok, after a few hours of debugging I managed to find the issue. First off, only one map is loading inside the map div now which certainly helps. The issue appears to be with the logEvent3 function. This function is set to run on the maps mousemove event which is firing constantly as you move the mouse on the map. In here you have code that updates the center and zoom level of the map with the current center and zoom level of the map. When a user clicks on the zoom button, that event isn't finished doing its thing firing before the mouse move event fires. When the mouse move event fires and gets the current zoom level of the map it is getting the level before the zoom button was clicked as the zoom button event hasn't finished its calculations. Thus you end up setting the map view back to what it already was. This would also explain why zooming the map using the mouse wheel is laggy as well. Here is a code sample that reproduces the issue:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <meta charset="utf-8" />
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol'></script>
    
        <script type='text/javascript'>
            var map;
    
            function GetMap() {
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'You Bing Maps Key'
                });
    
                Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                    map.setView({ center: map.getCenter(), zoom: map.getZoom() });
                });
    
                Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function (e) {
                    map.setView({ center: map.getCenter(), zoom: map.getZoom() });
                });
            }
        </script>
    </head>
    <body onload="GetMap()">
        <div id="myMap" class="map" name="mapDiv" style="; width: 1886px; height: 769px; border: 1px solid black; visibility: visible;"></div>
    </body>
    </html>

    The solution is to no set the map view in the maps mouse move event. Note that it doesn't make sense to do this anyways as it makes no difference in the map view. This will actually reproduce the issue in all browsers if the mouse moves slightly when pressing the zoom button. It happens more often Chrome as the mouse move event fires on mouse down and up as well.

    Going through your code I noticed a few issues that you may want to look into:

    • EntityCollections are deprecated. Use the Layer class and add it to the map using map.layers.insert.
    • Infoboxes can't be added to EntityCollections or Layers. You have to use the setMap function.
    • Looks like Google Maps is being used with Bing Maps. Why? This is against the terms of use of both platforms. This would also mean you aren't taking advantage of the map session which provides geocoding.


    [Blog] [twitter] [LinkedIn]


    Wednesday, January 18, 2017 7:19 PM
  • Thank you so much for your help.  I have made changes to the logEvent3 together with the EntityCollections/Infoboxes.  I will also change the geocoding as this map was originally a google map as part of the collection on SysMaps which was amended for MultiMap and then rerwritten for Bing v7 and v8.  This explains why some of my coding is disorganised.  Once again many thanks.
    Thursday, January 19, 2017 10:31 AM