ショートコードによる複数のGoogleマップ

Question

WordPressのfunctions.php内に複数のGoogleマップを追加しようとしていますが、最後の地図だけが表示されています。

複数のマップを表示するにはどうすればよいですか？ ショートコードループを作成することはできますか？

var "map"を$ argまたはランダムIDで置き換えようとしましたが、成功しませんでした。

add_shortcode('map', 'gmaps_map'); 
function gmaps_map($args) { 

     $id = substr(sha1("Google Map" . time()), rand(2, 10), rand(5, 8)); 
    ob_start(); 

    $args = shortcode_atts(array(
     'lat' => '49', 
     'lng' => '9', 
     'zoom' => '12', 
     'height' => '300px', 
     'id' => '0' 
    ), $args, 'map'); 

    ?> 
    <div class='map' style='height:<?php echo $args['height'] ?>;' id='map-<?php echo $id ?>'></div> 

    <script type='text/javascript'> 
    var <?php echo $args['id'] ?>; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map-<?php echo $id ?>'), { 
     center: {lat: <?php echo $args['lat'] ?>, lng: <?php echo $args['lng'] ?>}, 
     zoom: <?php echo $args['zoom'] ?> 

     }); 

     var image = new google.maps.MarkerImage("<?php echo get_template_directory_uri(); ?>/images/marker.png", null, null, null, new google.maps.Size(64,64)); 

     var marker = new google.maps.Marker({ 
     position: {lat: <?php echo $args['lat'] ?>, lng: <?php echo $args['lng'] ?>}, 
     map: map, 
     icon: image, // null = default icon 
     animation: google.maps.Animation.DROP, 
     title: 'Hello World!' 
     }); 

    } 
    </script> 

    <?php 
    $output = ob_get_clean(); 
    return $output; 
} 

add_action('wp_enqueue_scripts', 'gmaps_enqueue_assets'); 
function gmaps_enqueue_assets() { 
    wp_enqueue_script( 
     'google-maps', 
     '//maps.googleapis.com/maps/api/js?callback=initMap', 
     array(), 
     '1.0', 
     true 
    ); 
} 

Answer 1

これは（ないのfunctions.phpのショート以内）、別のjsファイル内で動作

function initMap(id, lang, long) { 
    var map = new google.maps.Map(document.getElementById(id), { 
     center: {lat: lang, lng: long}, 
     zoom: 13 

    }); 

    var image = new google.maps.MarkerImage("/images/marker.png", null, null, null, new google.maps.Size(64,64)); 

    var marker = new google.maps.Marker({ 
     position: {lat: lang, lng: long}, 
     map: map, 
     icon: image, // null = default icon 
     animation: google.maps.Animation.DROP, 
     title: 'Hello World!' 
    }); 

    } 

$(document).ready(function() { 
    $('.map').each(function() { 
     initMap($(this).attr('id'), parseFloat($(this).data('lat')), parseFloat($(this).data('lng'))); 
    }); 
});