Google Maps v3 API and WordPress ACF: Multiple Custom Markers

Question

I've found lots of code for how to add custom markers to Google Maps, but hardly anything about using different markers on the same map. For instance, I may have 4 markers from an Advanced Custom Fields repeater field that I want to appear with a green marker, and the rest of the markers related to a custom post type to appear with a gray marker.

I've tried a few different methods, like duplicating the marker variable and changing the name and colors, but everything I try breaks some part of the map.

Here's a screenshot of the two different types of map markers I need: http://screencast.com/t/Cc5eE7St

The code below works, but it's all one type of marker.

<style type="text/css">

.acf-map {
    width: 100%;
    height: 730px;
}

/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}

</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function($) {

/*
*  new_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function new_map( $el ) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
        zoom        : 5,
      scrollwheel: false,
        center: {lat: 39.8, lng: 98.5795},
        mapTypeId   : google.maps.MapTypeId.ROADMAP,
         styles: [
    {
        "featureType": "all",
        "elementType": "all"
    };

    // create map
    var map = new google.maps.Map( $el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function(){

        add_marker( $(this), map );

    });

    // center map
    center_map( map );

    // return
    return map;

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // // create marker
    // var marker = new google.maps.Marker({
    //  position    : latlng,
    //  map         : map
    // });

  var grayCircle = {
    //path: 'M -1,0 A 1,1 0 0 0 1,0 1,1 0 0 0 -1,0 z',
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: '#888888',
    fillOpacity: 1,
    scale: 3,
    strokeColor: "#888888",
     strokeWeight: 3
  };

  var marker = new google.maps.Marker({
    position: latlng,
    icon: grayCircle,
    map: map
  });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open( map, marker );

        });
    }

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map( map ) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

    });

    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 5 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/
// global var
var map = null;

$(document).ready(function(){

    $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

    });

});

})(jQuery);
</script>

    <div class="portfolio-map">

    <div class="acf-map">

            <?php
            // check if the repeater field has rows of data
            if( have_rows('site_details') ):
                // loop through the rows of data
                while ( have_rows('site_details') ) : the_row();
                    // display a sub field value
                    $siteName = get_sub_field('site_name');
                    $siteLink = get_sub_field('site_link');
                    $siteAddress = get_sub_field('site_address');
            ?>
                <!-- I would like this set of information to have a green marker --> <div class="marker" data-lat="<?php echo $siteAddress['lat']; ?>" data-lng="<?php echo $siteAddress['lng']; ?>">
                    <h4><?php echo $siteName; ?></h4>
                </div>
        <?php
            endwhile;
                else :
                    // no rows found
                endif;
        ?>

            <?
                $args = array(
                  'post_type' => 'organization',
                  'posts_per_page' => 99
                );

                $locationMap = new WP_Query($args);
                $count = 0;
            ?>

              <? if($locationMap->have_posts()) : while($locationMap->have_posts()) : $locationMap->the_post();
                  $count++;
                  $location = get_field('organization_address');
                  $siteLocation = get_field('site_address');

               ?>

                <!-- I would like this set of information to have a gray marker --> <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                    <a href="<?php the_permalink(); ?>">
                        <img class="popup" src="<?php the_field('logo'); ?>"/>
                    </a>
                    <div class="popup-details">
                        <?php the_field('map_popup_details'); ?>
                    </div>
                    <div class="popup-link">
                        <a href="<?php the_permalink(); ?>">Learn More </a>
                    </div>
                </div>
              <? endwhile; endif; ?>

        <?php wp_reset_query(); ?>

        </div>
    </div>

Answer 1

Charlotte, you could add a "data-marker" attribute to each of your marker objects as you build the markup, like this (green/grey wherever you need them)

<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; data-marker="green/grey" ?>">

And then in the javascript you can check the marker type using the data-marker you set in the code, like this

var grayCircle = {
    //path: 'M -1,0 A 1,1 0 0 0 1,0 1,1 0 0 0 -1,0 z',
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: '#888888',
    fillOpacity: 1,
    scale: 3,
    strokeColor: "#888888",
    strokeWeight: 3
};

var greenMarker = //create your marker here

//Check your marker type, if it's green then set that otherwise leave it grey
var markerType = $marker.attr('data-marker')=="green"?greenMarker:greyCircle;

var marker = new google.maps.Marker({
    position: latlng,
    //Set your marker using markerType here
    icon: markerType,
    map: map
});