Retrieving all address information along Google Maps route - html

I am developing an Windows Forms application using VB.NET that offers the user to lookup addresses on Google Maps through a Web Browser. I can also successfully show the directions between two points to the user, as well as allow the user to drag the route as he/she pleases. My question now is - is it possible for me to get the lattitude/longitude information of the route, i.e. the overview_polyline array of encoded lattitude/longitude points and save it to e.g. a text file on my computer? Or is it possible to get a list of all the addresses located both sides of the route over the entire length of the route, and then save the data to a file on my computer? I'm using HTML files to access and display the Google Maps data in the Web Browser item.
Thank you

This is actually pretty simple if your just looking for the screen coordinates.
// this probably should be in your form initialization
this.MouseClick += new MouseEventHandler(MouseClickEvent);
void MouseClickEvent(object sender, MouseEventArgs e)
{
// do whatever you need with e.Location
}
if your strictly looking for the point in the browser, you need to consider the functions
browser.PointToClient();
browser.PointToScreen();
So, this method is usable if you know exactly where your form is (easy to get its coords) and where you webbrowser control is (easy to get coords of this as well since it's just a control in your form) and then, as long as you know how many pixels from the left or right, and from the top or bottom the image will be displayed, once you get the global mouse click coords (which is easy) you can predict where it was clicked on the image.
Alternatively, there are some scarier or uglier ways to do it here...
You can use the ObjectForScripting property to embed code to do this in the webbrowser. It's ugly to say the least. MSDN has some documentation on the process here: http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.objectforscripting.aspx
Because its really ugly, maybe a better solution is to use AxWebBrowser - it's ugly too but not so scary.
In addition, I found this post of someone wanting to do it on a pdf document, and a MSFT person saying its not possible, but really what he is trying to say is that it isn't built in, even with a pdf document its still possible to predict with high to certain accuracy where it was clicked if you use the first method i described. Here is the post anyway: http://social.msdn.microsoft.com/Forums/en/csharpgeneral/thread/2c41b74a-d140-4533-9009-9fcb382dcb60
However, it is possible, and there are a few ways to do it, so don't get scared from that last link I gave ya.
Also, this post may help if you want to do it in javascript:
http://www.devx.com/tips/Tip/29285
Basically, you can add an attribute on the image through methods available in the webbrowser control, you can add something like onclick="GetCoords();" so when it is clicked, the JavaScript function will get the coords, and then you can use javascript to place the values in a hidden input field (input type="hidden") which you can add through the webbrowser control, or if there is one already on the page, you can use that. So, once you place the coords using javacript into that input field, you can easily grab the value in that using the webbrowser control, eg:
webbrowser1.document.getElementById("myHiddenInputField").value
That will get the value in that field, which you've set through JavaScript. Also, the "GetCoords()" function i mentioned is called SetValues() in the javascript method link i provided above (in the devx.com site) but I named it GetCoords because it makes more sense and didn't want to confuse you with the actual name they used, you can change this to any name you want of course. Here is the javascript they were using, this only gets the coords into a variable, doesn't put it into a hidden input field, we will need to do that in addition (at the end of the javascript SetValues/GetCoords function).
function SetValues()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
document.getElementById('divCoord').innerText = s;
}
These guys are just saving it inside a div element, which is visible to users, but you can make the div invisible if you want to use a div field, there is no advantage or disadvantage in doing that, you would just need to set the visible property to false using javascript or css, but still, it is easier to use a hidden input field so you don't need to mess with any of that.
Let me know how you get along.

Related

Get a tooltip by mouseover with Fusion Tables

