Conditional javascript for Google Map values - javascript

I'm passing some variables to my google maps scrip to output an address in an info window. The variables are being pulled from a database, but not all of them will always exist. Using the following code I sometimes end up with multiple <br> tags in a row, meaning I get awkward breaks in the content.
So my question is how do I make it conditional so that only the variables that exist will display, followed by a <br>?
var contentString = '<div id="map_info">'+
'<h4>' + gmapsstring.gmapaddressname + '</h4>'+
'<div id="bodyContent">'+
'<p>' + gmapsstring.gmapaddressstreet + '<br>' +
gmapsstring.gmapaddressline2 + '<br>' +
gmapsstring.gmapaddressline3 + '<br>' +
'<span class="gmap_postcode">' + gmapsstring.gmapaddresspostcode + '</span></p>'+
'</div>';
Any suggestions would be greatly appreciated.
Thanks

You can use the length property of the variables, so you'd have something like:
var contentString = '<div id="map_info">';
if( gmapsstring.gmapaddressname.length > 0 ) {
contentString += '<h4>' + gmapsstring.gmapaddressname + '</h4>';
}
and so on. Or even better, you can loop through the properties, using a similar code.

Related

JQuery/Javascript unable to display style and image correctly in output

I have the following output code, which is taking information from a JSON variable and presenting in a map:
marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4>" + place.description + '<br/>' + place.belongs_to + '<br/>' + '<br/>' + place.categories
self.markers[place.id] = marker
The output however is not displaying the image, but instead the link to the image.
Like so:
https://imagelocationishere.jpg
I have tried the following, which will show an image icon which makes me think that I am close, but I am still unable to display the image.
'<img src=' + place.image + '/>'
How do I adjust so I can display the image, or even just display the output better?
Thank you.
Forgot to add the double quotes.
Here is the solution:
'<img src= " ' + place.image + ' " />'

Apply filters in AngularJS controller

I am newbee to angular and have this filter to translate the text (localization) which works well in my html/view:
<input type="button" class="btn btn-link" value="{{'weeklyOrdersPage.reposting' | translate}}" ng-click="sortBy('reposting')" />
What this does is to take the value from one resource file and display text and it works very well.
Now, I need to do something similar in controller where I am rendering a google map using javascript api. I need to set the text of the marker based on the language i choose. I tried this and it didn't work:
var markerConter = '<div class="infoWindowContent">' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelId'}}") + ': </b>' + panel.id + '</div>' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelClassification'}}") + ': </b>' + panel.panelClassification + '</div>' +
'<div><b>' + $filter('translate')('{{weeklyOrdersPage.quality}}') + ': </b>' + panel.format + '</div>'
'</div>';
Any pointers on how to move forward?
You don't need to use {{}} when writing code in controller
$filter('translate')('weeklyOrdersPage.panelId')
$filter('translate')('weeklyOrdersPage.panelClassification')
$filter('translate')('weeklyOrdersPage.quality')
That should solve the problem.

append jquery does not work

i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.
As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);

Div not being created

I am converting existing code into template code since it is much cleaner, I am using Mustache as my choice of template engine. I am having trouble getting the below code to work I have included both the old working code and the new Mustache code. The problem is that the div is not being created at all and it just places a < inside of the DealerInfo div.
This is the converted code:
for(i=0; i< markers.length; i++) {
var testContent = Mustache.render("<div class='{{info_content}}'><h3>{{dealerName}}</h3>" +
"<p>{{address}}<br/>{{city}}, {{state}} {{zip}}<br/>" +
"<a href='{{href}}'>{{hrefTitle}}</a></p></div>", {
info_content: "info_content",
dealerName: markers[i][3],
address: markers[i][2],
city: markers[i][4],
state: markers[i][5],
zip: markers[i][8],
href: markers[i][6]
});
infoWindowContent.push(testContent);
}
This is the old code:
for(i=0; i< markers.length; i++) {
var testContent = ['<div class="info_content">' + '<h3>' + markers[i][3] + '</h3>' + '<p>' + markers[i][2] + '<BR />' + markers[i][4] + ', ' + markers[i][5] + ' ' + markers[i][8] + '</p>' + '<BR /> ' + markers[i][6] +'' +'</div>'];
infoWindowContent.push(testContent);
}
This is how I am getting the info to output into the div:
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i][0];
Your problem is:
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i][0];
In your new code, you are making an array of strings, so infoWindowContent[i][0] gives you the 1st character in the string created via Mustache.render
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i];
should do the trick.
By the way, you can pass an array to Mustache and have it iterate over the items.
I don't know if this will fix your problem, but I would start by putting your string template into a variable and your data into a variable and then calling the Mustache.render function on those. I suspect the mess you are sending to Mustache is getting jacked somehow.

Dynamic angularjs template

I am trying to create a directive this way -
scope.nodeTemplate = '{{node.nodeText}}';
Part of template
'<ul>' +
'<li class="tree-node" data-ng-repeat="node in nodes">' +
'<span>' + scope.nodeTemplate + '</span>' +
'</li>' +
'</ul>'
Based on some condition I would like to change the nodeTemplate and it can be an html string like -
'<input type="text"/>'
But the issue is when it try to do this thing angular does not render the html. It simply puts the html string. I am kind of stuck here. Can someone suggest some solution?
You need to use ng-bind-html-unsafe like:
'<span ng-bind-html-unsafe="nodeTemplate"></span>'

Categories