如何使用jquery gmap3单击链接显示信息窗口

Question

I am using jquery gmap3 to display a map with markers for each results found from a search I built. Each marker has a infowindow that shows details about the location the marker is on, when someone clicks the marker on the map that infowindow shows that information. Below the map I show a list of the results found, for each result found what I want to do is have a link, when someone clicks that link the page scrolls up to the map then centers to the marker that the result belongs to and the infowindow pops up automatically. Is that possible? Here is my code:

  var base_lat = 33.609063;
  var base_lon = -112.105135;
  var base_markers = [{"latLng":["33.609063","-112.105135"],"data":"<div class=\"estate_info\"><img src=\"\/img\/realestate\/test_estate.jpg\"><b><a href=\"\/charming-payette-lake-cabin-with-private-dock-beach-rl2\">1022 E. St. Mill Valley, CA 85282<\/a><\/b><ul><li><label>Beds:<\/label>6<\/li><li><label>Baths:<\/label>3.0<\/li><li><label>Levels:<\/label>2<\/li><\/ul><ul><li><label>Price:<\/label>$520,000<\/li><li><li><label>Sqft:<\/label>5,600<\/li><li><a href=\"\/charming-payette-lake-cabin-with-private-dock-beach-rl2\">View Details &raquo;<\/a><\/li><\/ul><\/div>","options":{"icon":"\/img\/markers\/number_1.png"}},{"latLng":["33.479913","-111.699535"],"data":"<div class=\"estate_info\"><img src=\"\/img\/realestate\/default_estate.jpg\"><b><a href=\"\/single-level-mountain-view-home-in-central-laveen-rl1\">South of Baseline Rd \/ 51st Ave Laveen, CA 85384<\/a><\/b><ul><li><label>Beds:<\/label>3<\/li><li><label>Baths:<\/label>2.5<\/li><li><label>Levels:<\/label>1<\/li><\/ul><ul><li><label>Price:<\/label>$124,563<\/li><li><li><label>Sqft:<\/label>2,500<\/li><li><a href=\"\/single-level-mountain-view-home-in-central-laveen-rl1\">View Details &raquo;<\/a><\/li><\/ul><\/div>","options":{"icon":"\/img\/markers\/number_2.png"}}];

        $('#searchmap').gmap3({

        map:{

            options:{

                center:[base_lat,base_lon],
                zoom: 9,
                mapTypeControl: true,
                mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                scrollwheel: true,
                streetViewControl: true
            }

        },

        marker:{

            values: base_markers,

            options:{

                draggable: false

            },

            events:{

                click: function(marker, event, context) {

                    var map = $(this).gmap3("get"),

                    infowindow = $(this).gmap3({get:{name:"infowindow"}});

                    if (infowindow) {

                        infowindow.open(map, marker);
                        infowindow.setContent(context.data);

                    }else {

                        $(this).gmap3({

                            infowindow:{

                                anchor:marker,
                                options:{content: context.data}

                            }

                        });

                    }

                }

            }

        }

    });

Here are my results displaying under the map:

    <ul>
<li class="listing first">
                                       <div class="rphoto"><a href="#" style="background-image:url('/img/realestate/test_estate.jpg');"></a></div>
                                       <div class="details">
                                         <strong>1. <a href="#">Charming Payette Lake Cabin with private dock & beach</a></strong>
                                         <span>Type: Condo | Built: 1995 | Status: Backup or Contingent</span>
                                         <div class="info">This charming cabin is located on Payette Lake with private dock and beach. It offers 2 Bedroom and 1 Bath. Sleeps 8 with 2 Doubles, 1 bunk and 1 queen hideabed...<nav>Mill Valley, CA | Price: $520,000 | <a href="#">View Details &raquo;</a></nav></div>
                                         <ol>
                                           <li>6<br>Bed</li>
                                           <li>3.0<br>Bath</li>
                                           <li class="last">5,600<br>Sqft</li>
                                         </ol>
                                       </div>
                                      </li>
<li class="listing last">
                                       <div class="rphoto"><a href="#" style="background-image:url('/img/realestate/default_estate.jpg');"></a></div>
                                       <div class="details">
                                         <strong>2. <a href="#">Single-level mountain-view home in central Laveen</a></strong>
                                         <span>Type: House | Built: 2003 | Status: Active</span>
                                         <div class="info">With 3,200 square feet of living area and located just one lot back from the ocean, makes childhood dreams of fantastic sandcastles come true - and you can be one of the...<nav>Laveen, CA | Price: $124,563 | <a href="#">View Details &raquo;</a></nav></div>
                                         <ol>
                                           <li>3<br>Bed</li>
                                           <li>2.5<br>Bath</li>
                                           <li class="last">2,500<br>Sqft</li>
                                         </ol>
                                       </div>
                                      </li>
</ul>

So again in the search results how can I have it where if they click a link for one of the results it then centers the map where that marker is, so example the second result would center to the second marker on the map then the infowindow would automatically show. How can I do that using the jquery gmap3 code? Here is an example of what Im referring to:

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar_plain.htm

Answer 1

Ok I was able to figure it out. Here is the jquery code I added:

    $(".propertyclick").click(function() {

        //We first scroll to top of page
        $("html,body").animate({ scrollTop: 0 },"fast");

        //We then get the current id of the marker being clicked
        var id = $(this).attr('data-marker');

        //We now get the marker in the map that they want to see
        var marker = $("#estate_searchmap").gmap3({ get: { id: id } });

        //We now simulate that marker being clicked via the map
        google.maps.event.trigger(marker,'click');

        return false;

    });

In the listing results I added a link for them to click to trigger this:

<a href="" class="propertyclick" data-marker="property1"></a>

data-marker holds the id I assign to each marker in the json value in my original code called base_markers. So now you will see a new value in each marker such as id: "property1" then the next would be id: "property2" and so on. That is how I reference in the click function above to know which marker to call.