As a beginning self-made amateur programmer I’m currently trying to get some things done with Google Fusion Tables.
I made a map with markers and got the HTML of that map. But I wish to add the function of a tooltip by a mouseover of a particular marker. I found a tutorial to work this out but I can’t enable the tooltips.
The following link shows the progress so far: http://jsbin.com/cipejicewo/1/watch?html,js,output
1 I don’t have to change something in this script that fits to the specific Fusion Table where its linked with, do I? When I do have to change the javascript, what are the specific elements I have to rename?
2 How can i call google.maps.FusionTablesLayer.enableMapTips(options)? And where do I have to put this whole ‘function init’ code in the html-file? Directly in the script that described above? Off course without losing the functions that the html already provides. Besides that, I get that I have to change the tableid and change the select column and geometry column name, but is there something more I should change in this function I'm going to add?
I'm struggeling with it now for days. And I'm out of options, so every help would be welcome. Thanks in advance!
It's not clear what your code currently looks like, but these 2 things you'll need to do first:
when you use another FusionTable than the example, make sure that the table is public and downloadable
You must use your own key(it's the variable apiConsoleKey in the example). Follow the steps in Acquiring and using an API key to get a valid key.

html div nesting? using google fetchurl

I'm trying to grab a table from the following webpage
http://www.bloomberg.com/markets/companies/country/hong-kong/
I have some sample code which was kindly provided by Phil Bozak here:
grabbing table from html using Google script
which grabs the table for this website:
http://www.airchina.com.cn/www/en/html/index/ir/traffic/
As you can see from Phil's code, there is alot of "getElement()" in the code. If i look at the html code for the Air China website. It looks like it's nested four times? that's why the string of .getElement?
Now I look at the source code for the Bloomberg page and its is load with "div"...
the question is can someone show me how to grab the table from this the Bloomberg page?
and just a brief explanation of the theory also would be useful. Thanks a bunch.
Let's flip your question upside down, and start with the theory. Methodology might be a better word for it.
You want to get at something specific in a structured page. To do that, you either need a way to zap right to the element (which can be done if it's labeled in a unique way that we can access), OR you need to navigate the structure more-or-less manually. You already know how to look at the source of a page, so you're familiar with this step. Here's a screenshot of Firefox Inspector, highlighting the element we're interested in.
We can see the hierarchy of elements that lead to the table: html, body, div, div, div.ticker, table.ticker_data. We can also see the source:
<table class="ticker_data">
Neat! It's labeled! Unfortunately, that class info gets dropped when we process the HTML in our script. Bummer. If it was id="ticker_data" instead, we could use the getElementByVal() utility from this answer to reach it, and give ourselves some immunity from future restructuring of the page. Put a pin in that - we'll come back to it.
It can help to visualize this in the debugger. Here's a utility script for that - run it in debug mode, and you'll have your HTML document laid out to explore:
/**
* Debug-run this in the editor to be able to explore the structure of web pages.
*
* Set target to the page you're interested in.
*/
function pageExplorer() {
var target = "http://www.bloomberg.com/markets/companies/country/hong-kong/";
var pageTxt = UrlFetchApp.fetch(target).getContentText();
var pageDoc = Xml.parse(pageTxt,true);
debugger; // Pause in debugger - explore pageDoc
}
This is what our page looks like in the debugger:
You might be wondering what the numbered elements are, since you don't see them in the source. When there are multiples of an element type at the same level in an XML document, the parser presents them as an array, numbered 0..n. Thus, when we see 0 under a div in the debugger, that's telling us that there are multiple <div> tags in the HTML source at that level, and we can access them as an array, for example .div[0].
Ok, theory behind us, let's go ahead and see how we can access the table by brute-force.
Knowing the hierarchy, including the div arrays shown in the debugger, we could do this, ala Phil's previous answer. I'll do some weird indenting to illustrate the document structure:
...
var target = "http://www.bloomberg.com/markets/companies/country/hong-kong/";
var pageTxt = UrlFetchApp.fetch(target).getContentText();
var pageDoc = Xml.parse(pageTxt,true);
var table = pageDoc.getElement()
.getElement("body")
.getElements("div")[0] // 0-th div under body, shown in debugger
.getElements("div")[5] // 5-th div under there
.getElement("div") // another div
.getElement("table"); // finally, our table
As a much more compact alternative to all those .getElement() calls, we can navigate using dot notation.
var table = pageDoc.getElement().body.div[0].div[5].div.table;
And that's that.
Let's go back to that pinned idea. In the debugger, we can see that there are various attributes attached to elements. In particular, there's an "id" on that div[5] that contains the div that contains the table. Remember, in the source we saw "class" attributes, but note that they don't make it this far.
Still, the fact that a kindly programmer put this "id" in place means we can do this, with getDivById() from that earlier question:
var contentDiv = getDivById( pageDoc.getElement().body, 'content' );
var table = contentDiv.div.table;
If they move things around, we might still be able to find that table, without changing our code.
You already know what to do once you have the table element, so we're done here!

jQuery mobile .html() function-- any resuse of old values?

We're using google maps and want to keep our traffic to that site to a minimum. At present we have an <li> element that contains an href to a generated maps.google.com URL. That link can change based on the orientation of the device-- the same map address, but we use a resized map to fit the screen appropriately.
We're storing the portrait and landscape google maps' <href> values to keep from regenerating them every time the device is reoriented. Then, on every orientation change we flip the <li>'s html property using jQuery like this:
//on an orientation change...
if (window.orientation == "portrait") {
$(#mapLi).html(portraitMapHref);
}
else {
$(#mapLi).html(landscapeMapHref);
}
The google API generates the hrefs and the embedded <img> tags for us on the page load, and the first time an orientation change occurs. This of course leads to a connection to maps.google.com.
When we swap back and forth using the .html function with the cached hrefs there doesn't appear to be a simultaneous call to maps.google.com, which is what we're after, but I wondered if this is due to browser caching or the nature of the .html function in jqm? I thought that swapping the html value in that element would trigger a call to the maps.google.com address. Should it not, or are we getting lucky with browser caching?
It's not clear what exactly you store in portraitMapHref and landscapeMapHref, but I guess you store nodes.
In this case when you use $.html(), the new content will replace the current content, but the old content(node) will not be deleted, it's still a node, no matter if it's attached to the DOM or not.
There is nothing to load when you re-use the replaced node.

How remove/close multiple popup in Flex application?

if we open lot of popup during browsing(web) or in an AIR application, how remove them at once?
I don't think there's really a call for removing all pop-ups with the pop-up manager. I think you would need to keep a reference to each instance in a list and call PopUpManager.removePopUp for each one. Honestly though it's probably not a good idea to have a ton of pop-ups (in terms of user experience) there may be a case for it but I would definitely take some time to consider if it's the best option really.
EDIT:
You could also consider extending PopUpManager and maintain an internal collection, it looks like PopUpManager uses PopUpManagerImpl and doesn't seem to expose the impl property it uses for delegating the actual work so you'd probably need to extend both. But you could then use the PopUpManagerImpl.mx_internal::popupInfo which is an array that has objects that have a property called owner that seems like it would be what you'd want to supply to the calls to removePopUp.
Add all popups in array when u create it. And remove all popups
var popupCollection:ArrayCollection = new ArrayCollection;
var mypopup:IFlexDisplayObject;
PopUpManager.centerPopUp(mypopup=PopUpManager.createPopUp(this,popupWindow));
popupCollection.addItem(mypopup);
u can remove all popup using loop
PopUpManager.removePopUp(popupCollection[index] as IFlexDisplayObject);

Window settings for Google Maps widget

I've got a plain-vanilla google maps widget sitting in a page and I'd like it if the driving directions opened up in a new window instead of taking over the current window. Is there a setting for this?
The driving directions go into whatever HTML element you specify as the second argument when you construct the GDirections object. So I guess that means you'd have to create the window before you create the GDirections object, which is likely not what you want.
The other thing that jumps out, looking at the documentation, is that you can call the load() method with the option getSteps = true. It's not clear what the "steps" data looks like, but I assume it essentially comes back as an HTML string. (Actually, it's not even clear how you get the data in the first place, but I assume it's GDirections.getSteps() or something similar.) So then when the "load" event happens, you can create the new window then put the "steps" data in it.