3

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>
Improve this question
2
  • 1
    description(data) doesn't actually return a value. Try putting return entete; at the bottom. Commented Jun 28, 2015 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 ? Commented Jun 28, 2015 at 14:28

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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 i updated the answer. Check and let me know if it helps
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 :)
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; 
}
Improve this answer

1 Comment

Thanks very much for your contribution. It does work perfect now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.