10 Replies Latest reply on Jul 25, 2017 3:54 PM by MatesonG

    Google Maps Marker Clustering

    brendan_mahe

      Hi, I'm running a multi-point google map in the webviewer, with the marker data compiled by a filemaker custom function "MarkersArray", but can't seem to get the google marker clustering working. I've added the necessary marker clustering lines (in red) but the map ain't clustering. Any ideas what I could be doing wrong?

       

      <style type="text/css"> html, body {height: 100%}

      #map_canvas {height: 100%; }

      </style>

      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

      <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

      <script type="text/javascript">

      function initialize() {

      var myOptions = {mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId. ROADMAP, google.maps.MapTypeId.HYBRID]}};

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var markerBounds = new google.maps.LatLngBounds();

      var markers = new Array( [[MarkersArray]] );

       

      function addMarker(options) {

      var marker = new google.maps.Marker({map:map});

                                      marker.setOptions(options);

                                      markerBounds.extend(options.position)  }

       

      var end = markers.length;

      for(var i=0; i<end; i++) { addMarker({position: markers[i]['position'] }); }

                      map.setCenter(markerBounds.getCenter());

                      map.fitBounds(markerBounds);

       

      var markerCluster = new MarkerClusterer(map, markers,

      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

       

      }

       

      </script>

      <body onload="initialize()">

      <div id="map_canvas"></div>

      <div id="latitude">|latitude|</div>

      <div id="longitude">|longitude|</div>

        • 1. Re: Google Maps Marker Clustering
          Johan Hedman

          You can get som useful information in this thread

          Plotting multiple locations in Google Maps

          1 of 1 people found this helpful
          • 2. Re: Google Maps Marker Clustering
            brendan_mahe

            Thanks Johan, nothing there about clustering though. I've got the multi-point google map working fine its just clustering the markers thats the problem.

            • 3. Re: Google Maps Marker Clustering
              jbrown

              Hi.

              It looks like you're missing the actual push of the cluster.

               

              Inside the for loop, you need to push the cluster there. So:

               

              var markers = new Array( [[MarkersArray]] );

               

              function addMarker(options) {

              var marker = new google.maps.Marker({map:map});

                                              marker.setOptions(options);

                                              markerBounds.extend(options.position)  }

               

              var end = markers.length;

              for(var i=0; i<end; i++) { addMarker({position: markers[i]['position'] });  markersClus.push(marker); }

                              map.setCenter(markerBounds.getCenter());

                              map.fitBounds(markerBounds);

               

               

               

               

              var markerCluster = new MarkerClusterer(map, markersClus,

              {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

              EDIT: I added a variable called "markersClus" in the .push line as well as in the new MarkerClusterer function.

               

               

              Each loop of the adding markers function needs to also push it into a cluster.

               

              I've got a clustered map, and simply removing this line, makes all the markers not cluster.

               

              LEt me know and I can look at it more.

               

              Thanks

              • 4. Re: Google Maps Marker Clustering
                brendan_mahe

                Thank for the hint Jeremy, I tried that exactly as you have suggested with no luck. Map doesn't load anymore, now it just looks like this (snaphshot attached).

                Screen Shot 2017-01-31 at 17.51.43.png

                 

                The revised code:

                -----------------------------------------------------------------------------------------------------------------

                <style type="text/css"> html, body {height: 100%}

                #map_canvas {height: 100%; }

                </style>

                <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

                <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

                <script type="text/javascript">

                 

                function initialize() { 

                          var myOptions = {mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId. ROADMAP,    google.maps.MapTypeId.HYBRID]}};

                          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                          var markerBounds    = new google.maps.LatLngBounds();

                          var markers    = new Array(    [[MarkersArray]] );

                          function addMarker(options) {

                                    var marker = new google.maps.Marker({map:map});

                                    marker.setOptions(options);

                                    markerBounds.extend(options.position)}  

                           var end = markers.length;

                           for(var i=0; i<end; i++) { addMarker({position: markers[i]['position'] });  markersClus.push(marker); }

                           map.setCenter(markerBounds.getCenter());

                           map.fitBounds(markerBounds);

                           var markerCluster = new MarkerClusterer(map, markersClus,

                           {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

                                                                             }

                </script>

                <body onload="initialize()">

                <div id="map_canvas"></div>

                <div id="latitude">|latitude|</div>

                <div id="longitude">|longitude|</div>

                -----------------------------------------------------------------------------------------------------------------

                 

                Any other ideas?

                Maybe the filemaker custom function "MarkersArray" needs adjusting to output its marker data in a different way?

                Any help greatly appreciated

                • 5. Re: Google Maps Marker Clustering
                  jbrown

                  Hello.

                  I'll take a look. There's something in there I can't quite see. I'll explore it.

                   

                  In the meantime, do you have a google map API key? When running your code in a browser, that's the first error that came up. It seems the clustering especially needs an API key.

                   

                  I'll take a look or send you a demo file that allows you to compare the code line by line, as I've done many times in the past☺

                   

                  jb

                  • 6. Re: Google Maps Marker Clustering
                    brendan_mahe

                    Yes I have a key AIzaSyDcpA3hQXecKUIBg5v47oT7tMSrV0F_fJo but the code never needed it, so I'm not using it yet. I guess that's probably it, will give it a try with the key

                    • 7. Re: Google Maps Marker Clustering
                      brendan_mahe

                      tried that, still no luck, revised code:

                      ----------------------------------------------------------------

                      <style type="text/css"> html, body {height: 100%}

                      #map_canvas {height: 100%; }

                      </style>

                      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

                      <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

                      <script type="text/javascript">

                       

                      function initialize() { 

                                var myOptions = {mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId. ROADMAP,    google.maps.MapTypeId.HYBRID]}};

                                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                                var markerBounds    = new google.maps.LatLngBounds();

                                var markers    = new Array(    [[MarkersArray]] );

                                function addMarker(options) {

                                          var marker = new google.maps.Marker({map:map});

                                          marker.setOptions(options);

                                          markerBounds.extend(options.position)}  

                                 var end = markers.length;

                                 for(var i=0; i<end; i++) { addMarker({position: markers[i]['position'] });  markersClus.push(marker); }

                                 map.setCenter(markerBounds.getCenter());

                                 map.fitBounds(markerBounds);

                                 var markerCluster = new MarkerClusterer(map, markersClus,

                                 {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

                                                                                   }

                      </script>

                      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcpA3hQXecKUIBg5v47oT7tMSrV0F_fJo&callback=initMap">

                      </script>

                       

                      <body onload="initialize()">

                      <div id="map_canvas"></div>

                      <div id="latitude">|latitude|</div>

                      <div id="longitude">|longitude|</div>

                      --------------------------------------------------------------------

                      • 8. Re: Google Maps Marker Clustering
                        MatesonG

                        Did you ever get this going?

                         

                        I'm riding along for the info.

                        • 9. Re: Google Maps Marker Clustering
                          brendan_mahe

                          Hi MatesonG

                          No the above method would not work for me. To get the multi-marker clustering working, I recently finished rewriting the code from the bottom-up following the method outlined by Google on their page Marker Clustering  |  Google Maps JavaScript API  |  Google Developers

                           

                          Remember there is a custom function in Filemaker which produces the Array 'MarkersArray' .

                           

                           

                          <style>

                          #map {

                          height: 100%;  }

                          html, body { height: 100%; margin: 0; padding: 0;  }

                          </style>

                          <body>

                          <div id="map"></div>

                          <script>

                          function initMap() {

                          var origLat = document.getElementById("latitude").innerHTML;

                          var origLng = document.getElementById("longitude").innerHTML;

                          var myOptions = {zoom:2, scaleControl: true,  center: new google.maps.LatLng(origLat,origLng),

                          mapTypeId: google.maps.MapTypeId.ROADMAP,

                          mapTypeControlOptions: {    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID  }};

                          var map = new google.maps.Map(document.getElementById('map'), myOptions);

                          var company = document.getElementById("company").innerHTML;  });

                          var bounds = new google.maps.LatLngBounds ();

                          for (var i = 0, LtLgLen = locations.length; i < LtLgLen; i++) {bounds.extend (locations[i]);}

                          map.fitBounds (bounds);

                          var infoWin = new google.maps.InfoWindow();

                          var markers = locations.map(function(location, i) {

                          var marker = new google.maps.Marker({ position: location    });

                          var markerCluster = new MarkerClusterer(map, markers,

                          {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', maxZoom: 6});   }

                          var locations =  new Array([[MarkersArray]]);

                          </script>

                          <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">

                          </script>

                          <script async defer

                          src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">

                          </script>

                          <div id="latitude" style="display: none;">|latitude|</div>

                          <div id="longitude" style="display: none;">|longitude|</div>

                          <div id="company" style="display: none;">|company|</div>

                          </body>

                          </html>

                           

                           

                           

                          Anyone know how to get an email from this forum when someone adds to your thread? I stumbled upon MatesonG's question only by chance.

                          1 of 1 people found this helpful
                          • 10. Re: Google Maps Marker Clustering
                            MatesonG

                            thanks !!!