javascript - Click on Google Map Marker, load wordpress post into div -
i'm working on wordpress site google map main page. markers on map created posts, each have location associated them (by using advanced custom fields). goal click on particular marker, , have load marker's associated post div @ bottom of screen.
<div class="acf-map"> <?php if ( $query->have_posts() ) : while ($query->have_posts() ) : $query->the_post(); ?> <?php $location = get_field('location'); if( !empty($location) ): ?> <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> </div> the divs class "marker" not loaded onto map directly, rather collected script , passed following function google method
function add_marker( $marker, map ) { // var var latlng = new google.maps.latlng( $marker.attr('data-lat'), $marker.attr('data-lng')) var postid = $marker.attr('id'); // create marker var marker = new google.maps.marker({ position : latlng, map : map, idofpost : postid }); // add array map.markers.push( marker ); var infowindow = new google.maps.infowindow({ content:"<?php the_field('sound_description'); ?>" }); $.each() marker.addlistener('click', function() { infowindow.open(map, marker); }); } as beginner, i'm having difficulty figuring out best workflow achieve above-stated goal. appreciated.
thank you,
Comments
Post a Comment