wordprsessでgoogle mapを表示し、複数マーカーを表示しマーカー画像も変更したい

実現したいことは、Wordpressで複数のマーカーを表示させ、尚かつマーカー画像も変更したいです。

下記サイトのやり方で、wordpressのプラグインのACFを使用して一つだけは、
マーカーを設置しマーカー画像も変更出来ましたが、複数設置する方法が、分かりません。

/google map

(function($) {

/*
*  render_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 render_map( $el ) {



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

  // vars
  var args = {
    zoom    : 16,
    center    : new google.maps.LatLng(0, 0),
    mapTypeId : google.maps.MapTypeId.ROADMAP,
    draggable: true, //追記ドラッグ禁止
    scrollwheel: false //スクロール禁止
  };

  // 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 );

}

/*
*  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 ) {
  
  // color
  var styleOptions = [{
 'stylers': [{
 'gamma': 1.2//ガンマ
 }, {
 'saturation': -100//彩度
 }, {
 'lightness': -20//明度
 }]
 }]

 var styledMapOptions = {
 name: 'mono'
 }
 var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('mono', monoType);
 map.setMapTypeId('mono');



  // var
  var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
  var icon = new google.maps.MarkerImage('');
  // create marker
  var marker = new google.maps.Marker({
    position  : latlng,
    map     :  map,
    icon    : icon
  });

  // 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( 16 );
  }
  else
  {
    // fit to bounds
    map.fitBounds( bounds );
  }

}