php - ACF Map not showing up -
i developing first wordpress template acf's map, div code coming out empty.
could bring me light, please? know possibly stupid have missed out, new php , working hard learn :)
this index code, had remove loop giving me error.
i got code acf's website
<?php get_header(); ?> <div class="map"> <?php if( have_rows('address') ): ?> <div class="acf-map"> <?php while ( have_rows('address') ) : the_row(); $location = get_sub_field('address'); ?> <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> <h4><?php the_sub_field('room_type'); ?></h4> <p class="address"><?php echo $location['address']; ?></p> <p><?php the_sub_field('description'); ?></p> </div> <?php endwhile; ?> </div> <?php endif; ?> </div> <?php get_footer(); ?>
this header code, have copied acf.
<style type="text/css"> .acf-map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> (function($) { /* * render_map * * function render google map onto 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 }; // create map var map = new google.maps.map( $el[0], args); // add markers reference map.markers = []; // add markers $markers.each(function(){ add_marker( $(this), map ); }); // center map center_map( map ); } /* * add_marker * * function add marker 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 }); // add array map.markers.push( marker ); // if marker contains html, add infowindow if( $marker.html() ) { // create info window var infowindow = new google.maps.infowindow({ content : $marker.html() }); // show info window when marker clicked google.maps.event.addlistener(marker, 'click', function() { infowindow.open( map, marker ); }); } } /* * center_map * * function center map, showing markers attached 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 markers , create bounds $.each( map.markers, function( i, marker ){ var latlng = new google.maps.latlng( marker.position.lat(), marker.position.lng() ); bounds.extend( latlng ); }); // 1 marker? if( map.markers.length == 1 ) { // set center of map map.setcenter( bounds.getcenter() ); map.setzoom( 16 ); } else { // fit bounds map.fitbounds( bounds ); } } /* * document ready * * function render each map when document ready (page has loaded) * * @type function * @date 8/11/2013 * @since 5.0.0 * * @param n/a * @return n/a */ $(document).ready(function(){ $('.acf-map').each(function(){ render_map( $(this) ); }); }); })(jquery); </script>
1.- make sure jquery loading first. said code in header check if jquery loading in footer , let know what's error have in console.
2.- var_dump($location) , make sure field address on acf. see if have data there...
Comments
Post a Comment