DOWNLOAD THE SOURCE FILES HERE
Comments
Was so happy to find your post. Got it working for an iOS app project I have and then realized HTMLloader doesn't work on mobile... Back to zero. Your solution really works well on desktop though and I've learned interesting stuff about the HTMLloader class. Thanks !
I got it working by making a html folder and placing the GoogleMapsV3_JSFunctions.html in there, and then adding to SRC. It's performance might even be better than AS3. Thanks very very much!!
Hi MK,
If you place the html file inside the src directory it will be copied out with the package. If you create sub folders inside the src directory, files inside those will also be packaged.
Files and folders inside the src directory are relative to the application. So if you for instance has a src/html/htmlFile.html file.
The relative path to the file inside your application would be html/htmlFile.html.
Hi, thanks for the speedy reply! I do not actually see the html file included. And when I look at package settings/package contents there's not really a way to add it. How can I make sure that file gets added to the application directory? Thanks!
Hi MK.
When you package the AIR installer are you including the html file with it so the example has something to load?
Also, when you publish, Flash builder copies many of the files from src to another folder like bin-debug. Are you certain your paths for the html file aren't getting confused on export?
Hi, thanks very much for this!! It works perfect locally in FlashBuilder 4.7, but once I export a release build and create the .AIR package it does not show the map...only the map route button. Is there a security privilege I need to set or something? System.Security ???
Hi Davide,
I just tried it again today and I'm getting the same thing you're talking about with street view. When I originally implemented this in 2011 it worked well.
Doing this in AIR might require unloading the html and re-loading it now to allow street view to work again once all those street view exceptions start happening.
I'm not sure about everyone else, but for like the last year, Google Maps throws a flash exception in my debug player when I load street view normally in a full browser...seems like someone has been slacking over there.
Hi Charles!
Did you encounter problem when switching to street view?
It seems like AIR got problems in rendering the "circle" following the mouse movements into Street View mode and a lot of javascript exceptions are generated.
Did you notice the same thing? Thank you
Hi Zap,
The key component to this technique, the htmlLoader may not be supported on a mobile platform. This is directly from the Adobe documentation...but their documentation is out of date or blatantly wrong some times (especially when it comes to media server stuff).
"This feature is supported on all desktop operating systems, but is not supported on mobile devices or on AIR for TV devices. You can test for support at run time using the HTMLLoader.isSupported property".
If it does report supported then I would move the mapping of callback functions into the "htmlLoaded" event. By mapping of callback functions I mean:
theBrowser.window.JSnewGeocodeData = JSnewGeocodeData..etc.
I hope that helps.
It's a runtime error
Here is the error i get:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Mapgoogle/createHtmlViewer()
Maybe i can't use the code inside mobile app?
Hi Zap can you help me out a little and post the details of your error?
Is it compile time or a runtime error? The line you refer to is hooking up a loaded function in a HTML page to an action script function in your code.
Hi Charles,
i tried to use your code into a flash mobile project (with flash builder). I get one error at this line:
theBrowser.window.JSnewGeocodeData = JSnewGeocodeData
...and following lines.
Seems that javascript calls don't work.
Do i miss something?
Hi Monteiro,
Look at the html file, "GoogleMapsV3_JSFunctions.html" there's a script reference right at the top and in big letters it says "YOUR_API_KEY". Replace that with ...well your api key.
I try to run on Flash Builder 4.6 with air 3.4:
But I get the following error:
Google has disabled use of the Maps API for this application.
The provided key is not a valid Google API Key.
Where do I change the api key?
dj_perry - The major downside here is that this example must be run inside of the Adobe AIR runtime. It will not render correctly inside of a webpage only likely due to security sandbox issues.
Hi, great job!
I've just a problem with the Flash version.
I've customed the .fla with the CS5 and the .html with Dreamweaver and if I open them through the .html page (GoogleMapsV3_JSFunctions.html) I see all the map and the markers/labels precisely.
But if I load the .swf as a movie inside a flash site (.swf) I don't see anything.
The curious thing is that if I do a preview inside flash CS5 I see the map but not the markers/labels.
The question is: how can I load the map inside a flash movie using the .swf file (and not the .html page)?
Thanks in advance!
Hi Jeff. The example on this page uses the Javascript API and javascript for all interactions with Google Maps. I am just displaying html pages inside of a browser window from inside an Adobe AIR application.
If you are using adobe AIR or something else in Flash that supports the htmlloader class, then you can use the same methodology. If you're doing this on a web site, then you're probably stuck with doing it all in html/javascript.
My use case was that I implemented a seamless maps solution in a full-screen Adobe AIR kiosk using the method I present here as a basis. So its an unusual use case, but it works.
hi Charles,
Did you mean a flash application still can work with JavaScript V3, (instead of Google flash API) properly?
Hi Harold. The real bummer about this solution is that it will not work in web applications. The key htmlloader class is not available when running things without AIR. You may be able to use Flex, but I have not checked to see if the htmlloader class is available over there.
hi Charles,
first of al i am a beginner of AIR and as3. second sorry for my pour english.
when i opening de swf files is the map not visible, the button is flickering it looks like the swf file is in a kind of loop. this is also when ik publish de fla to the flashplayer. but when i publish this as a air file the map is visible en everything works fine. because i have a fuly flash site i would like to integrate this/your google maps app(load in my site as a extern swf file). do you know if ther is any way to do this, or what i must ajust to have a working swf file?
I came across a problem where sometimes the AbstractDataLoader would load, and other times it wouldn't make it to the HandleData function. Not sure why it would happen (network problem, my web server not wanting to serve the html page...?), but it would happen at least one in every four attempts.
I'm interested to hear any comments about why it was occurring in the first place, but my workaround that fixed it is this.
An an IO error listener...
AbstractDataLoader.addEventListener(IOErrorEvent.IO_ERROR, error_handle_if_no_load,false,0,true)
function error_handle_if_no_load(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event)
AbstractDataLoader.load(new URLRequest("https://www.mysite.com/map.html"))
}
So essentially if the map page doesn't load the first time, it'll try again, and it seems to work. Of course, if there is a real problem like a connection break, it'll probably loop forever, so this still needs some more refining. But at least my map loads every time now.
FYI - the error code for my non-loading page is Error #2032: Stream Error
Nevermind - it's a CS4 fla - saving and reloading it in CS5 format fixed the problem.
Gidday Charles
Excuse my ignorant question... I downloaded the source files, loaded the fla file into Flash CS5, hit ctrl enter to test the movie, but nothing happens. Can you please direct me as to what I need to do to see it in action? I'm obviously misunderstanding something fundamental here.
Thanks for your time and help.
Hi Charles,
I think this is happening because the event Event.COMPLETE does not fire. I do not know exactly why, but as soon as is fire it creates a instance of window in theBrowser.
Thanks!
Dennis.
Hi Dennis.
I have a hypothesis about your problem. This example loads a html file externally for the content of the htmlLoader, in this case named theBrowser.
There is a time delay to load that html into the application and render it in the browser before you can call javascript inside of it.
The first key thing is to ensure you wait for the HandleData function to finish. The second thing that I dont recall if I included in this example is to ensure the html and DOM are initialized in the htmlLoader control. If you look at the reference http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/html/HTMLLoader.html
You may have to listen for the htmlDOMInitialize or htmlRender events as well before you are safe to interact with the javascript.
Hi Charles,
I'm just getting started with flash/flex/air programming language and I find your example a interesting alternative to Google Maps API for Flash.
Well.. I'm trying to use your example, but when AIR tries to link Javascript functions (ex: theBrowser.window.JSnewGeocodeData = JSnewGeocodeData) it says window is null and raises and exception: Cannot access a property or method of a null object reference.
Do you have any idea of what it could be?
Thanks in advance!
Dennis.
Miqua,
This solution hinges on the HTMLLoader class to show a browser within an Adobe AIR project. Check if whatever your build environment is, has access to HTMLLoader. I don't think yours does.
If your project is a web project, why not just use all Javascript? If you need to communicate with Javascript on the same page as a Flash application, you could check out ExernalInterface. Here is an example.
Hi Charles,
Thanks for sharing this good rare work.
As I don't use AIR but flashbuilder-php, do you think possible to do the same integration of maps JS API V3 ?
I looked on the Internet for an example of migration from flex maps API to JS maps API V3 without success !
Thanks in advance and Merci beaucoup for the nice Job !!!
Miqua
I have a 1 applicaton in that we can store and manages our contacts,mails etc. and i want add 1 additionl functionlly of exporting my addressbook contact to microsoft outlook mail and i want dis funtion on submition of button click is it possible thorugh coding in classic asp if there is a such a way plz let mi kw
Teckel,
If you are not running the application as AIR, there are more security restrictions. The error you describe doesnt sound like a sandbox error.
If I were you, I'd start with the html portion and see if you can manipulate the API soley using html and javascript. Then if you can get that solid, you can attempt to execute the JS calls from AIR.
My actual deployment of this final solution is operational as a full-screen AIR application in a museum kiosk.
Hi, interesting post. But i missing something.
But how you avoid the sandbox error that triggered because the html load a script on the google domain?
I try to do the same but console say : 'ReferenceError: Can't find variable: google'
Thanks Charles, I figured out that I just need to delete the part that mention the key and it runs well, very useful post.
Erika,
Glad to hear it looks useful.
Did you download the zip file from this page? The gm_JavascriptAPI_CS4.swc is being generated from the project in the directory labeled FlashCS4. It simply is providing the button to the other projects, there is no code in the swc that interacts with the Google Maps API.
Are you running the Flash Develop or Flash Builder version of the example? Maybe I can point you in the right direction if I know.
Can you provide the project where you generated gm_JavascriptAPI_CS4.swc the google api version 3 doesnt need a key and it is showing and error.
Thanks, your code looks very useful
Pretty cool. Glad to see there is still a way of using the Google Maps API in AIR applications. The mapping is so robust, it would be a shame to lose that as a resource to AIR for the many mapping applications that museums and visitor centers need.
Comments are currently disabled.