Home >
This post is for anyone who has found themselves in the situation where they have an existing Flash component that they can't embed in their Flash/Flex application, although they still want/need to use them together.
In this example, we'll create a Flex application that uses the Google Maps API for Flash, which communicates with the Google Street View API to create a seamless experience.
The Google Street View components are available directly in the Google Maps javascript API, however they are not directly available through the Flash API. Even though they aren't available directly in the Flash API, that doesn't mean that you can't use them together. Through ExternalInterface, you can still make those the two work together seamlessly.
Take a look at this example. Any time you click on the Flash-based map, the street view below it will update to show the location that you clicked on. Go ahead and try it out... If you click on an area that doesn't support street view, then you'll get a message stating that the panorama is not available.
Now, let's take a look at how it all works together. I started with some simple examples from the Google Maps API examples page.
The Flex application is pretty simple. There's just a map instance. When the map loads, the map navigation controls are added, and the map is centered on the lat/lon coordinate (38.900218,-77.036562), which is directly in front of the white house in Washington, DC, and a marker is added at that position.
Whenever a MapMouseEvent.Click event happens on the mouse (the user clicks on the map), the marker moves to the click position, and the street view panorama is updated to show that click location.
Below, you'll find the additions to the HTML page that contains the Flex application instance. You can see that when the page initializes, then the street view panorama is created and is centered to display the white house.
The Flex application communicates with the street view panorama through the ExternalInterface class, which allows us to invoke a javascript method.
This calls into the setPanorama javascript function shown below, which calls into the panoClient.getNearestPanorama() function. The callback of this method is the showPanoData() function. If panorama data is available for the current location, then the panorama gets updated. If not, then a message is displayed in the error log.
Hopefully this post shows you how you can make separate components work together in your own applications.
Related Links:
Launch Demo:
http://www.tricedesigns.com/portfolio/googlestreetview/main.html
Source Code:
http://www.tricedesigns.com/portfolio/googlestreetview/srcview/index.html
Google Maps Flash API:
http://code.google.com/apis/maps/documentation/flash/
Google Street View API:
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay
Google Maps JavaScript API:
http://code.google.com/apis/maps/
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
In this example, we'll create a Flex application that uses the Google Maps API for Flash, which communicates with the Google Street View API to create a seamless experience.
The Google Street View components are available directly in the Google Maps javascript API, however they are not directly available through the Flash API. Even though they aren't available directly in the Flash API, that doesn't mean that you can't use them together. Through ExternalInterface, you can still make those the two work together seamlessly.
Take a look at this example. Any time you click on the Flash-based map, the street view below it will update to show the location that you clicked on. Go ahead and try it out... If you click on an area that doesn't support street view, then you'll get a message stating that the panorama is not available.
Now, let's take a look at how it all works together. I started with some simple examples from the Google Maps API examples page.
The Flex application is pretty simple. There's just a map instance. When the map loads, the map navigation controls are added, and the map is centered on the lat/lon coordinate (38.900218,-77.036562), which is directly in front of the white house in Washington, DC, and a marker is added at that position.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
paddingBottom="0"
paddingLeft="0"
paddingRight="0"
paddingTop="0"
verticalGap="0"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import com.google.maps.overlays.Marker;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
private var marker : Marker;
private function onMapReady(event:Event):void
{
var centerLL : LatLng = new LatLng(38.900218,-77.036562);
map.setCenter( centerLL, 18, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
map.addEventListener(MapMouseEvent.CLICK, onMapClick);
marker = new Marker( centerLL );
map.addOverlay( marker );
}
private function onMapClick(event:MapMouseEvent):void
{
marker.setLatLng( event.latLng );
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
}
]]>
</mx:Script>
<maps:Map
xmlns:maps="com.google.maps.*"
id="map"
mapevent_mapready="onMapReady(event)"
width="100%" height="100%"
key="api_key_here"
/>
<mx:ApplicationControlBar width="100%" cornerRadius="0">
<mx:Text
x="5" y="4" width="100%" height="100%"
text="Click anywhere on the map to update the street view."
selectable="false" fontWeight="bold" fontSize="12"/>
</mx:ApplicationControlBar>
</mx:Application>
Below, you'll find the additions to the HTML page that contains the Flex application instance. You can see that when the page initializes, then the street view panorama is created and is centered to display the white house.
<script src="http://maps.google.com/maps?file=api&v=2.x&key=api_key_here" type="text/javascript"></script>
<script type="text/javascript">
var myPano;
var panoClient;
var nextPanoId;
function initialize()
{
var whiteHouse = new GLatLng(38.900218,-77.036562);
var whiteHousePOV = {yaw:180,pitch:0};
panoClient = new GStreetviewClient();
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(whiteHouse, whiteHousePOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(whiteHouse, showPanoData);
}
function showPanoData(panoData)
{
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
myPano.setLocationAndPOV(panoData.location.latlng);
}
function handleNoFlash(errorCode)
{
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
function setPanorama( lat, lon )
{
panoClient.getNearestPanorama(new GLatLng(lat, lon), showPanoData);
}
</script>
<!--
And the flex application embed statements would go here
-->
<div id="pano" style="width:100%;height:100%" ></div>
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
This calls into the setPanorama javascript function shown below, which calls into the panoClient.getNearestPanorama() function. The callback of this method is the showPanoData() function. If panorama data is available for the current location, then the panorama gets updated. If not, then a message is displayed in the error log.
Hopefully this post shows you how you can make separate components work together in your own applications.
Related Links:
Launch Demo:
http://www.tricedesigns.com/portfolio/googlestreetview/main.html
Source Code:
http://www.tricedesigns.com/portfolio/googlestreetview/srcview/index.html
Google Maps Flash API:
http://code.google.com/apis/maps/documentation/flash/
Google Street View API:
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay
Google Maps JavaScript API:
http://code.google.com/apis/maps/
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
This is excellent information. Also useful would be to embed StreetView within the Flex app using ExternalInterface, like displaying it in a TitleWindow. Is this possible, or do we have to continue waiting for the Flash API to support StreetView?
Thanks!
It has to be in a separate HTML container. You can't embed it directly within a Flash/Flex application yet. You can layer it using the html iframe trick, but that has layering/wmode issues on different platforms and browsers... This isn't a shortcoming of the API, but rather how some browser implementations render layered plugin-based content.
Hi Andrew,
thanks much for the demo! ...
I was bugging Pamela Fox for just this on the google-groups (http://groups.google.com/group/google-maps-api-for-flash) for just this demo.
Note that I'm doing some work with SAP (yes, that large clunky
German Enterprise Resource Planning software package) and have somewhat succesfully integrated Maps & Google StreetView with SAP CRM (ref my youtube:
http://www.youtube.com/watch?v=VzfpdlrNw3Q)
...using Google Maps is an alternative to using the ESRI implementation where I work...and note: Municipal infrastructure support entities, cities, counties, etc across the world have a keen interest in Street View...pot hole locations, street signs & lights, man hole covers, location of dead-animals, etc, etc can be previewed from Street View without first rolling a truck and crew to simply asses the situation...I've first saw Street View being used in Mineapolis MN at their 311 call center.
Awesome post!
However, I keep getting a 1046 error on the "onMapClick" function line:
"1046: Type was not found or was not a compile-time constant: MapMouseEvent."
Any idea on how to work around this issue?
Thx,
IB*
Make sure you have the map_flex_1_8a.swc (or newer) file in your project compile path. It should either be in the "libs" folder, or set in the project properties (if you are in flex builder). This error only happens if the compiler can't find the source/swc.
Hi Andrew-
You mentioned that the Streetview had to be in a separate html container. Is it possible to have the specific streetview scene appear in a separate browser window originating from a Flash action? Any hints on doing this within the context of the external interface calls would be appreciated.
cheers
Hi Andrew, I have built a stand-alone diagramming tool(with basic functions like drawing lines, circles, placing objects, etc). I want to have google map as the background for the tool. Is it possible that I can integrate my swf of diagramming tool google maps using flex ? Any pointers to relevant material is greatly appreciated !
Thanks.
Using maven to install swc library. I cant find a place for downloading with maven this library. Do you know anything about it?
I am working with google map api v3. I am trying to find document that show me how to hook up with GStreetviewPanorama of map api 3.
Do you know where I can get this documentation?
Hi Andrew,
This is a great tutorial. I followed your example and have the Street View displaying in my Flex project.
Unfortunately, the Street View is always visible because it is in a DIV in the HTML wrapper. However, my map is visible only after the user clicks a button. I'm not experienced with Javascript at all. Is there a way of dynamically creating and removing the div in the HTML wrapper? What's the best way to make the Street View visible only when my map is visible? My map is only visible when it's selected from the ViewStack.
If you can point me in the right direction, I'd really appreciate it. Any suggestions would be great.
Again, thank you for your excellent work.
Thank you!
-Chris