We Keep Coding

url.content not loading image javascript and asp.net mvc

I have my javascript in my view and I am trying to load an image from my database into an info window for my google maps but the image does not load.
Javascript code in view:
$.get("#Url.Action("GetMarkers","Donator")", function (json, status) {
//Global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
var marker, data;
//Loop through the json data
for (var i = 0; i < json.length; i++) {
data = json[i];
var latLng = new google.maps.LatLng(data.Latitude, data.Longitude)
//Creating marker and putting it on the map
marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.NpoName + ' says Click Me!'
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function (marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function (e) {
var imageUrl = '<%=Url.Content(' + data.VerificationIcon + ')%>';
infoWindow.setContent('<h3 class="info-window-title">' + data.NpoName + '</h3>' + '<hr />' + '<p>Npo type: ' + data.NpoType + '</p>' + '<p>' + data.VerificationStatus + '<img src="' + imageUrl + '" alt="verification icon" class="verification-icon" />' + '</p>' + 'Click here to donate!');
infoWindow.open(map, marker);
});
})(marker, data);
};
});
Code in controller:
public JsonResult GetMarkers()
{
//Disable lazy loading
db.Configuration.ProxyCreationEnabled = false;
//Map marker section
var DynamicMapMarkers = db.tblNpo.Include(zz => zz.tblVerification).Include(xx => xx.tblNpo_Type);
//Set map marker values
foreach (var item in DynamicMapMarkers)
{
DonatorUserViewModel MapMarkers = new DonatorUserViewModel();
MapMarkers.NpoID = item.npo_id;
MapMarkers.NpoName = item.npo_name;
MapMarkers.NpoType = item.tblNpo_Type.description;
MapMarkers.VerificationStatus = item.tblVerification.description;
MapMarkers.VerificationIcon = item.tblVerification.verification_icon;
MapMarkers.Longitude = Convert.ToDouble(item.longitude);
MapMarkers.Latitude = Convert.ToDouble(item.latitude);
MapMarkerList.Add(MapMarkers);
}
var json = MapMarkerList;
return Json(json, JsonRequestBehavior.AllowGet);
}
Main focus area from the code above:
var imageUrl = '<%=Url.Content(' + data.VerificationIcon + ')%>';
infoWindow.setContent('<h3 class="info-window-title">' + data.NpoName + '</h3>' + '<hr />' + '<p>Npo type: ' + data.NpoType + '</p>' + '<p>' + data.VerificationStatus + '<img src="' + imageUrl + '" alt="verification icon" class="verification-icon" />' + '</p>' + 'Click here to donate!');
The format of the way the image is stored in the database ~/Images/DbImages/verified.png
I am not sure why the image isn't loading, or how to work around it. Any help would be appreciated.

Change Mapbox marker image on click

I'm currently using a png as markers but I would like to change the one that get clicked on & active to a different png.
How do I achieve that?
var icon = [
{
"className": "my-icon icon-dc", // class name to style
"html": '<img class="style-svg" src="wp-content/uploads/2016/06/circle.svg" alt="">', // add content inside the marker
"iconSize": [60,60] // size of icon, use null to set the size in CSS
}
];
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = e.layer.feature;
marker.setIcon(L.divIcon(feature.properties.icon));
});
// Listen for individual marker clicks.
myLayer.on('click',function(e) {
// Force the popup closed.
e.layer.closePopup();
var feature = e.layer.feature;
var content = '<div><div id="close1" class="absolute_p"><img class="exit" src="/wp-content/uploads/2016/06/X#2x.png"></div>' +
'<img src="' + feature.properties.img + '" alt="">' +
'<h4>' + feature.properties.title + '</h4>' +
'<p>' + feature.properties.description + '</p>' +
'<p class="num">' + feature.properties.num + 'Properties now showing</p>' +
'find your second home here</div>';
info.innerHTML = content;
map.panTo(e.layer.getLatLng());
});

At the end of your click event handling, why not just use setIcon on the e.layer with a reference to an "active"/"clicked" icon you declare somewhere else?
var myNewIcon = L.icon({
iconUrl: 'my-new-icon.png'
});
e.layer.setIcon(myNewIcon)
http://leafletjs.com/reference.html#icon

How can I resize infowindow with button onclick in it? + Change content of infowindow

