Databases
StackOverflow2013
Postsdbo
POAdding Marker Clusters to Store Locator Library examples (using Google Maps API v3)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding Marker Clusters to Store Locator Library examples (using Google Maps API v3)
    text
    copied!<p>I am using and adapting the examples/demo's from <a href="http://storelocator.googlecode.com/git/index.html" rel="nofollow">Store Locator Library for Maps API</a>.</p> <p>I would like to add Cluster Markers to my map. The section of code i believe is relevant for this is:</p> <blockquote> <p>var ICON = new google.maps.MarkerImage( pathImage, null, null, new google.maps.Point( 14, 13 ) ); var SHADOW = new google.maps.MarkerImage( pathShadow, null, null, new google.maps.Point( 14, 13 ) );</p> </blockquote> <pre><code>google.maps.event.addDomListener ( window, 'load', function() { var map = new google.maps.Map ( document.getElementById( canvasLoc ), { center: new google.maps.LatLng( 53.64, -3.3 ), zoom: 6, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP } ); var panelDiv = document.getElementById( panelLoc ); var data = new CustomDataSource; var view = new storeLocator.View ( map, data, { geolocation: false, features: data.getFeatures() } ); map.setOptions({styles: styles}); view.createMarker = function( store ) { var markerOptions = { position: store.getLocation(), icon: ICON, shadow: SHADOW, title: store.getDetails().title }; return new google.maps.Marker( markerOptions ); } var infoBubble = new InfoBubble({ maxWidth: 300, arrowSize: 20, borderWidth: 8, borderColor: 'rgb(255,255,255)', backgroundColor: 'rgba(204,204,204, 0.7)' }); view.getInfoWindow = function( store ) { if( !store ) { return infoBubble; } var details = store.getDetails(); var html = [ '&lt;div class="store"&gt;&lt;div class="title"&gt;', details.title, '&lt;/div&gt;&lt;div class="address"&gt;', details.address, '&lt;/div&gt;', '&lt;div class="hours misc"&gt;', details.hours, '&lt;/div&gt;&lt;/div&gt;' ].join(''); infoBubble.setContent( $( html )[0] ); return infoBubble; }; new storeLocator.Panel ( panelDiv, { view: view } ); } ); </code></pre> <p>The above is taken from custom.js</p> <p>I cant see exactly where i should put the code for the Marker clusters (examples given <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html" rel="nofollow">here</a>). It says I need to add the markers to an array and pass this to the MarkerClusterer object along with the map. </p> <p>The following is the best ive been able to come up with:</p> <pre><code> var view = new storeLocator.View ( map, data, { geolocation: false, features: data.getFeatures() } ); map.setOptions({styles: styles}); var markers=[]; view.createMarker = function( store ) { var markerOptions = { position: store.getLocation(), icon: ICON, shadow: SHADOW, title: store.getDetails().title }; return new google.maps.Marker( markerOptions ); } markers.push(view.createMarker); markerClusterer = new MarkerClusterer(map, markers) </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload