CODEWITHSUNDEEP
javascripthtmlangularjsgoogle-mapsmarkerclusterer
Farhan Ghumra
Farhan Ghumra

Reputation: 15296

Using mouseover and mouseout for InfoWindow causes InfoWindow flickering and consecutive event trigger of mouseover and mouseout

I am using MarkerClustererPlus library in an AngularJS project with ngMap. I attached mouseover and mouseout event to MarkerClusterer object. When mouse is hovered over the cluster I am displaying all individual marker's detail in single InfoWindow of that cluster. Whenever user's mouse is out from cluster I want to hide the InfoWindow. Now the functionality works partially correct. When the mouse is put on the count of cluster, the mouseover and mouseout events are being called consecutively, due to that the InfoWindow get visible/hide and it creates a flickering effect. Am I missing anything in my code to eliminate that flicker?

I am giving you the both examples. On is in plain JavaScript and other is in AngularJs with ngMap. Also attached the video which shows the issue I am facing.

Thanks!

ngMap + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>Dynamic ngMap demo</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
  <script>
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ 
      = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m';  //changed image path
  </script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
  <script>
  var app = angular.module('myApp', ['ngMap']);

  app.controller('mapController', function($http, $interval, NgMap) {
    var vm = this;
    vm.dynMarkers = [];
    NgMap.getMap().then(function(map) {
    vm.map = map;
      for (var i=0; i<1000; i++) {
        var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
        vm.dynMarkers.push(new google.maps.Marker({position:latLng}));
      }
      vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'});
      google.maps.event.addListener(vm.markerClusterer, 'mouseover', function(cluster) {
          vm.map.showInfoWindow('bar', cluster.getCenter());
      });
      google.maps.event.addListener(vm.markerClusterer, 'mouseout', function() {
          vm.map.hideInfoWindow('bar');
      });
    });
  });
  </script>
  <style>
    map, div[map] {display:block; width:600px; height:400px;}
  </style>
</head>

<body>
  <h1>Marker Cluster</h1>
  <hr />
  <div ng-controller="mapController as vm">
    <ng-map zoom="2" center="[43.6650000, -79.4103000]" style="display:block; width:600px; height:400px;">
    <info-window id="bar" max-width="200">
        <div ng-non-bindable>
          <div id="bodyContent">
            <p>
            <b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
            sandstone rock formation in the southern part of the
            Northern Territory, central Australia.</p>
          </div>
        </div>
      </info-window>
      </ng-map>
  </div>
</body>
</html>

https://plnkr.co/edit/4Yl8avzyKEgtEYvffIM7?p=preview

https://www.useloom.com/share/0e183dee979e4accb90887ba3d9ba59a