I have tried a lot of different ways to write this, but I really dont understand how I can do it. I am new in javascript, so maybe it will be easy to do for you.
I have infobox when I click on marker on map. I want to have "more" button in that infobox. When someone clicks on the button, the infobox will resize and change content. How can I write it, using javascript and HTML?
resizeWindow = function (stringItem, isResized) {
var eventItem = JSON.parse(stringItem);
processLocation(eventItem, isResized);
};
processLocation = function (eventItem, isResized) {
var i, contentString, myOptions, ib, markerOptions, marker, infoWindowWidth;
console.log("---> event is stoned: " + eventItem.name);
var stringItem = JSON.stringify(eventItem);
if (!isResized) {
infoWindowWidth = "450px";
contentString =
'<div class="eventitem-content">' +
'<div class="eventitem-bodycontent">' +
'<div class="eventitem-title">' + eventItem.name + '</div><img src="/Content/LandfillPhotos/' + eventItem.photo_number + '.png" alt="Landfill" style="width:425px;height:335px"/>' +
'<div class="eventitem-company">' + eventItem.company + '</div><div class="eventitem-address">' + eventItem.company_address + '</div>' +
'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +
'</div>' +
'</div>';
console.log(isResized);
} else {
infoWindowWidth = window.screen.availWidth + "px";
contentString =
'<div class="eventitem-content">' +
'<div class="eventitem-bodycontent">' +
'<div class="eventitem-title">' + eventItem.name + '</div><img src="/Content/LandfillPhotos/' + eventItem.photo_number + '.png" alt="Landfill" style="width:425px;height:335px"/>' +
'<div class="eventitem-company">' + eventItem.company + '</div><div class="eventitem-address">' + eventItem.company_address + '</div>' +
'<button onclick="FBN.events.resizeWindow(' + stringItem + ', false)">Více</button>' +
'</div>' +
'</div>';
}
myOptions = {
content: contentString,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 4),
zIndex: null,
boxStyle: {
width: infoWindowWidth
},
closeBoxMargin: "6px",
closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
ib = new InfoBox(myOptions);
infoWindows.push(ib);
markerOptions = {
position: new google.maps.LatLng(eventItem.latitude, eventItem.longitude),
map: map,
title: eventItem.name,
icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Marker-Outside-Azure.png'
}
marker = new google.maps.Marker(markerOptions);
markers.push(marker);
createListener(marker, map, ib);
};
When I do it like this, console writes me: Unexpected token ;
'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +
This line is problem

This is a really involved situation, and there will be more issues soon with variable scoping once you solve this immediate problem. I will show you how to solve your immediate problem which is regarding the Unexpected token ;.
You are in a difficult spot with quotes and JSON. Take your code for example:
'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>'
Your stringItem is no longer just a variable, but its contents will be inlined above. If it has any unescaped single or double quotes, it will cause an error.
Here is a sample stringItem I recovered:
{"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}
In other words, you are essentially writing this dynamic HTML. Notice the double quotes:
<button onclick="FBN.events.resizeWindow({"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}, true)">Více</button>
First, you need to surround this literal string with single quotes. So we need this:
'<button onclick="FBN.events.resizeWindow(\''+ stringItem + '\', true)">Více</button>'
This is enough information for you to solve your problem, but to go a step further, instead of
var stringItem = JSON.stringify(eventItem);
you should encode stringItem more to remove all quotes. I got your code working with this:
var stringItem = utf8_to_b64(JSON.stringify(eventItem));
where I included these useful functions whose names are self-explanatory:
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
function b64_to_utf8( str ) {
return decodeURIComponent(escape(window.atob( str )));
}
When I made the modifications to the site you supplied (using Chrome Dev tools), your "Vice" buttons now render like this
<button onclick="FBN.events.resizeWindow('eyJuYW1lIj ... IjoiMyJ9', true)">Více</button>
which is now valid syntax. Your new problem is where the onclick handler expects to find FBN.events.resizeWindow(). But that's for a different question. :)
Here are some of the changes I experimented with: http://pastebin.com/Uczwct8H

Marker click event always opens to the last pushed infowindow

I have a json object infoCentros which I use to construct the map, like this:
for ( var i = 0; i < infoCentros.length; i++ ) {
var centro = infoCentros[i];
var lat = centro.cordenadas.lat;
var lon = centro.cordenadas.long;
if (lat && lon) {
c++;
latlon = new google.maps.LatLng(lat, lon);
var moptions = {
position: latlon,
map: $project.gmap
}
moptions.icon = theme_uri + '/images/marker.png';
var marker = new google.maps.Marker(moptions);
$project.mapMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
$project.mapInfoWindow.setContent(
'<div class="sescam-info-window">' +
'<h3>' + centro.nombre + '</h3>' +
'<p>' + centro.lugar + '</h3>' +
'<p>Coordinador</p>' +
'<p>' + centro.coordinador.nombre + '</p>' +
'<p>' + centro.coordinador.email + '</p>' +
'<p>Responsable</p>' +
'<p>' + centro.responsable.nombre + '</p>' +
'<p>' + centro.responsable.email + '</p>'
+ '</div>'
);
$project.mapInfoWindow.open($project.gmap, marker);
});
$project.mapBounds.extend(latlon);
}
}
It seems to work fine, but if I have 5 markers, It doesn't matter which one I click, the infowindow always corresponds to the last item (position and content),
Any idea what am I missing? I thought that passing marker to the addListener would Do the trick..

