Я использую jquery gmap3 для отображения карты с маркерами для каждого результата, найденного в результате поиска, который я построил. У каждого маркера есть информационное окно, в котором отображаются сведения о местоположении, в котором находится маркер. Когда кто-либо щелкает маркер на карте, в этом информационном окне отображается эта информация. Под картой я показываю список найденных результатов, для каждого найденного результата я хочу иметь ссылку, когда кто-то нажимает на эту ссылку, страница прокручивается вверх до карты, затем центрируется на маркере, которому принадлежит результат, и информационное окно всплывает автоматически. Это возможно? Вот мой код:
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 »<\/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 »<\/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}
}
});
}
}
}
}
});
Вот мои результаты, отображаемые под картой:
<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 »</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 »</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>
Итак, снова в результатах поиска, как я могу получить его, где, если они щелкнут ссылку для одного из результатов, он затем центрирует карту, где находится этот маркер, поэтому, например, второй результат будет центрирован на второй маркер на карте, тогда информационное окно будет автоматически показать. Как я могу это сделать, используя код jquery gmap3? Вот пример того, что я имею в виду:
http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar_plain.htm