Plain JavaScript + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      .photo {
            box-shadow : 0 0 10px rgba(0, 0, 0, 0.8);
        }

        .photo-thumblist {
            display : inline-block;
            margin : -1px 2px;
            padding : 0;
            position : relative;
        }

        .photo-longlist {
            background-color : #f1f1f1;
            border-top : 1px solid #d1d1d1;
            border-bottom : 1px solid #d1d1d1;
            height : 75px;
            overflow : auto;
            padding : 7px 7px;
        }

        .photo-preview {
            background-color : #222222;
            height : 150px;
            width : 100%;
        }

        .photo-googlemaps {
            background-color : #222222;
            border : 1px solid #222222;
            height : 300px;
            width : 100%;
        }

        .photo-map {
            background-color : #222222;
            height : 500px;
            width : 100%;
        }

        .photo-map-overlay {
            background-color : rgba(255, 255, 255, 0.8);
            display : none;
            margin : -501px 0 0 1px;
            height : 420px;
            overflow : auto;
            padding : 40px 50px;
            position : absolute;
            width : 100%;
        }

        .photo-map-overlayclose {
            display : none;
            margin : 0 0 0 10px;
            position : absolute;
            z-index : 100;
        }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

    <script type="text/javascript">
        var marker;
        var gm_map;
        var markerArray = [];
        var address = 'Sweden';
        var geocoder = new google.maps.Geocoder();
        var infoWindow = new google.maps.InfoWindow();

        geocoder.geocode({ 'address': address }, function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
                // gm_map.setCenter(results[0].geometry.location);
                // gm_map.fitBounds(results[0].geometry.bounds);
            } else {
                alert("Unable to complete the geological setting due to the following error:\n\n" + status);
            }
        });



        function initialize() {
            var marker, i;
            var clusterMarkers = [
                new google.maps.Marker({
                    position: new google.maps.LatLng(59.381059,13.504026),
                    map: gm_map,
                    title:"P1220214 1.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.338683,13.492057),
                    map: gm_map,
                    title:"P1220214 2.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.340715,13.49631),
                    map: gm_map,
                    title:"P1220214 3.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.327232,13.487384),
                    map: gm_map,
                    title:"P1220214 4.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.379034,13.516566),
                    map: gm_map,
                    title:"P1220214 5.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.328631,13.485688),
                    map: gm_map,
                    title:"P1220214 6.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.328657,13.485591),
                    map: gm_map,
                    title:"P1220214 7.JPG"
                }),

                new google.maps.Marker({
                    position: new google.maps.LatLng(59.328501,13.485782),
                    map: gm_map,
                    title:"P1220214 8.JPG"
                })
                ]

            var options_googlemaps = {
                minZoom: 4,
                zoom: 18,
                center: new google.maps.LatLng(59.328631,13.485688),
                maxZoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false
            }

            gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);


            var options_markerclusterer = {
                gridSize: 20,
                maxZoom: 18,
                zoomOnClick: false,
                imagePath:  'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
            };



            var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);

            google.maps.event.addListener(markerCluster, 'mouseover', function(cluster) {

                var markers = cluster.getMarkers();

                var array = [];
                var num = 0;

                for(i = 0; i < markers.length; i++) {

                    num++;
                    array.push(markers[i].getTitle() + '<br>');
                }
                if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
                   infoWindow.setContent(markers.length + " markers<br>"+array);
                   infoWindow.setPosition(cluster.getCenter());
                   infoWindow.open(gm_map);
                }    
            });
        google.maps.event.addListener(markerCluster, 'mouseout', function() {
                                infoWindow.close();
                            });


            for(i = 0; i < clusterMarkers.length; i++) {
               var marker = clusterMarkers[i];

                google.maps.event.addListener(marker, 'click', (function(marker) {
                    return function() {
                   infoWindow.setContent(this.getTitle());
                   infoWindow.open(gm_map, this);
                    }
                })(marker));
            }
        }



        $(document).ready(function() {

            // INITIALIZE GOOGLE MAPS
            initialize();


            // CLOSE
            $('body').on('click', '#close-link', function() {
                $('#toggle-photolist').fadeOut();
                $('#close-overlay').fadeOut();
            });

        });

    </script>
  </head>
  <body>
    <div class="photo-map-overlayclose" id="close-overlay">
    <a href="javascript:void(0)" class="noborder-link" id="close-link">Close</a>
</div>


<div class="photo-map" id="google-maps"></div>
    <center class="photo-map-overlay" id="toggle-photolist">
        <div id="view-singlephoto"></div>

        <div id="view-multiblephotos">
            <div class="color-miniheadline paddingbottom-5 paddingleft-5" style="text-align: left;">
                The following photos was found in a total of <span id="count-photos">0</span>
            </div>

            <div style="text-align: left;">
                <div id="list-photos"></div>
            </div>
        </div>
    </center>
  </body>
</html>

http://jsfiddle.net/2onvfwdy/89/

https://www.useloom.com/share/9927951ace714557a3e8d803c96d073f

Upvotes: 2

Views: 1399

Answers (1)

Mahesh
Mahesh

Reputation: 31

Use this while creating infowindow, it will create a little gap between the icon and infowindow

pixelOffset: new google.maps.Size(0, -5)

Upvotes: 3

Related Questions