Google Maps v3 API和WordPress ACF：多个自定义标记

我已经找到了很多有关如何向Google Maps添加自定义标记的代码，但是几乎没有关于在同一张地图上使用不同标记的任何代码。例如，我可能要在“高级自定义字段”转发器字段中使用绿色标记显示4个标记，而与自定义帖子类型相关的其余标记将显示为灰色标记。

我尝试了几种不同的方法，例如复制marker变量以及更改名称和颜色，但是我尝试的所有操作都会破坏地图的某些部分。

这是我需要的两种不同类型地图标记的屏幕截图：http : //screencast.com/t/Cc5eE7St

下面的代码可以工作，但这只是标记的一种。

<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>