Note that there are some explanatory texts on larger screens.

plurals
  1. POusing the google maps API - marker cluster
    primarykey
    data
    text
    <p>I really am a JS noob - I have never really used itbefore and am struggling using the marker clusterer google provide. I have rad the documentation</p> <p>here is the code</p> <pre><code>&lt;script src="http://localhost/wheredidmytweetgo/js/markercluster.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2( document.getElementById("map")); map.addControl(new GSmallMapControl()); map.setCenter( new GLatLng( 56.65622649350222, -19.86328125), 2); var mc = new MarkerClusterer(map); function createMarker(point, text, title) { var marker = new GMarker(point,{title:title}); GEvent.addListener( marker, "click", function() { marker.openInfoWindowHtml(text); }); return marker; } &lt;?php foreach ($cluster_location as $location) { ?&gt; var marker = createMarker( new GLatLng(&lt;?php echo $location ?&gt;), 'Marker text &lt;?php echo $location ?&gt;', 'Example Title text &lt;?php echo $location ?&gt;'); map.addMarker(marker); &lt;?php } ?&gt; } } </code></pre> <p>cluster location is just an array of lat and longs - My code is working fine when just using the add.overlay however there are too many to make the map readable hence the need for clustering. I do load the clustering JS which I have I have included. I create the clusterer object and pass in map as defined.</p> <pre><code>var markers = []; //create array </code></pre> <p>I know I can create a JS array and pass this in to </p> <pre><code>var mc = new MarkerClusterer(map, markers); </code></pre> <p>But I simply dont have the JS knowledge to create an array at this time (I intend to learn) and the Google documentation advises you can iterate and add one at a time using <code>addMarker</code></p> <p>Hi Tom - Thanksfor the info - I have tried doing what you advised and have came up with the below:</p> <pre><code>&lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://localhost/wheredidmytweetgo/js/markercluster.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; function initialize() { var center = new google.maps.LatLng(37.4419, -122.1419); var map = new google.maps.Map(document.getElementById('map'), { 'zoom': 13, 'center': center, 'mapTypeId': google.maps.MapTypeId.ROADMAP }); var markers = []; &lt;?php foreach ($cluster_location as $location) { ?&gt;{ var marker = new google.maps.Marker({'position': &lt;?php echo $location;?&gt;}); markers.push(marker); } &lt;? } ?&gt; var markerCluster = new MarkerClusterer(map, markers); } google.maps.event.addDomListener(window, 'load', initialize); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&gt;A simple example of MarkerClusterer (100 markers)&lt;/h3&gt; &lt;p&gt; &lt;a href="?compiled"&gt;Compiled&lt;/a&gt; | &lt;a href="?"&gt;Standard&lt;/a&gt; version of the script. &lt;/p&gt; &lt;div id="map-container"&gt;&lt;div id="map"&gt;&lt;/div&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>But my map still loads empty. I'm using literally the most basic google provided code now and just loading my own markers in. I know my markers positioning should be okay because when I go to view my page source I can see </p> <pre><code>{ var marker = new google.maps.Marker({'position': 40.0994425,-74.9325683}); markers.push(marker); }); </code></pre> <p>for each marker. any more help would really be appreciated!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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