php WP ACF多谷歌地图

Posted 2021-05-04

<script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyCunuUn5UWwWC-H1rWjoPkfL1XwhjVbmFc' type='text/javascript'></script>
<ul class="maps">
<?php if ( have_rows('field_name') ) : ?>
<?php $i = 1;?>
<?php while( have_rows('field_name') ) : the_row(); $location = get_sub_field('field_name'); ?>
  <li class="map-item-<?php echo $i; ?>">
    <div id="map<?php echo $i; ?>" style="width: 100%;" class="map-item-box"></div>
    <script type="text/javascript">
    //<![CDATA[
        function load() {
            var lat = <?php echo $location['lat']; ?>;
            var lng = <?php echo $location['lng']; ?>;
            var latlng = new google.maps.LatLng(lat, lng),
                markerImg   =  '<?php echo get_template_directory_uri(); ?>/asset/images/location.png'; //  Иконка для маркера  
            var myOptions = {
                zoom: 17,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                scrollwheel: false,
            };
            var map = new google.maps.Map(document.getElementById("map<?php echo $i; ?>"), myOptions);
            var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                animation: google.maps.Animation.DROP, // анимация маркера DROP / BOUNCE
                icon: markerImg,
            });
        }
        load();
    //]]>
    </script>
  </li>
  <?php $i++; ?>      
<?php endwhile; ?>        
<?php endif; ?>
</ul>