Fixing usability issues when map moves to display an infomration window.
authorChuck Scott <cscott@gaslightmedia.com>
Mon, 19 Dec 2016 16:10:07 +0000 (11:10 -0500)
committerChuck Scott <cscott@gaslightmedia.com>
Mon, 19 Dec 2016 16:10:07 +0000 (11:10 -0500)
Now not loading additional POIs and returns to previous position when closing info window.

views/front/nearme/index.html

index 84ffcc9..2f706c4 100644 (file)
             var maxAnywhereZoom = 14;           // Max zoom in when doing anywhere search
             var boundsTimeout = 1500;           // Time to wait after a map move or zoom before trying to load new POIs in milliseconds
             var trackPositionInterval = 60000;  // Time interval for getting user's current geolocation - 1 Min
-            var highAccuracyPoisition = false;  // Request high-accuracy user geolocation from user's device
+            var highAccuracyPoisition = true;   // Request high-accuracy user geolocation from user's device
             var postionTimeout = 15000;         // Maximum amount of time we'll wait for geolocation result - 15 Sec
             var geolocationFailCount = 2;       // Allow geolocation to fail this many times before switching to manual location settings ('set')
-            var trackToConsole = false;          // Send debug/progress messages to developers console (Firefox)
+            var trackToConsole = false;         // Send debug/progress messages to developers console (Firefox)
+            var resetPOIsAlways = true;         // Always reset all POIs when updating map. Otherwise ones off the map are deleted and the new request is for the entire map.
             
             // Set default - Need to make this configurable
             var mapLocation = new google.maps.LatLng(mapLat, mapLon);
                     window.setTimeout(getUserLocation, 1000);
 
                     // Start with map centered on reference location
-                    map.setCenter(mapLocation);
+                    map.panTo(mapLocation);
 
                     // Save the initail map position
                     curZoom = map.getZoom();
                     if (trackToConsole) { console.log('GLM NearMe: Drag map started'); }
                     
                     // Close map bubble if used
-                    closeMapBubble();
+//                    closeMapBubble();
                     
                 });
                 
                     if (dragging) {
                         return;
                     }
-                    closeMapBubble();
+//                    closeMapBubble();
                     closeMapTitle();
                     mapTitle = new google.maps.InfoWindow({
                         content: 'My Selected Location'
                     if (trackToConsole) { console.log('GLM NearMe: map zoom changed'); }
                     
                     // Close map bubble if used
-                    closeMapBubble();
+//                    closeMapBubble();
                     
                     // Check if we need to get new POIs after this zoom - Dissabled for "everywhere" search
                     if (!noProcessAfterZoom) {
                 noProcessAfterZoom = true;
                 
                 // Go to the user's saved postion and default zoom
-                map.setCenter(myMarker.getPosition());
+                map.panTo(myMarker.getPosition());
                 map.setZoom(defZoom)
                 
                 // Clear all POIs and run check for new ones.
             });
 
             // Schedule a check for new POIs
-            function checkNewPOIs(timeout = boundsTimeout, resetPOIs = false, anywhere = false) {
+            function checkNewPOIs(timeout = boundsTimeout, resetPOIs = resetPOIsAlways, anywhere = false) {
 
                 if (trackToConsole) { console.log('GLM NearMe: checkNewPOIs()'); }
                 
              *  resetPOIs   true to clear all POIs and reload them all for current map bounds
              *                  Not needed for type 'anywhere' - full reset is assumned
              */
-            function getBoundsPOIs(resetPOIs = false, anywhere = false) {
+            function getBoundsPOIs(resetPOIs = resetPOIsAlways, anywhere = false) {
                  
                 if (trackToConsole) { console.log('GLM NearMe: getBoundsPOIs() '); }
                 
 
                         // If resetPOIs is requested, clear all clusterer markers, all map markers, and our own markers array.
                         if (resetPOIs) {
-                            
+                    
                             markerClusterer.clearMarkers();
                             markerClusterer.repaint();
                             
@@ -564,7 +565,7 @@ if (trackToConsole) { console.log('GLM NearMe: Number of markers remaining = '+O
                                     
                                         template = $('#nearMe-mouseover-template').html();
                                         template = template.replace(/{ name }/g, value.name);
-                                        closeMapBubble();
+//                                        closeMapBubble();
                                         closeMapTitle();
                                         
                                         mapTitle = new google.maps.InfoWindow({
@@ -639,8 +640,11 @@ if (trackToConsole) { console.log('GLM NearMe: Number of markers remaining = '+O
                                     
                                     if (doMapBubble) {
     
+                                        var zoomBefore = map.getZoom();
+                                        var centerBefore = map.getCenter();
+
                                         // Close any other existing bubble or title.
-                                        closeMapBubble();
+//                                        closeMapBubble();
                                         closeMapTitle();
                                         
                                         // Show a map info bubble for this marker
@@ -649,9 +653,14 @@ if (trackToConsole) { console.log('GLM NearMe: Number of markers remaining = '+O
                                         });
                                         mapBubble.open(map, this);
 
-                                        // Check for new POIs in case the map moved when displaying the map bubble
-                                        checkNewPOIs();
+                                        mapBubble.addListener('closeclick', function() {
                                         
+                                            // If the map moved when displaying the map bubble, check POIs on close
+                                            if (map.getZoom() != zoomBefore || map.getCenter().lat() != centerBefore.lat() || map.getCenter().lng() != centerBefore.lng()) {
+map.panTo(centerBefore);                                                
+                                                checkNewPOIs();
+                                            }
+                                        });
                                     }
                                     
                                 });
@@ -791,7 +800,7 @@ if (trackToConsole) { console.log('GLM NearMe: Number of markers remaining = '+O
                         
                         // If current location is not on map, recenter map on location
                         if (!map.getBounds().contains(myMarker.getPosition())) {
-                            map.setCenter(myCurrentLocation);    
+                            map.panTo(myCurrentLocation);    
                             checkNewPOIs();
                         }
         
@@ -879,7 +888,7 @@ if (trackToConsole) { console.log('GLM NearMe: Number of markers remaining = '+O
             
             function closeMapBubble() {
                 if (mapBubble) {
-                    mapBubble.close();
+//                    mapBubble.close();
                 }
             }
             function closeMapTitle() {