I want to create a simple windows form C# app that shows a google map with multiple markers from a list of Lat Long.
My app can include a web browser container in it.
Is there any google api for that?
I use a google dll to calculate routes automatically using in the Nugget Console the following code:
PM> Install-Package GoogleMapsApi
Not sure if it will serve you, but it has all the features of Google Maps on it, just know how to use. Use the google documentation to learn how to use it well: https://developers.google.com/maps/
Edit 1:
I use this query that return all possible routes in the veriable routes.
Namespaces:
using GoogleMapsApi;
using GoogleMapsApi.Entities.Directions.Request;
var request = new DirectionsRequest
{
Origin = employeeAdress,
Destination = companyAdress,
TravelMode = TravelMode.Transit,
Alternatives = true,
ApiKey = key,
DepartureTime = DateTime.Now
};
var routes = GoogleMaps.Directions.Query(request);
But using a free key that google gives to you, you have only 2500 requests per day.
Here is some code for an HTML page to be used inconjunction with WebBrowser:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>GoogleMap</title>
<style type="text/css"> v\:* { behavior:url(#default#VML); } </style>
<script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxx&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//======== Local Google API data ===========================================================
var map = null;
var overlayvew = null;
var geocoder = null;
// ======== Local controls ======================================================
var body_info_label = null ;
var body_map = null ;
//======== Local functions and Events ============================================
function load()
{
body_info_label = document.getElementById("body_info_label");
body_map = document.getElementById("body_map") ;
MapLoad(900,700,"H") ;
}
function MapLoad(Width,Height,MapType)
{
try
{
ToGM_SetMapSize(Width,Height) ;
var mapOptions =
{
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: false, scaleControl: true, streetViewControl:false,
overviewMapControl: false, overviewMapControlOptions: { opened: true }
};
map = new google.maps.Map(body_map,mapOptions);
}
catch (ex){ window.external.FromGM_Uninitialized() ; }
if (map != null)
{
geocoder = new google.maps.Geocoder();
ToGM_SetMapCenter(50.0,15.0,4); // Center and Zoom to Europe
ToGM_SetZoomControl (true ) ; // Create and Display zoom
ToGM_SetMapType (MapType) ; // Display according to map Type
ToGM_SetScaleControl(true ) ; // Create and Display scale
overlayview = new google.maps.OverlayView();
overlayview.draw = function() {};
overlayview.setMap(map);
// call to a C# procedure to indicate end of init
// window.external.FromGM_Initialized() ;
}
}
//======== Some functions that may be called from C# by .Net WebBrowser ================================
function ToGM_SetMapSize(Width,Height)
{
if (body_info_label!=null) Height=Height-15 ;
body_map.style.width =Width +"px" ;
body_map.style.height=Height+"px" ;
if (map!=null) google.maps.event.trigger(map, 'resize');
}
function ToGM_SetMapCenter(Lat,Lon,Zoom)
{ if (map!=null) {
if (Zoom==null) Zoom = map.getZoom() ;
var Center ;
if (Lat==null) Center = map.getCenter() ;
else Center = new google.maps.LatLng(Lat,Lon);
map.setCenter(Center) ;
map.setZoom(Zoom);
}}
function ToGM_SetZoomControl(On)
{
if (map!=null) map.setOptions({zoomControl:On}) ;
}
function ToGM_SetScaleControl(On)
{
if (map!=null) map.setOptions({scaleControl:On }) ;
}
function ToGM_SetMapType(MapType) // String MapType = "N"/"S"/"H"/"P"
{if (map!=null) {
if (MapType=="N") map.setMapTypeId(google.maps.MapTypeId.ROADMAP );
if (MapType=="S") map.setMapTypeId(google.maps.MapTypeId.SATELLITE );
if (MapType=="H") map.setMapTypeId(google.maps.MapTypeId.HYBRID );
if (MapType=="P") map.setMapTypeId(google.maps.MapTypeId.TERRAIN );
}}
</script>
</head>
<body
onload="load()" onunload="unload()">
<div id="body_map" style="width: 1000px; height: 600px"></div>
</body>
</html>
Related
I'm actually developping a JARVIS assistant
It will have a lot of module But i start with what was supposed an easy one.
the Youtube One. So my mainwindow who are fullscreen or hidden has a WebBrowser
private static string GetYouTubeVideoPlayerHTML(string videoCode)
{
var sb = new StringBuilder();
const string YOUTUBE_URL = #"http://www.youtube.com/embed/";
sb.Append("<html>");
sb.Append(" <head>");
sb.Append(" <meta name=\"viewport\" content=\"width=device-width; height=device-height;\">");
sb.Append(" </head>");
sb.Append(" <body marginheight=\"0\" marginwidth=\"0\" leftmargin=\"0\" topmargin=\"0\" style=\"overflow-y: hidden\">");
sb.Append($" <iframe width=\"100%\" height=\"100%\" src =\"{YOUTUBE_URL}{videoCode}?autoplay=1&showinfo=0&controls=0\" frameborder = \"0\" allowfullscreen>");
sb.Append(" </body>");
sb.Append("</html>");
return sb.ToString();
}
This return the string i use with WebBrowser.Navigate()
It work well but if the video has embeded restriction like VEVO i can't see it
https://www.youtube.com/embed/wfN4PVaOU5Q
Exemple here
One thing tell me its possible because in this site
http://codepen.io/Jebik/pen/ZLZQwX
The embeded work like a charm....
So it's probably something that i don't get about this restriction.
Any idéa and solution is welcomming.
But i would rather have a legit solution like "man you must register your domain and ask the page in https" than "you can hack this security by this method"
I found a way i don't know why its works
I use a server i have to upload a webpage
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
var player;
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
window.onresize = resize;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady()
{
player = new YT.Player('player', {
height: height,
width: width,
playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo': 0, 'enablejsapi':1, 'iv_load_policy':3, 'modestbranding':1, 'showinfo':0},
videoId: '<?php echo $_GET["v"]; ?>',
events: {
'onReady': onPlayerReady
}
});
}
function resize()
{
height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
if(player != null)
{
player.setSize(width, height);
}
}
function onPlayerReady(event) {
event.target.playVideo();
}
function playVideo()
{
player.playVideo();
}
function pauseVideo()
{
player.pauseVideo();
}
</script>
</body>
</html>
The web page Must Be acces from https
I don't exactly know why
Maybe youtube use the certificat to know the real location of web site (checking where it is registred instead of the ip)
And after taht i change my WebBrowser.NavigateToString by a WebBrowser.Navigate($"https://domain.fr/youtube.php?v={VideoCode}");
In this way i have a youtube player in full screen in my WPF window and i can read most of the youtube video like VEVO limited one.
This is resolved but if anyone know why i'm curious to know
I am using html2canvas to capture google map image on the click of a button.
There are lot of codes for this but I am not successful in getting an image,all I get is blank image with google icons like street view and sign in image without rendering map(just a grey background) .I used proxy for c# and here is my code. Can you guys tell me what the problem is?
$('#btn_capture').click(function ()
{
html2canvas($('#map-canvas'), {
logging: true, //Enable log (use Web Console for get Errors and Warnings)
proxy: "html2canvasproxy.ashx",
// useCORS: true,
onrendered: function (canvas) {
var img = new Image();
img.onload = function () {
img.onload = null;
document.body.appendChild(img);
};
img.onerror = function () {
img.onerror = null;
if (window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
}
else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
});
i am developing a application where user requirement to disable window taskbaar after asp.net page load .i am using asp.net with c# .
Please help me
You can achieve this task using javascript function as below.
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
Put above code in you .aspx page in <head> tag.
OR
you can use HTML5 API for FullScreen Mode Click here
Updated Answer
if above code is not working then try to force "F11" key event using below code.
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body;
requestFullScreen(elem);
I am trying to create a dynamic tooltips to my application however this is not working, can I have some idea?
below is the my code that try to retrieve tools tip through java scripting.
<input type="text" tooltipid="testfamily" onclick="tooltipshow(this);" id="family"
value="family " />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var data = {
name: "enter your name",
family: "enter your family",
testfamily: "enter your family",
uc1_txtname: "enter your name for Control 1 (User Control1)",
uc2_txtname: "enter your name for Control 2 (User Control2)"
}
function tooltipshow(e) {
var Tip = $("<div class='dinamictip'></div>");
Tip.text('');
var ToolTip = $(e).attr('tooltipid');
if (ToolTip != null) {
var offset = $(e).offset();
var height = $(e).height() + 10;
Tip.text(data[ToolTip]);
Tip.css('position', 'absolute').css('left', offset.left).css('top', offset.top - height);
Tip.appendTo('body');
Tip.remove();
}
};
I didn't tested your code, but probably the culprit is Tip.remove();: you are deleting the tip as soon as you create it.
Try this change in your tooltipshow function: the first time this code executes, it won't find the tool tip's div, so it will create it and will add it to the body (hidden, for now). Then, the next time you call the code, it will find the old tool tip and will reuse it.
function tooltipshow(e) {
var Tip = $("#mydinamictip");
if(Tip.length==0){
Tip = $("<div id='mydinamictip' class='dinamictip'></div>");
Tip.hide().appendTo('body');
}
Tip.text('');
var ToolTip = $(e).attr('tooltipid');
if (ToolTip != null) {
var offset = $(e).offset();
var height = $(e).height() + 10;
Tip.text(data[ToolTip]);
Tip.css('position', 'absolute').css('left', offset.left).css('top', offset.top - height);
Tip.show();
}
};
A friend of mine has embedded a google earth plugin into a C# user control. All works fine but when you close the window we recieve and "Unspecified Error" with the option to continue running the scripts or not. From our tracking it down it appears this is being cause by a script that google is dropping onto the page. Any ideas?
Here is an example, by me, of c#/Google Earth API integration that covers the problem you are having (see the comments)
http://fraserchapman.blogspot.com/2008/08/google-earth-plug-in-and-c.html
Also, here is another of my projects that uses COM Google Earth Plugin Type Library (plugin_ax.dll) converted into the equivalent definitions in a common language run time assembly. It may be of some use. http://fraserchapman.blogspot.com/2008/12/google-earth-plugin-control-library.html
We have now tried this in both IE and FF. Works fine. Any ideas why the error only comes up on close? can we somehow disable it? here is our code.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>
<head>
<script src="http://www.google.com/jsapi?key=ABQIAAAAzghEPRV_D0MDzTELJ4nkXBT2AlVLQD8Rz4_aVbiXesLoyhRIMBRo399nnxv9aY-fqnkVGgTgR-pTsg">
</script>
<script>
google.load("earth", "1");
var ge = null;
var placemark;
function init(){
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object){
ge = object;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, false);
placemark = ge.createPlacemark('');
placemark.setName("Current Position");
// Create style map for placemark
var normal = ge.createIcon('');
normal.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
var iconNormal = ge.createStyle('');
iconNormal.getIconStyle().setIcon(normal);
var highlight = ge.createIcon('');
highlight.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
var iconHighlight = ge.createStyle('');
iconHighlight.getIconStyle().setIcon(highlight);
var styleMap = ge.createStyleMap('');
styleMap.setNormalStyle(iconNormal);
styleMap.setHighlightStyle(iconHighlight);
placemark.setStyleSelector(styleMap);
var options = ge.getOptions();
options.setStatusBarVisibility(true);
options.setScaleLegendVisibility(true);
}
function failureCallback(object){
// Gracefully handle failure.
alert("Error");
}
function changeViewAngle(angle){
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
lookAt.setTilt(angle);
ge.getView().setAbstractView(lookAt);
}
function ShowMarker(){
ge.getFeatures().appendChild(placemark);
}
function MoveMarker(lon, lat){
// Create point
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var point = ge.createPoint('');
point.setLatitude(lat);
point.setLongitude(lon);
placemark.setGeometry(point);
}
function HideMarker(){
ge.getFeatures().removeChild(placemark);
}
function SetPosition(lon, lat, heading){
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.setLatitude(lat);
lookAt.setLongitude(lon);
lookAt.setHeading(heading);
ge.getView().setAbstractView(lookAt);
}
function SetAltitude(alt){
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.set(lookAt.getLatitude(), lookAt.getLongitude(), 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, lookAt.getTilt(), alt);
ge.getView().setAbstractView(lookAt);
}
function ResizeMap(w, h){
var map = document.getElementById('map3d_container');
map.style.height = h;
map.style.width = w;
}
function AddKML(kml){
var parseKML = ge.parseKml(kml);
ge.getFeatures().appendChild(parseKML);
return ge.getFeatures().getLastChild().getName();
}
function RemoveKML(kmlName){
if (ge.getFeatures().hasChildNodes()) {
var nodes = ge.getFeatures().getChildNodes();
for (var i = 0; i < nodes.getLength(); i++) {
var child = nodes.item(i);
if (child.getName() == kmlName) {
ge.getFeatures().removeChild(child);
}
}
}
}
function OptionsChanged(nav, status, scale, grid, map, terrain, road, border, building){
var options = ge.getOptions();
var form = document.options;
if (nav) {
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
}
else {
ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
}
options.setStatusBarVisibility(status);
options.setScaleLegendVisibility(scale);
options.setGridVisibility(grid);
options.setOverviewMapVisibility(map);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, terrain);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, road);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, border);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, building);
}
</script>
</head>
<body onload='init()'>
<center>
<div id='map3d_container' style='border: 1px solid silver; height: 510px; width: 767px;'>
<DIV id=map3d style="HEIGHT: 100%">
</DIV>
</div>
</center>
</body>
</html>
I ran the sample and didn't get any errors when closing the tab.
try this
yourWebBrowser1.Document.Write(String.Empty);
when you close the app.
my question:
can you show me how to use AddKML(kml) in C# app? by string or file path, I tried both.
I am looking for a way to parse kml files...