Question

i’m using a WordPress Plugin (Store Locator Plus – show a bunch of stores in a map and has a list of them underneath) which is fine but i need a little change and i found that the file that handles the map and the info is a .js file.

The plugin shows an image in the baloon you see when you click on the pointer, i would like to show the same image in the list beneath the map.

This is the code to show things in the baloon:

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";

which brings up this image

<img src='"+image+"' class='sl_info_bubble_main_image'>

I would like to get that image and show it on the list of stores, which is created using this code:

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;
}

should be easy, considering the image is already found in the previous chunk of code.

any help is really appreciated.

Answer 1

If the list of stores is being created after the map it would be difficult to append the image at a later time. One way you could do it is by adding a unique ID to the image in the bubble such as

<img src='"+image+"' class='sl_info_bubble_main_image' id='" + name + "'>

Then in the code to create the list use

<img src='" + $('#' + name ).attr('src') +"' class='sl_info_bubble_main_image' >

from the code I cannot determine if name is a unique identifier so you will have to determine what would work best in your situation.