help creating a map widget

Wednesday, December 30, 2009 by homer1324 | Discussion: DesktopX Tutorials

Hi guys, it's been a while since I've posted here but I've been pretty busy with school and stuf.. (:/)

Anyways, I had an idea to create a custom map widget for DX; this widget should display by default just the map of the earth (data can be obtained from google maps, mapquest, yahoo maps, take your pick) and should allow the user to type in their position via zip code, city, state, latitude/longitude, or to just pan and zoom on the map to see what they want.

I have already obtained a google maps API license key and have been trying to do some research on how to do this but I've just plain hit a wall on how to get started.


For instance, I can get a response from google's server by using the microsoft.xmlhttp object and i can get a pagesource for what APPEARS to be what I need (just code at this point ) but I have no idea how to turn that code into a viewable map.

Can anyone point me in the right direction?



Reply #1 Wednesday, December 30, 2009 9:51 PM

Have you looked at the following from here: ?


Microsoft.XmlHttp Object

You instantiate this COM object from a script. For instance, say you want to download an html file data you can adapt this code:

'Creates an instance of Microsoft.XmlHttp
Set http = CreateObject("Microsoft.XmlHttp")

'Disables error prompts
On Error Resume Next

'Sets the URL to download
url = "
http.Open "GET", url, False

'Receives data
http.send ""
sWebpage = http.responseText

This is a very simple yet effective way to download data from the internet. Possibly the only limitation is that the method is synchronous, that is, it will block the script execution until the data finished downloading. The interface could hang until the script finished its job. Still, this can be fast and reasonable for most cases.

Please refer MSDN help on how to use XMLHTTP object.

A more complex method of accessing internet data is to use the Microsoft Web Browser.

Microsoft Web Browser Control
You can create an hidden MS Web Browser ActiveX control to download internet data. This object is very powerful and can be used for different purposes than the actual html rendering.

Refer MSDN references on this object for information on how to access various html elements, modify the presentation, properties, etc.

As a quick start, create a blank object. Then add a new script. In the menu select "ActiveX control...". Scroll down and select "Microsoft Web Browser".

You can use this simple method to navigate to a page:

Control.navigate2 ""

Select "Event Wizard.." in the script editor menu and add this event:

'Fired when the document being navigated to reaches ReadyState_Complete.
Sub Control_DocumentComplete(pDisp, URL)

End sub

This function is called when the page finished loading. The mechanism is asynchronous, so Object.Navigate2 won't block the script execution flow.

When the document is complete you can use the control methods to access the page data. The simpliest one is:


It will return the whole page content.

Passing URL Parameters
When you are passing URL parameters, no matter what method you choose, make sure to correctly escape the text parameters if they can contain special characters.

The VBScript method to do this is:


Reply #2 Thursday, December 31, 2009 1:02 AM

Hi zubaz,

I have seen that and have done this but the problem is this;

with method 1 it returns the contents of the webpage in the form of data that I don't know how to manipulate into a maps application-- the data just looks like page source code to me (HTML and javascript)

method 2 gets me a webpage but the problem is I don't want the whole page, I just want the portion of the page that contains the map.

Also, it seems that control.document.body.innerHTML is not supported as I get a fat error whenever I put that in the code.



Reply #3 Friday, January 1, 2010 6:25 PM

Ok, so I was able to make a map widget using activeX controls (using a microsoft webbrowser control and figuringout what the request URL parameters mean as far as an HTML response which is rendered by the activeX control) BUT now the problem is that the map will always be the shape of a rectangle.

To fit into my theme, I need to have the map with rounded corners-- a simple mask over the rectangular shape of the map would normally do the trick but since this is an activeX control, it doesn't follow DX's normal rules of child/parent behaviors so giving it a mask with the dimensions I want does practically nothing.

Any ideas?


essentially I want to turn this;


Code: html
  1. [<HTML>
  2. <HEAD>
  3. <Body style = "margin:0;">
  4. <iframe width="426" height="147" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";z=3&amp;output=embed"></iframe>
  5. </BODY>
  6. </HTML>]


so that it has rounded corners instead.




Reply #4 Saturday, January 2, 2010 12:57 PM

I do not believe thats possible with the activex plugin for the browser, but i may be wrong.

Reply #5 Saturday, January 2, 2010 10:20 PM

Yep, as RomanDA says, you can't do that directly with an ActiveX control.

To deal with that, you can switch to the static map API and get a png file back when you call the API. You can then set an object to use it and apply a mask to that object. You will lose the ability to interact with the map though, as it will just be a static image.

Another option is to use a container object to hold the ActiveX control and apply a white glow to it to "hide" the corners. You can then put those inside another object to act as a rounded border.

Reply #6 Friday, January 15, 2010 10:31 AM

its way over my  head I just came in for a peek to see what this was all about 

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!