How to display image in popup - javascript

I have got a csv file which contain all attributes, such as name, image url, price of every restaurant in London. I use the code below to display popup when my mouse moves to the point of the restaurant in map. However, it can only show the image url text but not the image itself. Is that possible to make the popup display the image of every restaurant directly by changing the code below?
var mypopup = new mapboxgl.Popup({closeButton: false});
map.on('mouseover', 'Restaurant', function (e) {
mypopup
.setLngLat(e.features[0].geometry.coordinates)
.setHTML("<h3>" + e.features[0].properties.name + "</h3>Categories: " + e.features[0].properties.categories + "<br />Image Url: " + e.features[0].properties.image_url + "<br />Location: " + e.features[0].properties.location + "<br />Phone Number: " + e.features[0].properties.display_phone + "<br />Price: " + e.features[0].properties.price + "<br />Rating: " + e.features[0].properties.rating)
.addTo(map);
});
map.on('mouseenter', 'Food', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'Food', function () {
map.getCanvas().style.cursor = '';
mypopup.remove();
});

You need to wrap the image url in and img html element e.g. <img src="e.features[0].properties.image_url" />. You may have to do some styling if you want them all the same size, for instance.

Related

Need help creating clickable url link for google map's infowindow

I'm unable to create a clickable url link for Google Map's infowindow. I'm sure it's a syntax error, just not sure where exactly.
Here's a snippet of my code
var marker = new google.maps.Marker({
map: map,
title: eventName,
position: loc
});
var content =
"<strong>" + "#location.venue_name" + "</strong><br>" +
"#location.venue_address" + " " + "#location.city_name" + "<br>" +
"#location.description" + "<br>" +
"#location.url" + "<br>" + //displays url eg. 'www.google.com'
//"More Details<br>"; // map won't show if this line is uncommented
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, content) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content));
Thank you in advance
Please try this one:
var content =
"<strong>" + "#location.venue_name" + "</strong><br>" +
"#location.venue_address" + " " + "#location.city_name" + "<br>" +
"#location.description" + "</div>" +
"#location.url" + "<br>" +
"<a href='" + "#location.url" + "' target='_blank'>More Details</a><br>";
Notice I have changed quotes a little bit in the last line. Hope it helps
preferably in one single string :
"<a href='#location.url' target='_blank'>More Details</a><br>"
thats easier for the eyes
pretty sure the #... injections works in longer strings as well
syntax got a bit messy there on content variable.
change your line as follows
<a href='" + "#location.url" + "' target='_blank'>More Details</a><br>"
also take a look at template literals for js which will make you code much more readable with a "`" (backtick)
var content = `<strong>${#location.venue_name}</strong>
<br>
${#location.venue_address} ${#location.city_name} ${#location.url}
<a href='${#location.url}' target='_blank'>More details</a>
`
this way you can avoid a lot of mess trying to build a string. ${} will allow you to put Js variables inside a backticked string.

How to build an anchor link to open page in new window using Kendo Grid Columns?

I have a Kendo Grid with a column definition as follows:
columns.Bound(c => c.Id).Title("ID #").Width("150px").ClientTemplate("#=showDetails(data.Id)#");
I'm calling a method showdetails that returns a link to open the details in a new page.
I need some help figuring out how to build the link.
This is my showDetails method:
function showDetails(data) {
var returnText = "<a href='/Detail/Index/" + data + "'>" + data + "</a>";
return returnText;
}
How do I modify it, so, the details page is opened in a new window?
add:
target="_blank" to return statement
var returnText = "gt a href='/Detail/Index/" + data + "'>" + data + "</a>";
to:
var returnText = "gt a target='_blank' href='/Detail/Index/" + data + "'>" + data + "</a>";
Reference link: https://www.w3schools.com/tags/att_a_target.asp

Image Print option in html

I have 6 images in PHP page.
Below each image there is button named print.
Now how to give command in PHP or Javascript to the button so that when it is clicked print window is there with only respective image (not whole HTML)
My button:
<button type='print'>Print<\button>
You can try this way
<script type="text/javascript">
function ImagetoPrint(source) {
return "<html><head><script>function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<img src='" + source + "' /></body></html>";
}
function PrintImage(source) {
Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(ImagetoPrint(source));
pwa.document.close();
}
PRINT
You can use JS libraries like
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
$('img#some_id').printElement();

Clicking on an element to reveal additional .get information

I'm trying to work through the 2nd question on this set of problems. I have to be able to click on a legislator's name and have additional information about him/her show up. Here's what I have so far.
$(function() {
$("form#get-zip").submit(function() {
var zip = $("input#zip").val();
$.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip, function(responseText) {
responseText.results.forEach(function(legislator) {
$("ul#legislators").append("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "</li>");
$("li").click(function() {
$(this).append("<p>Party: " + legislator.party + ", District: " + legislator.district + "</p>");
});
});
});
return false;
});
});
The problem is that when I click on a legislator's name it reveals information about all the legislators in the list rather than the particular legislator I clicked on. This is my first experience with A.P.I.s and I'm very much still a novice programmer. I'm finding all these moving parts to be very mentally exhausting. So I really appreciate any help I can get with this. Thanks.
I would suggest building out all your html on submit, even the details that appear below each legislator. Then hide all that extra detail. And set up the function of your li's to show the relative details.
$(function() {
$("form#get-zip").submit(
function() {
var zip = $("input#zip").val();
$.getJSON("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip,
function(responseText) {
$.each(responseText.results,
function(i,legislator) {
var newEl = $("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "<p>Party: " + legislator.party + ", District: " + legislator.district + "</p></li>");
newEl.appendTo("ul#legislators");
$("ul#legislators li").last().find("p").hide(); // hide the last added one
}); // end each
}); // end get function
}); // end submit function
$("ul#legislators").on("click", "li",
function() {
var details = $(this).find("p");
if (details.is(":visible")) {
details.hide();
} else {
details.show();
}
}); // end click function
}); // end document ready function
When the click event fires, the legislator variable no longer contains the data you looking for.

Detect event in Google Marker

In my code, how can I get the name of the User that someone clicked on in the marker?
Currently my code has:
function createMarker(point, user, studytopic) {
var marker = new GMarker(point);
var currUser = user;
var html = '<b>' + user + '</b> <br/>' + studytopic + '<br/>' +
' Contact ' + user + '' ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
currUser is a global field, however, it's not updated every time I click on a different marker in Google maps.
Basically what I'm looking for is a event to fire when a link (id=contactSBLink) within any marker is clicked. I want it to get the Username(which is a link) to pass the user variable to another function.
I'm not sure what's the best way to go about to get this?
You can pass the user u to the javascript:showContactSB(u). This is an exercise in setting quotes properly:
var u = "'" + user + "'";
var html = '<b>' + user + '</b> <br/>' + studytopic + '<br/>' +
' Contact ' + user + '' ;
Now, you get the user in the click-function:
function showContactSB(user) {
alert("Hi " + user);
}
BTW, I would recommend you to upgrade to Google Maps v3.

Categories

Resources