Problem is with third argument of google.maps.event.addListener. That anonymous function contains the variable from the parent scope which when evaluated with marker click will always take the last value assigned. Look for closure for more details. However you may able to get the desired behaviour by using "bind" feature of javascript function prototype in below manner:
//inside for loop
google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));
//other codes if any...
defining handleClick
function handleMarkerClick(marker, index) {
if (typeof infowindow === 'undefined') {
infowindow = new google.maps.InfoWindow({});
}
var data = infoCentros[index]//helpful data
//create content with dynamic data
infowindow.setContent("dynamic content");
infowindow.open(marker.getMap(), marker);//modify as per your requirement
}

Duncan is right, he means you have to attach the listener outside of your for loop. It's not specific to Google Maps, it's how javascript works. Try searching for "javascript closures for loop" or visit this link - Closures in Javascript for a simple explanation.

Google Maps API v3: Looping through and adding polylines to a map

I've gone through the forums trying to search for solutions, and I've adapted my code for several problems I've come across, but this one eludes me. I'm trying to plot multiple points on a map (which works) and then draw lines between the points. Each marker contains information, such as latitude and longitude, as well as it's neighbor (the point that I want to draw the line to). I also give it the color I want the line, as different 'routes' can be in different colors. The only I can see being a problem is that I draw a line, set it on the map, and run the loop again for the next marker.
My code places the markers, places the information window for each marker, but doesn't draw the lines between the markers. Can anyone see where I've screwed up, or even if this is possible to do it in the way I'm doing it?
The reason I'm keeping the drawMap function separate is in the event users want to filter out visible data, I need to re-draw the map dynamically. So, I'm keeping the marker list globally so I can reference it even after the function has finished.
My code:
http://www.nku.edu/~sweikatam1/nkuPhysicalMapTest.html
The spot in particular with the issue is the function drawMap, which gets passed an array of objects, markerList, containing the latitude, longitude, color (for the polyline), and other bits of data.
The line placement:
for(var j = 0; j < markerList.length; j++){
if(markerList[j].name == markerList[i].neighbor){
var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude);
//alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude);
}
}
//set the pathway for the two points
var flightPlanCoordinates = [
new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
new google.maps.LatLng(targetDestination)
];
//alert("Color: " + markerList[i].routeColor);
//set the line and color
var flightPath = new google.maps.Polyline({
path:flightPlanCoordinates,
strokeColor:markerList[i].routeColor,
strokeOpacity:2,
strokeWeight:5
});
//apply lines
flightPath.setMap(map);
The function as a whole:
function drawMap(markerList){
//alert("Starting drawMap");
//create the map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(39.032253, -84.465015),
mapTypeId: google.maps.MapTypeId.HYBRID
});
var marker;
for (var i = 0; i <markerList.length; i++){
/*alert("markerList # i: " + markerList[i].name);
alert("Marker Data: " + "Name: " + markerList[i].name + "\r "
+ "Latitude: " + markerList[i].latitude + "\r "
+ "Longitude: " + markerList[i].longitude + "\r "
+ "Content Type: " + markerList[i].contentType + "\r "
+ "Image: " + markerList[i].image
+ "Color: " + markerList[i].routeColor);*/
var contentData = '<b>'+markerList[i].name +'</b>: '
+ markerList[i].latitude + ' x '
+ markerList[i].longitude + '<br/><p>'
+ markerList[i].contentType
+'</p><img src="' + markerList[i].image + " height=150 width=100>";
//create the marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(markerList[i].latitude,markerList[i].longitude),
draggable: false,
icon: markerList[i].icon,
map:map,
content: contentData,
title:markerList[i].name
});
//find the neighbor for the current marker and set the destination coordinates
for(var j = 0; j < markerList.length; j++){
if(markerList[j].name == markerList[i].neighbor){
var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude);
//alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude);
}
}
//set the pathway for the two points
var flightPlanCoordinates = [
new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
new google.maps.LatLng(targetDestination)
];
//alert("Color: " + markerList[i].routeColor);
//set the line and color
var flightPath = new google.maps.Polyline({
path:flightPlanCoordinates,
strokeColor:markerList[i].routeColor,
strokeOpacity:2,
strokeWeight:5
});
//apply lines
flightPath.setMap(map);
//handle open information windows
google.maps.event.addListener(marker,'click', function(){
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
info.open(map,this);
infos[0]=info;
});
//alert("Marker " + markerList[i].name + " placed.");
}
//alert("drawMap complete. Drawing lines");
<!-- DRAWING LINES COMPLETE -->
}
If anything here seems odd, confusing, or needs clarification, please let me know. Criticisms and ways of doing things better are always welcome. Thanks guys!

In defining, flightPlanCoordinates, the second LatLng was being created out of another LatLng (targetDestination). So just remove the new google.maps.LatLng portion and use the targetDestination directly. With this change, I saw a blue zigzag and a red one being drawn on the map.
var flightPlanCoordinates = [
new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
targetDestination
];