Mehrere Google Maps per Kurzwahl

Question

Ich versuche, mehrere Google Maps in WordPress functions.php hinzuzufügen, aber nur die letzte Karte wird angezeigt.

Wie kann ich mehrere Karten anzeigen? Ist es möglich, eine Shortcode-Schleife zu erstellen?

Ich habe versucht, var "Karte" mit einem $ Arg oder einer zufälligen ID ohne Erfolg zu ersetzen.

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

Dies funktioniert in einer separaten JS-Datei (nicht im functions.php Short)

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'))); 
    }); 
});