brendan_mahe

Google Maps Marker Clustering

Discussion created by brendan_mahe on Jan 31, 2017
Latest reply on Jul 25, 2017 by MatesonG

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>

Outcomes