Marker Clusterer not Clustering / TypeError

Question

This question pertains to the Google Maps Marker Clusterer. I don't know if my placement of the marker clusterer is off, or what, but it's not coming through. I get the error: Uncaught TypeError: Can not read property of 'icon' of undefined. This error does not come through when the marker clusterer code is not in place.

Link to page for reference: http://exilebrewing.com/locations/

Does anyone understand why this is happening? Any insight is appreciated!

<?php // Index template
get_header(); ?>


<div class="twelve column">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div class="intro"> </div>
      <?php the_content(); ?>
      <div>
      <header class="clearfix"></header>
      <div id="mapcanvas"></div>
     <?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->have_posts()) : $custom_query->the_post(); ?>
         <?php if(get_field('link')): ?>
            <div>
              <?php while(has_sub_field('link')): ?>
                <div>
                    <p><?php the_sub_field('url'); ?></p>
                </div>
              <?php endwhile; ?>
            </div>
          <?php endif; ?>
      <?php endwhile; ?>
      <?php wp_reset_postdata(); // reset the query ?>
      <?php
        function get_single_term($post_id, $taxonomy)
        {
          $terms = wp_get_object_terms($post_id, $taxonomy);
          if(!is_wp_error($terms)) {
            return '<a href="'.get_term_link($terms[0]->slug, $taxonomy).'">'.$terms[0]->name.'</a>';
          }
        }

        $i = 0;

        // For creating multiple, customized loops.
        // http://codex.wordpress.org/Class_Reference/WP_Query
        $custom_query = new WP_Query('post_type=location&posts_per_page=-1');
        while($custom_query->have_posts()) : $custom_query->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->ID, 'distributors', '', ' & ' )); // Get distributor terms and rm links
          $info  = '<strong>' . $title . '</strong><br>' . $map['address']; // Info window content
          $link = get_field('link');
          if($link){
            $info .= '<br><a href="http://'. $link .'">'. $link .'</a>';
          }
          $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->ID, 'distributors' )); // Get first term for marker icon

          $i ++;
        endwhile; ?>
        <?php wp_reset_postdata(); // reset the query ?>

        <script type="text/javascript">
          function initialize() {
            var myLatLng = new google.maps.LatLng(41.583013,-93.63701500000002);
            var bounds = new google.maps.LatLngBounds();
                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
                var map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
                //var mc = new MarkerClusterer(map);
                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))
                  }

                }

            var markers = [

          ];
          for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
          var marker = new google.maps.Marker({
              position: latLng
          });
          markers.push(marker);
          }
          var markerCluster = new MarkerClusterer(map, markers);


          // Info Window Content
          var infoWindowContent = [
            ["<strong>Exile Brewing Co.</strong><br>1514 Walnut Street, Des Moines"],
            <?php
            if (count($location)>0) {
              foreach ($location as $key => $value){
                if ($key < (count($location)-1)) {
                  echo '[' . $location[$key][2] . '], ' . "\n";
                } else {
                  echo '[' . $location[$key][2] . ']';
                }
              }
            }
            ?>
          ];


          // Display multiple markers on a map
          var infoWindow = new google.maps.InfoWindow(), marker, i;

         // Loop through our array of markers & place each one on the map
         for( i = 0; i < 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(markers, 'click', (function(markers, i) {
            return function() {
              infoWindow.setContent(infoWindowContent[i][0]);
              infoWindow.open(map, markers);
            }
          })(markers, i));
          // Automatically center the map fitting all markers on the screen
          //map.fitBounds(bounds);
          }
          // 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);
             });
        };

      google.maps.event.addDomListener(window, 'load', initialize);
      </script>

  <footer class="clearfix"></footer>
<?php endwhile;?>
<?php endif; ?>
</div>
</div>

<?php get_footer(); ?>

Answer 1

You are pushing your google.maps.Markers onto the array of markers (which are not google.maps.Markers. MarkerClusterer expects an array of google.maps.Markers.

In the global scope:

var gmarkers = [];

when you create the marker push it onto this new array (not onto the end of the markers array):

      var marker = new google.maps.Marker({
          position: latLng
      });
      gmarkers.push(marker);

Use the new array to initialize the marker clusterer:

      var markerCluster = new MarkerClusterer(map, gmarkers);