Hi everyone, and thanks for your help with my questions (especially Rosco!)
Now I'm trying to create a tabbed infowindow to support my map. Here's what the map looks like without the tabs, but you can get a sense of the data I'm trying to display. I have alot of footnote data that I'd like to add in another tab: Without tabs: http://www.tomrauch.com/weather/mxml/africa/africa_cold.html Here's what I'd like the map to look like with tabs, but (of course) there's no data in the tabs (see InfoWindowTabbedComponet.as below -- which I shamelessly hacked from one of the demos). http://www.tomrauch.com/weather/mxml/africa/africa_cold.html My question is: How do I get the data I'm reading from my database through PHP and formatted in XML to appear in those two tabs? The first tab should be the basic data that appears in the first map (the one without tabs), the second tab will be the footnote information. But how to read the xml into the tabs themselves? Again many thanks! Tom ***************************************************************************************************************** InfoWindowTabbedComponent.as (below) ***************************************************************************************************************** // ActionScript file /* * Copyright 2008 Google Inc. * Licensed under the Apache License, Version 2.0: * http://www.apache.org/licenses/LICENSE-2.0 */ package { import flash.text.TextField; import mx.containers.TabNavigator; import mx.containers.VBox; import mx.core.UIComponent; import mx.controls.TextArea; /** * InfoWindowSprite consists of several ellipses arranged in a 'thought bubble' * manner, the largest of which contains an embedded image and a circular * close button. * It can dispatch an Event instance (type: "close"), which the user can listen * for and use to call map.closeInfoWindow(); */ public class InfoWindowTabbedComponent extends UIComponent { public function InfoWindowTabbedComponent() { // Add body text var tabNavigator:TabNavigator = new TabNavigator(); tabNavigator.width = 290; tabNavigator.height = 150; tabNavigator.addChild(createTab("Data", " ")); tabNavigator.addChild(createTab("Footnotes", " ")); addChild(tabNavigator); addChild(createTab("catorce", "whee")); cacheAsBitmap = true; } public function createTab(label:String, text:String):VBox { var tab:VBox = new VBox(); tab.label = label; var inside:TextArea = new TextArea(); inside.editable = true; inside.selectable = true; inside.width = 280; inside.height = 100; inside.htmlText = text; inside.setStyle("borderStyle", "none"); tab.addChild(inside); return tab; } } } ***************************************************************************************************************** Source Code for Map with tabs but no data: ***************************************************************************************************************** <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" xmlns:maps="com.google.maps.*" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ // import all the google.com objects import com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker; import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.ZoomControl; import com.google.maps.MapType; import com.google.maps.LatLng; import com.google.maps.MapEvent; import com.google.maps.MapMouseEvent; import com.google.maps.MapMoveEvent; import com.google.maps.InfoWindowOptions; import com.google.maps.MapType; import com.google.maps.Map; import mx.core.UIComponent; import mx.containers.TabNavigator; import InfoWindowTabSprite; import InfoWindowTabbedComponent; //private var gMap:Map; //create the marker icon //[Embed(source="marker_h.png")] //private var rec_hi_icon:Class; [Embed(source="below_zero.png")] private var BelowZeroIcon:Class; [Embed(source="zero_freezing.png")] private var ZeroFreezingIcon:Class; [Embed(source="freezing_40.png")] private var Freezing_40Icon:Class; [Embed(source="F40_50.png")] private var F40_50Icon:Class; [Embed(source="F50_60.png")] private var F50_60Icon:Class; private var customIcons:Object = { "below_zero": BelowZeroIcon, "zero_freezing": ZeroFreezingIcon, "freezing_40": Freezing_40Icon, "F40_50": F40_50Icon, "F50_60": F50_60Icon }; // this is what initializes the map, I have it centered on Lobake National Park in Cameroon //with a zoom set to "5" private function onReady(e:MapEvent):void { map.setCenter(new LatLng(7.36529, 12.34344), 3, MapType.PHYSICAL_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new MapTypeControl()); service.send(); } //the heart of the program! This iterates over an array from the php file declared //below. the var:html is what dictates what and how data will appear in the infoWindow; private function onResult(e:ResultEvent):void { var list:ArrayCollection = e.result.markers.marker; for(var i:int=0; i<list.length; i++) { var place_name:String; var date:String; var cold_temp_f: String; var cold_temp_c: String; var country: String; var type_marker: String; //var footnote_1:String; var html: String = "<b>" + list[i].place_name +","+"</b> " + "<b>" + list[i].country + "</b>" + "<br/>" + "" + "</br>" + "<br/>" + "Date: " + list[i].date + "</b>" + "<br/>" + "Low Temperature (Farenheit): " + "<b>" + list[i].cold_temp_f + "</b>" + "<br/>" + "Low Temperature (Celcius): " + "<b>" + list[i].cold_temp_c + "</b>"; //var bm:Bitmap = new rec_hi_icon() as Bitmap; //this creates and places the individual markers on the map, with the icon var m2:Marker = new Marker(new LatLng(list[i].lat, list[i].lon), new MarkerOptions({label: "1"})); var options2: InfoWindowOptions = new InfoWindowOptions({customContent: new InfoWindowTabbedComponent(), customOffset: new Point(0,10), width: 300, height: 160, drawDefaultFrame: true}); createMarker(m2, options2); } } //adds the eventlistener, when the MapMouse is clicked, it fires the InfoWindow private function createMarker(m2:Marker, options2:InfoWindowOptions):void { m2.addEventListener(MapMouseEvent.CLICK, function(e:Event):void { m2.openInfoWindow(options2); }); //adds the Marker to the map map.addOverlay(m2); } ]]> </mx:Script> <mx:HTTPService id="service" url="africa_cold3_ss.php" result="onResult(event)"/> <maps:Map width="100%" height="100%" id="map" mapevent_mapready="onReady(event)" key="ABQIAAAA3TTmXSqGElH2k06f9YNe8RTrEe9mbb7aLC6uxQE4XuOPyEIVTRTORXkVn-4fyK- r7wnsh1OSlrUUHw"/> </mx:Application> -- You received this message because you are subscribed to the Google Groups "Google Maps API For Flash" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-api-for-flash?hl=en.
