Wordpress プラグイン (Store Locator Plus - 地図にたくさんの店舗を表示し、その下に店舗のリストを表示) を使用していますが、これは問題ありませんが、少し変更する必要があり、地図と情報を処理するファイルが見つかりました.js ファイルです。
プラグインは、ポインターをクリックすると表示される風船に画像を表示します。マップの下のリストに同じ画像を表示したいと思います。
これは、バルーン内のものを表示するコードです。
function createMarker(point, name, address, homeAddress, description, url, email, hours, phone, image,tags) {
markerOpts = { icon:theIcon };
var marker = new GMarker(point, markerOpts);
var more_html="";
if(url.indexOf("http://")==-1) {
url="http://"+url;
}
if (url.indexOf("http://")!=-1 && url.indexOf(".")!=-1) {
more_html+="| <a href='"+url+"' target='_blank' class='storelocatorlink'><nobr>" + slplus.website_label +"</nobr></a>"
} else {
url="";
}
if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1) {
if (!slplus.use_email_form) {
more_html+="| <a href='mailto:"+email+"' target='_blank' class='storelocatorlink'><nobr>" + email +"</nobr></a>";
} else {
more_html+="| <a href='javascript:slp_show_email_form("+'"'+email+'"'+");' class='storelocatorlink'><nobr>" + email +"</nobr></a><br/>";
}
}
if (image.indexOf(".")!=-1) {more_html+="<br/><img src='"+image+"' class='sl_info_bubble_main_image'>"} else {image=""}
if (description!="") {more_html+="<br/>"+description+"";} else {description=""}
if (hours!="") {more_html+="<br/><span class='location_detail_label'>Hours:</span> "+hours;} else {hours=""}
if (phone!="") {more_html+="<br/><span class='location_detail_label'>Phone:</span> "+phone;} else {phone=""}
var street = address.split(',')[0];
if (street.split(' ').join('')!=""){
street+='<br/>';
}else{
street="";
}
var street2 = address.split(',')[1];
if (street2.split(' ').join('')!=""){
street2+='<br/>';
}else{
street2="";
}
var city = address.split(',')[2];
if (city.split(' ').join('')!=""){
city+=', ';
}else{
city="";
}
var state_zip = address.split(',')[3];
// If we want to show tags in the bubble...
//
if (slplus.show_tags) {
if (jQuery.trim(tags) != '') {
more_html += '<br/>'+tags;
}
}
if (homeAddress.split(" ").join("")!="") {
var html = '<div id="sl_info_bubble"><!--tr><td--><strong>' + name + '</strong><br>' + street + street2 + city + state_zip + '<br/> <a href="http://' + slplus.map_domain + '/maps?saddr=' + encodeURIComponent(homeAddress) + '&daddr=' + encodeURIComponent(address) + '" target="_blank" class="storelocatorlink">Indicazioni Stradali</a> ' + more_html + '<br/><!--/td></tr--></div>';
} else {
var html = '<div id="sl_info_bubble"><!--tr><td--><strong>' + name + '</strong><br>' + street + street2 + city + state_zip + '<br/> <a href="http://' + slplus.map_domain + '/maps?q=' + encodeURIComponent(address) + '" target="_blank" class="storelocatorlink">Map</a> ' + more_html + '<!--/td></tr--></div>';
}
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var resultsDisplayed=0;
var bgcol="white";
このイメージをもたらす
<img src='"+image+"' class='sl_info_bubble_main_image'>
その画像を取得して、次のコードを使用して作成された店舗のリストに表示したいと思います。
function createSidebarEntry(marker, name, address, distance, homeAddress, url, email, phone,tags) {
document.getElementById('map_sidebar_td').style.display='block';
var div = document.createElement('div');
var street = address.split(',')[0];
var street2 = address.split(',')[1];
var city = address.split(',')[2];
if (city.split(' ').join('')!=""){
city+=', ';
}else{
city="";
}
var state_zip = address.split(',')[3];
var link = '';
if(url.indexOf("http://")==-1) {url="http://"+url;}
if (url.indexOf("http://")!=-1 && url.indexOf(".")!=-1) {link="<a href='"+url+"' target='_blank' class='storelocatorlink'><nobr>" + slplus.website_label +"</nobr></a><br/>"} else {url="";}
var elink = "";
if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1) {
if (!slplus.use_email_form) {
elink="<a href='mailto:"+email+"' target='_blank' class='storelocatorlink'><nobr>" + email +"</nobr></a><br/>";
} else {
elink="<a href='javascript:slp_show_email_form("+'"'+email+'"'+");' class='storelocatorlink'><nobr>" + email +"</nobr></a><br/>";
}
}
// If we want to show tags in the table...
//
var taginfo = "";
if (slplus.show_tags) {
if (jQuery.trim(tags) != '') {
var tagclass = tags.replace(/\W/g,'_');
taginfo = '<br/><div class="'+tagclass+'"><span class="tagtext">'+tags+'</span></div>';
}
}
// Keep empty data lines out of the final output
//
if (jQuery.trim(street) != '') { street = street + '<br/>'; }
if (jQuery.trim(street2) != '') { street2 = street2 + '<br/>'; }
if (jQuery.trim(city+state_zip) != '') { state_zip = state_zip + '<br/>'; }
var html = '<div class="punti-vendita-box">' +
'<div class="punto-vendita-name"><h3>' + name + '</h3></div>' +
'<div class="punto-vendita-extra"><div class="punto-vendita-details">' +
street +
street2 +
city + state_zip +
phone +
'</div> <div class="punto-vendita-indicazioni">' +
link +
elink +
'<a href="http://' + slplus.map_domain +
'/maps?saddr=' + encodeURIComponent(homeAddress) +
'&daddr=' + encodeURIComponent(address) +
'" target="_blank" class="storelocatorlink">Indicazioni Stradali</a></div>' +
'</div>' +
'</div>';
div.innerHTML = html;
div.className='results_entry';
resultsDisplayed++;
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
return div;
}
画像が前のコードのチャンクで既に見つかっていることを考えると、簡単なはずです。
どんな助けでも本当に感謝しています。