title: How do I add Marker Clusters to my Google Map?
body: <p>I can't figure out how to add Marker Clusters to this map. It's used with Wordpress, so that the user can add locations to it from the Wordpress dashboard. I'm pretty new to Google API and I'm not having success with any examples that I find. Any help is appreciated! </p>
  
  <pre><code>&lt;?php // Index template
  get_header(); ?&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;div class="twelve column"&gt;
          &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
  
              &lt;div class="intro"&gt;
                  &lt;?php the_excerpt(); ?&gt;
                  &lt;hr&gt;
              &lt;/div&gt;
  
                  &lt;?php the_content(); ?&gt;
  
                  &lt;header class="clearfix"&gt;&lt;/header&gt;
                          &lt;div id="mapcanvas"&gt;&lt;/div&gt;
                                  &lt;?php
                                  // For creating multiple, customized loops.
                                  // http://codex.wordpress.org/Class_Reference/WP_Query
                                  $custom_query = new WP_Query('post_type=locations'); // exclude category 9
                                  while($custom_query-&gt;have_posts()) : $custom_query-&gt;the_post(); ?&gt;
                              s       &lt;?php if(get_field('link')): ?&gt;
                                        &lt;div&gt;
                                          &lt;?php while(has_sub_field('link')): ?&gt;
                                            &lt;div&gt;
                                                &lt;p&gt;&lt;?php the_sub_field('url'); ?&gt;&lt;/p&gt;
                                            &lt;/div&gt;
                                          &lt;?php endwhile; ?&gt;
                                        &lt;/div&gt;
                                      &lt;?php endif; ?&gt;
                                  &lt;?php endwhile; ?&gt;
                                  &lt;?php wp_reset_postdata(); // reset the query ?&gt;
  
                                  &lt;?php
                                  function get_single_term($post_id, $taxonomy)
                                  {
                                    $terms = wp_get_object_terms($post_id, $taxonomy);
                                    if(!is_wp_error($terms)) {
                                      return '&lt;a href="'.get_term_link($terms[0]-&gt;slug, $taxonomy).'"&gt;'.$terms[0]-&gt;name.'&lt;/a&gt;';
                                    }
                                  }
  
                                  $i = 0;
  
                                  // For creating multiple, customized loops.
                                  // http://codex.wordpress.org/Class_Reference/WP_Query
                                      $custom_query = new WP_Query('post_type=location&amp;posts_per_page=-1');
                                      while($custom_query-&gt;have_posts()) : $custom_query-&gt;the_post();
  
                                        $title = get_the_title(); // Location title
                                        $map   = get_field('location'); // ACF location contains address and coordinates
                                        $terms = strip_tags( get_the_term_list( $post-&gt;ID, 'distributors', '', ' &amp; ' )); // Get distributor terms and rm links
                                        $info  = '&lt;strong&gt;' . $title . '&lt;/strong&gt;&lt;br&gt;' . $map['address']; // Info window content
                                        $link = get_field('link');
                                        if($link){
                                          $info .= '&lt;br&gt;&lt;a href="http://'. $link .'"&gt;'. $link .'&lt;/a&gt;';
                                        }
                                        $location[$i][0] = $title; // Store the post title
                                        $location[$i][1] = $map['coordinates']; // Store the ACF coordinates
                                        $location[$i][2] = json_encode($info); // Store info window content
                                        $location[$i][3] = strip_tags( get_single_term( $post-&gt;ID, 'distributors' )); // Get first term for marker icon
  
                                        $i ++;
                                      endwhile; ?&gt;
                                      &lt;?php wp_reset_postdata(); // reset the query ?&gt;
  
                                  &lt;script&gt;
                                    var geocoder;
                                    var map;
                                  $(function initialize() {
                                    geocoder = new google.maps.Geocoder();
                                    // Center map on our main location
                                    var myLatLng = new google.maps.LatLng(41.583013,-93.63701500000002);
                                    var bounds = new google.maps.LatLngBounds();
  
                                    // https://developers.google.com/maps/documentation/javascript/styling
                                    // Create an array of styles.
                                    var styles = [
                                      {
                                        stylers: [
                                          { saturation: -99.9 }
                                        ]
                                      }
                                    ];
  
                                    // Create a new StyledMapType object, passing it the array of styles,
                                    // as well as the name to be displayed on the map type control.
                                    var styledMap = new google.maps.StyledMapType(styles, {name: 'exile'});
  
                                    // Create a map object, and include the MapTypeId to add
                                    // to the map type control.
                                    var mapOptions = {
                                      mapTypeId: 'roadmap',
                                      center: myLatLng,
                                      zoom: 14,
                                      disableDefaultUI: false,
                                      scrollwheel: true,
                                      draggable: true
                                    };
                                    // Display a map on the page
                                    map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
                                    map.setTilt(45);
  
                                    //Associate the styled map with the MapTypeId and set it to display.
                                    map.mapTypes.set('exile', styledMap);
                                    map.setMapTypeId('exile');
  
                                  // Marker icons
                                    typeObject = {
                                      "Others" : {
                                        "icon" : new google.maps.MarkerImage('http://exilebrewing.com/site/img/beer-mug.png', new google.maps.Size(18,26), new google.maps.Point(0,0), new google.maps.Point(9,26)),
                                        "shadow" : new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png', new google.maps.Size(40,34))
                                      }
                                    }
  
                                    // http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
                                    // Multiple Markers
                                    var markers = [
                                      ["Exile Brewing Co", 41.583013,-93.63701500000002,"Others"],
                                      &lt;?php
                                      if (count($location)&gt;0) {
                                        foreach ($location as $key =&gt; $value){
                                          if ($key &lt; (count($location)-1)){
                                            echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"], ' . "\n";
                                          } else {
                                            echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"]';
                                          }
                                        }
                                      }
                                      ?&gt;
                                    ];
  
                                    // Info Window Content
                                    var infoWindowContent = [
                                      ["&lt;strong&gt;Exile Brewing Co.&lt;/strong&gt;&lt;br&gt;1514 Walnut Street, Des Moines"],
                                      &lt;?php
                                      if (count($location)&gt;0) {
                                        foreach ($location as $key =&gt; $value){
                                          if ($key &lt; (count($location)-1)) {
                                            echo '[' . $location[$key][2] . '], ' . "\n";
                                          } else {
                                            echo '[' . $location[$key][2] . ']';
                                          }
                                        }
                                      }
                                      ?&gt;
                                    ];
  
                                    // Display multiple markers on a map
                                    var infoWindow = new google.maps.InfoWindow(), marker, i;
  
                                    // Loop through our array of markers &amp; place each one on the map
                                    for( i = 0; i &lt; markers.length; i++ ) {
                                      var position = new google.maps.LatLng(markers[i][1], markers[i][2]); // ACF coordinates
                                      var icon = typeObject[markers[i][3]]['icon'];
                                      var shadow = typeObject[markers[i][3]]['shadow'];
                                      bounds.extend(position);
                                      marker = new google.maps.Marker({
                                        position: position,
                                        map: map,
                                        title: markers[i][0],
                                        icon: icon,
                                        shadow: shadow
                                      });
  
                                      // Allow each marker to have an info window
                                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                        return function() {
                                          infoWindow.setContent(infoWindowContent[i][0]);
                                          infoWindow.open(map, marker);
                                        }
                                      })(marker, i));
  
                                      // Automatically center the map fitting all markers on the screen
                                      //map.fitBounds(bounds);
                                    }
                                    function codeAddress() {
                                    var address = document.getElementById('address').value;
                                    geocoder.geocode( { 'address': address}, function(results, status) {
                                      if (status == google.maps.GeocoderStatus.OK) {
                                        map.setCenter(results[0].geometry.location);
                                        var marker = new google.maps.Marker({
                                            map: map,
                                            position: results[0].geometry.location
                                        });
                                      } else {
                                        alert('Geocode was not successful for the following reason: ' + status);
                                      }
                                    });
                                  }
                                    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
                                    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                                      this.setZoom(15);
                                      google.maps.event.removeListener(boundsListener);
                                    });
  
                                  });
                                  &lt;/script&gt;
                                    &lt;div id="panel"&gt;
                                      &lt;input id="address" type="textbox" value="Sydney, NSW"&gt;
                                      &lt;input type="button" value="Geocode" onclick="codeAddress()"&gt;
                                    &lt;/div&gt;
                                  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  
  
                  &lt;footer class="clearfix"&gt;&lt;/footer&gt;
      &lt;?php endwhile;?&gt;
      &lt;?php endif; ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;?php get_footer(); ?&gt;
  </code></pre>
  
  <p>Some </p>