How to use Static Resources for infowindow setContent? - javascript

I am getting Image at google map when using image at marker, but when i am using same image for infowindow then it shows only url.
Code:
var content = '<div class="map-content"><h3>' + "Account Name: " + "{!acc.Name} " +
'</h3>' + '<b>' +"Location: " + "{!acc.BillingCity}" + '</b>' + '</br>' +
"Direction : " + '<a href="http://maps.google.com/?daddr=' + "{!acc.BillingCity}" +
'" target="_blank">Get Directions</a>' + "{!$Resource.Image_GoogleMap}" +'</div>';
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
infowindow.setContent(content);
});
How to use "{!$Resource.Image_GoogleMap}" to showing image at infowindow for google map.
can any one help me?

If {!$Resource.Image_GoogleMap} is the URL of an image, and you want to display it in an InfoWindow, use normal HTML:
<img src="{!$Resource.Image_GoogleMap}" alt="image description">
(be careful to match the ' and " correctly)
var content = '<div class="map-content"><h3>' + "Account Name: " + "{!acc.Name} " +
'</h3>' + '<b>' +"Location: " + "{!acc.BillingCity}" + '</b>' + '</br>' +
"Direction : " + '<a href="http://maps.google.com/?daddr=' + "{!acc.BillingCity}" +
'" target="_blank">Get Directions</a>' + '<img src="{!$Resource.Image_GoogleMap}" alt="image description">' +'</div>';

Related

Handle button events inside of google.maps.infoWindow - ReactJS

I'm trying to handle the click event of a button inside a google.maps.infoWindow. I tried to pass the function name to onClick via infoWindow contents but didn't work. So, I moved to getElementById but also without success.The return of getElementById("polyButton") is null (Cannot read property 'addEventListener' of null ).
The code:
fpolylineHandler(event) {
console.log("handler", event);
}
infoPolyline(Polyline, map, maps, event) {
var infowindow = new maps.InfoWindow({
content: " ",
});
infowindow.setContent(
"<div style='color: black'>" +
"<p>Event Name: " +
"</p>" +
"<p>Event Type: " +
"</p>" +
"<p>Cause: " +
"</p>" +
"<p>Date: " +
"</p>" +
"<p>Time: " +
"</p>" +
"<button id='polyButton'>Click me</button>" +
"</div>"
);
var btn = document.getElementById("polyButton");
btn.addEventListener("click", this.fpolylineHandler.bind(this));
infowindow.setPosition(event.latLng);
infowindow.open(map, Polyline);
}
for reference, I tried to use onClick like this:
...
infowindow.setContent(
"<div style='color: black'>" +
"<p>Event Name: " +
"</p>" +
"<p>Event Type: " +
"</p>" +
"<p>Cause: " +
"</p>" +
"<p>Date: " +
"</p>" +
"<p>Time: " +
"</p>" +
"<button id='polyButton'onClick='this.fpolylineHandler'>Click me</button>" +
"</div>"
);
...
The interesting part was when using onClick='this.fpolylineHandler()' appeared an error saying that was not a function. On the example above, simply does nothing.
Even reading after mounted on dom, the element doesn't exists yet on maps. So, to solve this issue, we need to add a dom listener:
maps.event.addListener(infowindow, "domready", function () {
document.getElementById("polyButton").onclick=fpolylineHandler
});

how to pass variable inside html href in the view in mvc

i want to pass dynamic imei number , instead of static imei. i want to pass
obj[i].DeviceImei
inside the href tag at the place of 1009 for the google map marker info window view more option.
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
"</div>" +
'<div id="bodyContent">' +
"<p><b>Location: " + obj[i].location + "<br>"
+ "\n" +"IMEI: " + obj[i].DeviceImei +"<br>"
+ "\n" + "PRV Trip: " + obj[i].PRV_T + "<br>"
+'<a href="http://hostname/1009">' +
"View More" +
"</p>" +
"</div>" +
"</div>";
You can scape quotes with \", so in your case it would be:
+'<a href=\"http://hostname/' + obj[i].PRV_T + '\">' +

AppenChild dynamic h3 to dynamic div issue

I try to insert a dynamic h3 to a dynamic div, hovewer something is odd as it gets inserted outside the lblUser div. I would also like to be inserted after the "Role" h3.
Here is my code : function showUsers() {
lblUserList.innerHTML = "";
for ( var i = 0; i < ajUserDataFromServer.length; i++ ) {
var lblUser = document.createElement('div');
lblUser.innerHTML = '<div class="lblUser">' + '<img src="' + ajUserDataFromServer[i].image + '" alt="user" class="lblUserImage" data-userImage="' + ajUserDataFromServer[i].image + '">' + '<h3 class="lblUserId">' + 'Id:' + ' ' + ajUserDataFromServer[i].id + '</h3>' + '<h3 class="lblUserRole" data-userRole="' + ajUserDataFromServer[i].role + '">' + 'Role:' + ' ' + ajUserDataFromServer[i].role + '</h3>' + '<h3 class="lblUserName" data-userName="' + ajUserDataFromServer[i].name + '">' + 'Name:' + ' ' + ajUserDataFromServer[i].name + '<h3 class ="lblUserLastName" data-userLastName="' + ajUserDataFromServer[i].lastname + '">' + 'Lastname:' + ' ' + ajUserDataFromServer[i].lastname + '</h3>' + '<h3 class="lblUserPassword" data-userPassword="' + ajUserDataFromServer[i].password + '">' + 'Password:' + ' ' + ajUserDataFromServer[i].password + '</h3>' + '<button id="btnEditUserBody" class="btnShowPage btnEditUser" data-userId="' + ajUserDataFromServer[i].id + '" data-showThisPage="pageUpdateUser">' + 'EDIT USER' + '</button>' + '<button class="btnDeleteUser" data-userId="' + ajUserDataFromServer[i].id + '" >' + 'DELETE USER' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteUserErrorMessage">' + '</h3>' + '</div>';
if ( ajUserDataFromServer[i].email ) {
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
lblUser.appendChild( lblUserEmail );
}
if ( ajUserDataFromServer[i].phonenumber ) {
var lblUserPhoneNumber = document.createElement('h3');
lblUserPhoneNumber.innerHTML = '<h3 class="lblUserPhoneNumber" data-userPhoneNumber="' + ajUserDataFromServer[i].phonenumber + '">' + 'Phone-number:' + ' ' + ajUserDataFromServer[i].phonenumber + '</h3>';
lblUser.appendChild( lblUserPhoneNumber );
}
lblUserList.appendChild( lblUser );
}
}
I can see a few things wrong with the code, for example:
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
Should be something like:
var lblUserEmail = document.createElement('h3');
lblUserEmail.classList.add("lblUserEmail");
lblUserEmail.setAttribute("data-userEmail", ajUserDataFromServer[i].email);
lblUserEmail.innerText = 'Email:' + ' ' + ajUserDataFromServer[i].email;
Now you can append it:
lblUser.appendChild(lblUserEmail);
If you do it your way you wil get nested h3 and div elements.
Furthermore, you need to close your img tag. I can advice creating those tags either in code or with the new es5 string interpolation this will clean up your code and will show you these types of errors.

i have some marker, every marker with it's info. window , how can i customize them in one info window on javascript

i have some marker, every marker with it's info. window , how can i customize them in one info window, and every time it re-assign data when click on a different one? on javascript
self.getContent = '<div class="window-content" style="background-color:#a0785c;padding:5px;color:#fff;text-transform:uppercase; border-radius:5px;"><div class="title"><h4 style="color:#38c3ea;">' + self.title + "</h4></div>" + '<div class="extrContent"> ( ' + self.lat + ' , ' + self.lng + " ) </div>" + '<div class="extrContent"> city ->' + " " + self.city + "</div>" + '<div class="extrContent"> Street ->' + " " + self.street + "</div>" + '<div class="extrContent">' + self.checkinsCount + " checkins </div></div>";
});
self.getContent = '<div class="window-content" style="background-color:#a0785c;padding:5px;color:#fff;text-transform:uppercase; border-radius:5px;"><div class="title"><h4>' + self.title + "</h4></div>" + '<div class="extrContent">' + self.city + "</div>" + '<div class="extrContent">' + self.street + "</div>" + '<div class="extrContent">' + self.checkinsCount + "</div></div>";
// define infoWindow
self.infoWindow = new google.maps.InfoWindow({
content: self.getContent
});
// add and show markers
self.marker = new google.maps.Marker({
position: new google.maps.LatLng(data.location.lat, data.location.lng),
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
});
// function to show markers on map
this.isVisible = ko.observable(false);
this.isVisible.subscribe(function(currentState) {
if (currentState) {
self.marker.setMap(map);
} else {
self.marker.setMap(null);
}
});
this.isVisible(true);
// Get contect infowindows
self.marker.addListener('click', function() {
// declare info window
self.infoWindow = new google.maps.InfoWindow({
content: self.getContent
});
self.infoWindow.setContent(self.getContent);
self.infoWindow.open(map, this);
// set marker animation
self.marker.setAnimation(google.maps.Animation.DROP);
});
};

