String formatting JavaScript

Question

I define a variable and I would like to use it to write some HTML 'content' code. However I am new to JavaScript and I am definely doing something wrong.

What I am trying to write the content of an infoWindow bind to a Google Maps marker. I use the content of JSON to write my content in a function called description.

Thanks for your help.

    <script>
         var json = [
{
"lat":51.5202,
"lng":-0.073101,
"title":"nice single room*--only 135pw- close to BRICK LANE | United Kingdom | Gumtree",
"roTy":"Single room",
"prTy":"House",
"price":"585"
"area":"Brick Lane",
"sta":"Aldgate East",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
{
"lat":51.5202,
"lng":-0.073101,
"title":"Come and enjoy the Vibrant East London, Many rooms available from 130pw | United Kingdom | Gumtree",
"roTy":"Double room",
"prTy":"House",
"price":"563"
"area":"Brick Lane",
"sta":"Aldgate East",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
{
"lat":51.5217,
"lng":-0.072289,
"title":"MANY ROOMS AVAILABLE *from 130PW all included | United Kingdom | Gumtree",
"roTy":"Double room",
"prTy":"House",
"price":"563"
"area":"Brick Lane",
"sta":"Shoreditch High Street",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
] 

var myCenter=new google.maps.LatLng(51.5183,-0.068066);

function initialize()
{
    var mapProp = {
        center:myCenter,
        zoom:12,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById       ("googleMap"),mapProp);

var infowindow =  new google.maps.InfoWindow({
    content: ""
});

for (var i = 0, length = json.length; i < length; i++) {
    var data=json[i];
    var latLng = new google.maps.LatLng(data.lat, data.lng); 
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
    });
    var descr = description(data);
    bindInfoWindow(marker, map, infowindow, descr);
    } 
}

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading" class="firstHeading">'%s'</h1>';
        entete += '<div id="bodyContent">';
        entete += '<p>roTy in prTy | laTy | £pr per calendar month</p>';
        entete += '<p>ar | Closest train station : sta</p>';
        entete += '<p>descr</p>';
        entete += '<p><a href="link">Access the original ad</a></p>';
        entete += '</div></div>';

        entete.replace('%s',data.website);
        entete.replace('roTy',data.roTy);
        entete.replace('prTy',data.roTy);
        entete.replace('laTy',data.laTy);
        entete.replace('pr',data.price);       
        entete.replace('ar',data.area);
        entete.replace('sta',data.sta);        
        entete.replace('descr',data.title);        
        entete.replace('link',data.link);

    return entete;
}
function bindInfoWindow(marker, map, infowindow, descri) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(descri);
        infowindow.open(map, marker);
     });
}

google.maps.event.addDomListener(window, 'load', initialize);


    </script>

description(data) doesn't actually return a value. Try putting `return entete;` at the bottom. — Ian, Jun 28 '15 at 11:41
Thank you. I am pretty sure this will help :) However it still does not work. Any idea ? I suspect that my description function is not perfectly written. What do you think ? — Dirty_Fox, Jun 28 '15 at 14:28

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Hi I think the issue is with the function description . It should return a value to assign to descr var descr = description(data) or you can keep entete as global variable i.e. define it outside the function which i don't know is feasible for you. So you just try :-

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading" class="firstHeading">%s</h1>';
        entete.replace('%s',data.website);
...//similar statements here
...
...
return entete; 
}

Update

I usually use such functions when I want to create lot of elements

function addElements(tag,attribute,attributeValue,text)
{
    var element;
    element = document.createElement(tag);

    if(attribute != undefined && attribute != null &&  attributeValue != undefined &&  attributeValue != null)
    {
        for(itr=0;itr<attribute.length;itr++)
        {
            element.setAttribute(attribute[itr], attributeValue[itr])
        }
    }   
    if(text != undefined && text != null && text.length != 0)
    {
        element.textContent=text;
    }   
    return element
}

It can be used like

var entete =  addElements('div',['id'],['content'],null).
append(addElements('h1',['id','class'],'firstHeading','firstHeading'],null).
...//for other elements
)

But I dont know if you really need. If you need this advantages you should for the above method..

But if you dont just do it as

function description(data)
{
var entete = '<div id="content">';
entete += '<h1 id="firstHeading" class="firstHeading">'+data.website+'</h1>';
entete += '<div id="bodyContent">';
entete += '<p>'+data.roTy+' in '+data.roTy+' | '+data.laTy+' | £'+data.price+' per calendar month</p>';
entete += '<p>'+data.area+' | Closest train station : '+data.sta+'</p>';
entete += '<p>'+data.title+'</p>';
entete += '<p><a href="'+data.link+'">Access the original ad</a></p>';
entete += '</div></div>';
return entete;
}

And it should be fine. By the way thanks read about infowindows because of this question.

I can now display the infoWindow thanks. However I think my description function isnot properly written. Do you think it is the proper way to use so many replace ? — Dirty_Fox, Jun 28 '15 at 14:44
@Dirty_Fox i updated the answer. Check and let me know if it helps — Viraj Nalawade, Jun 29 '15 at 07:13
Works perfect thanks very much. I did read about info window, I am just not comfortable at all with JS. So thanks for the help and the link that I will read for sure :) — Dirty_Fox, Jun 29 '15 at 09:42

score 2 · Answer 2 · answered Jun 28 '15 at 15:15

2

I don't think using so many replace is a good idea. Why not using something like the following ?

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading">' + data.website + '</h1>';
    ...

    return entete; 
}

answered Jun 28 '15 at 15:15

PMerlet

2,568
4
23
39

Thanks very much for your contribution. It does work perfect now. – Dirty_Fox Jun 29 '15 at 09:42

String formatting JavaScript

2 Answers2