I was searching some examples and articles related to saving and loading a route into a bing map but i couldn't find anything, so currently i am asking if this is possible.
Please let me know if this is supported by the bing maps for windows phone.
I used to use bing map api on my web
I`m not sure if it will work well
initialize the map using the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>`
add code to make the route request when the button is clicked, and add code to the RouteCallback function to set the map view and draw the route.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
function ClickRoute(credentials)
{
map.getCredentials(MakeRouteRequest);
}
function MakeRouteRequest(credentials)
{
var routeRequest = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
CallRestService(routeRequest);
}
function RouteCallback(result) {
if (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0) {
// Set the map view
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries});
// Draw the route
var routeline = result.resourceSets[0].resources[0].routePath.line;
var routepoints = new Array();
for (var i = 0; i < routeline.coordinates.length; i++) {
routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
}
// Draw the route on the map
var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});
map.entities.push(routeshape);
}
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<input id="txtStart" type="text" value="Seattle"/>
<input id="txtEnd" type="text" value="Portland"/>
<input type="button" value="Calculate Route" onclick="ClickRoute()"/>
</body>
</html>
Related
I have a Razor view Html.DisplayFor where I am displaying some text. Now I want to truncate the text using jquery. I am using the jquery code from this Jquery Truncate.
In my csHtml, I have something like follows, the BlogContent is some string that I am Binding. Of course I think I can do SubString etc in C# on the BlogContent to truncate. But I want to do it using jquery. I have tried the below code but no luck. Please help.
#{
Layout = null;
}
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
#section scripts
{
<script src="~/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
};
</script>
}
I don't see any errors on the Browser Console related to this.
If you are using Layout = null; then #section Scripts doesn't work because the section is defined in _Layout.cshtml. You have to add a full html document in your view.
#{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
<script src="~/js/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
}
</script>
</body>
</html>
I have the following HTML code that is being displayed in a WebBrowser control:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Welcome</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 8pt Verdana;
background: ThreeDFace;
}
#appname {
line-height: 1;
}
#appname h1 {
margin: 0;
font: bold 10pt Verdana;
}
#appname p {
margin: 0;
}
#actions_list {
list-style-type: none;
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var ACTION_NEWPROJECT = 0x0001;
var ACTION_NEWFILE = 0x0002;
var ACTION_OPENPROJECT = 0x0003;
var ACTION_OPENFILE = 0x0004;
//]]>
</script>
</head>
<body>
<div id="appname">
<h1>Application</h1>
<p>Slogan</p>
</div>
<div id="actions">
<ul id="actions_list">
<li>New project</li>
<li>New file</li>
<li>Open project</li>
<li>Open file</li>
</ul>
</div>
<div id="recentfiles">
<p>Recent files:</p>
<ul id="recentfiles_list"></ul>
</div>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var recentFiles = window.external.GetRecentFiles();
var recentFilesDOMContainer = document.getElementById("recentfiles_list");
for (var i = 0; i < recentFiles.length; i++) {
var index = 0+i;
var fileDOMParent = window.document.createElement("li");
var fileDOMElement = window.document.createElement("a");
fileDOMElement.href = "#";
fileDOMElement.onclick = function() {
window.external.OpenRecentFile(index);
return false;
};
fileDOMElement.innerText = recentFiles[i];
fileDOMParent.appendChild(fileDOMElement);
recentFilesDOMContainer.appendChild(fileDOMParent);
}
};
//]]>
</script>
</body>
</html>
To communicate with the application I am using the WebBrowser.ObjectForScripting property so I can access a class with functions via window.external. That is also working perfectly.
But when I try to open the page below I get the following error:
Script Error
Line: 61
Char: 25
Error: Function expected
Code 0
Why is this happening? It seems to occur at the for loop.
the only thing I can think of is that recentFiles does not have an array in it. Did you try opening the developer console and typing in recentFiles to see what it contains? :)
I am trying to display a website in an iframe using Razor asp.net but I'm getting the following error: Refused to display 'https://www.google.ro/?gws_rd=cr,ssl&ei=y359VYr9L4PlUeaLg5gG' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
This is the code:
#{
ViewBag.Title = "About Us";
}
<script type="text/javascript">
$(function () {
$('#myButton').click(function () {
$('#myFrame').attr('src', "http://www.google.com");
});
});
</script>
<iframe id="myFrame"></iframe>
<button id="myButton">
Refresh IFrame
</button>
The page you are trying to show have set a header that prevents it from being showed in an iframe - there is no way to show this in an iframe.
Try using the object tags.
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="http://www.google.com">
<p>backup content</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="http://www.google.com" style="width:100%; height:100%">
<p>backup content</p>
</object>
<!--> <![endif]-->
EDIT: Or you can generate it with jquery:
<script>$("#testLoad").load("http://www.google.com/");</script>
<div id="testLoad"></div>
I finished this by simply adding:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var position = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: position,
map: map,
title:"This is the place."
});
var contentString = 'Hello <strong>World</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:500px"></div>
</body>
</html>
You can use Google custom search.
It's working fine with me.
It sends X-Frame-Options: ALLOWALL which allows you to embed this site in your IFRAME. See https://productforums.google.com/forum/?hl=en#!category-topic/websearch/how-do-iusing-google-search/pjHnvDST2D4 for more info.
after three days of trying I'm near giving it up..
I try to use the Google Maps API to create a map with a longer line formed by several points. Unfortunately not even uploading a XML file worked out for me (Though I successfully authorized myself with my Google account).
Can someone please give me help and post a C#/VB code (snippet) on how to create a map and draw a line on it? Thanks for you help!
Norbert
If you use javascript API for Google map, here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
How to load kml file in Google Map using code?
(C#, javascript, .Net)
I successfully integrated kml files in JavaScript
In code below replace your kml name
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Google Maps JavaScript API v3 Example: KmlLayer KML Features</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize () {
var myLatlng = new google.maps.LatLng(40.65, -73.95);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var nyLayer = new google.maps.KmlLayer(
'https://sites.google.com/site/test/test/test.kml',
{ suppressInfoWindows: true,
map: map
});
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
}
</script>
</head>
In body add these lines
<body onload="initialize()">
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>