How can this be modified to show 2 videos?

I found this code online that will show the most recent video from a Vimeo account...
$(function() {
$.getJSON('http://vimeo.com/api/v2/VIMEO-ACCOUNT-NAME/videos.json?callback=?', {format: "json"}, function(videoList) {
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[0].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent").innerHTML=videoProperties.html
document.getElementById("vimeoDescription").innerHTML="<p><a href='" + videoList[0].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
});
});
I'm trying to figure out how to get it to display the 2 most recent videos, instead of one. I tried to add another item to the array e.g. [0,1], but that just breaks the script.
Can anyone suggest how I could get this script to display 2 videos? Thanks!
Here's a non-functioning jsfiddle just to show the code more clearly.
You need to repeat the second getJSON for the second element using videoList[1].id, and inserting it into other divs
$(function() {
$.getJSON('http://vimeo.com/api/v2/VIMEO-ACCOUNT-NAME/videos.json?callback=?', {format: "json"}, function(videoList) {
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[0].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent").innerHTML=videoProperties.html
document.getElementById("vimeoDescription").innerHTML="<p><a href='" + videoList[0].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
//get second video (insert into another div)
$.getJSON('http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/' + videoList[1].id + '&byline=false&portrait=false&callback=?', {format: "json"},
function(videoProperties) {
document.getElementById("vimeoRecent2").innerHTML=videoProperties.html
document.getElementById("vimeoDescription2").innerHTML="<p><a href='" + videoList[1].url + "'>" + videoProperties.title + "</a> from <a href='" + videoProperties.author_url + "'>" + videoProperties.author_name + "</a> on <a href='http://vimeo.com'>Vimeo</a>.</p><p>" + videoProperties.description + "</p>"
});
});
});

Categories