javascript - Open infoWindows from an external link outside of the google map

Question

I'm currently working with the Google Maps API to create a property map. I have it controlled through a Custom Post type which brings in the markers onto the map with infoWindows which open when they're clicked.

I now need to implement some kind of way to list the properties (eventually into a slider) beneath the map so that when the property is clicked outside of the map the map pans to the marker and opens the infoWindow.

At the moment I can't get it to work at all - I'm not a very strong javascript coder so any help would be much appreciated.

I have a list of the post type entries below the map at the moment but no way of linking them..

Here's a snippet of the code so far for the map..

     /* MARKER 1 */

function add_marker( $marker, map ) {

    // var
    var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';
    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,
        icon: image
    });



    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });





        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'mouseover', function() {

            if($('.gm-style-iw').length) {
                $('.gm-style-iw').parent().hide();
            }


            infowindow.open( map, marker );


        });



            google.maps.event.addListener(marker, "mouseout", function() {
                marker.setAnimation(null);
            });




    }






}

And this is the code I have so far for the list of properties beneath the map..

    <?php 
$maps = get_posts( array(
    'post_type' => 'properties',
    'posts_per_page' => -1
    ) );?>

<?php foreach($maps as $map): ?>
    <?php
     $location = get_field('location',$map->ID);
     $price = get_field('price',$map->ID);
     $squareft = get_field('sq_ft_total',$map->ID);
     $buylet = get_field('to_buy_or_to_let',$map2->ID);
     $link = the_permalink($map->ID);

?>


<div id="map_list">

       <ul id="map-locations">

            <li data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <h3><a href="<?php echo post_permalink( $map ); ?>"><?php echo $location['address']; ?></a></h3>
            </li>

        </ul>


     </div>


<?php endforeach; ?> 

Answer 1

The easiest way would be to add each marker to a markers array. Then create a link for each marker which contains a reference to the markers index of your marker, this way you can trigger a click event on the marker itself when clicking your external link.

function initialize() {

    var markers = new Array();

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1, 1)
    };

    var locations = [
        [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
        [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
        [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
        [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
        [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
        [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    for (var i = 0; i < locations.length; i++) {

        // Append a link to the markers DIV for each marker
        $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

        var marker = new google.maps.Marker({
            position: locations[i][0],
            map: map,
            title: locations[i][1],
        });

        // Register a click event listener on the marker to display the corresponding infowindow content
        google.maps.event.addListener(marker, 'click', (function (marker, i) {

            return function () {
                infowindow.setContent(locations[i][2]);
                infowindow.open(map, marker);
            }

        })(marker, i));

        // Add marker to markers array
        markers.push(marker);
    }

    // Trigger a click event on each marker when the corresponding marker link is clicked
    $('.marker-link').on('click', function () {

        google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
    });
}

initialize();

JSFiddle demo