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>
Related
I want to use the timepicker in my asp.net project , I try to do the same thing in this link : https://timepicker.co
I download 2 files JS and CSS ,
but some like this , where can i put it ?
$(document).ready(function(){
$('input.timepicker').timepicker({});});
and I would like to use some like this :
$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 60,
minTime: '10',
maxTime: '6:00pm',
defaultTime: '11',
startTime: '10:00',
dynamic: false,
dropdown: true,
scrollbar: true });
but i dont have any idea of where can i put it.
this is my HTML code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Users/Myfile/Downloads/timepicker-1.3.5.zip/timepicker-1.3.5/jquery.timepicker.css">
<script src="Users/Myfile/Downloads/timepicker-1.3.5.zip/timepicker-1.3.5/jquery.timepicker.js"></script>
<script>
$(document).ready(function () {
$('input.timepicker').timepicker({});
});
</script>
<input type="text" class="timepicker" value=""/>
</head>
<body>
add jquery link in your code it will be work's
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function(){
$('input.timepicker').timepicker({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<input type="text" class="timepicker" value=""/>
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.
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>
I am writing a small application in VS2012 containing a webbrowser control. I would like to load a html file containing javascript. The webbrowser control is not able to deal with javascript default. So I have been doing some reading.
I have the following html file:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(45.046006, -105.245867);
var myOptions = {
zoom: 13,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
The html file located in the debug directory of my c# project (VS2012).
I would like to load this html file and call the initialize function. I have been searching for a long time on a clear tutorial on how to do this but without any success. With the knowledge I have I tried the following. However, not with the expected result.
Code:
maps_browser.DocumentText = File.ReadAllText("GPSmap.html");
maps_browser.Document.InvokeScript("initialize");
So my questions are:
How do I load a *.html file containing javascript into the webbrowser?
How do I call javascript functions from the html file?
How to properly navigate to the html file?
Thanks in advance for any advice :)
It looks like that the following code works for me:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
maps_webbrowser.DocumentText = File.ReadAllText(#"GPSmap.html");
}
private void maps_webbrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
Debug.WriteLine(maps_webbrowser.DocumentText.ToString());
maps_webbrowser.Document.InvokeScript("initialize");
}
}
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>