How To: Create your own Custom InfoWindow with Google Maps API and Flex

I’ve finally cracked this after weeks of searching for answers. I read an example  from google maps API which used the tabbed infowindow and I realised I could use the same concept of creating the custom infowindow in 100% actionscript and extend the UIComponent class which is compatible with the google info window. Find my code below:-

package custom
{
import mx.containers.Canvas;
import mx.controls.Image;
import mx.controls.Label;
import mx.controls.TextArea;
import mx.core.UIComponent;

public class MyCustomInfoWindow extends UIComponent {

    public function MyCustomInfoWindow(title:String, picture:String, description:String) {

         addChild(createInfoWindow(title, picture, description));
         cacheAsBitmap = true;

    }

    public function createInfoWindow(title:String, picture:String, description:String):Canvas {

         //Set up a canvas to fit inside the infowindow
         var can:Canvas = new Canvas();
         can.width = 300;
         can.height = 210;

         //Set up a label for the heading of the marker's infowindow
         var heading:Label = new Label();
         heading.height = 15;
         heading.x = 5;
         heading.y = 10;
         heading.width = 280;
         heading.text = title;

         //Set up a text area for the description of the marker's infowindow
         var desc:TextArea = new TextArea();
         desc.editable = false;
         desc.selectable = false;
         desc.x = 5;
         desc.y = 125;
         desc.width = 280;
         desc.height = 80;
         desc.htmlText = description;
         desc.setStyle("borderStyle", "none");

         //Set up an image component for the image of the marker
         var image:Image = new Image();
         image.width = 150;
         image.height = 120;
         image.x = 5;
         image.y = 30;
         image.visible = true;
         image.source = picture;

         //Add all of the components to the canvas 
         can.addChild(heading);
         can.addChild(image);
         can.addChild(desc);

         return can;
    }

}

}

Once this is created to however you need it, you can call it when creating the infowindow for the marker like this:-

customContent: new MyCustomInfoWindow([enter title],[image source],[description])

Of course, I’m updating these dynamically but thats another big bit of code!

This is the finished article, which looks basic just now, but I’ll hopefully make it look better and give it more functionality in the next few weeks

My Custom InfoWindow

Please let me know if this helped at all.

Thanks

10 thoughts on “How To: Create your own Custom InfoWindow with Google Maps API and Flex

  1. I need help. Do u know how to create tabs for Infowindows in Flash GMaps api (not Flex). The other thing is how did you get the coordinates of the clicked marker for directions? How do you know a specific marker is clicked? Also can you please tell me the format of your xml file. Please reply

  2. Hi,

    Thanks for visiting,

    I’m afraid I don’t actually know how tha Flash programming works but to do tabbed infowindows there is a great example of this here
    http://gmaps-samples-flash.googlecode.com/svn/trunk/demos/TabNavigatorInfoWindow/TabNavigatorInfoWindow.html#

    You can also view the source to that example if you right click and view source.

    For driving directions I’m pretty sure each marker can access its own LatLng value which can then be used to navigate to when using the driving direections. So whatever your marker.LatLng value will help you there.

    What XML file are you relating to? When I access my database of markers, I do this using PHP files and a HTTP service in Flex. The PHP file then builds a reply in XML format where I can then read in marker values. There is no external XML file.

    Hope that helps,

    If something is not clear there, please let me know.

    Cheers

  3. Hey, I tried using the LatLng thing but the problem is I am using a for loop to create markers. If you don’t mind, can you share your full code. I need to know exactly what I’m doing wrong. I will not try to copy anything. I will just learn and also let u know what I learnt. I hope you are ok with sharing the code. I need code for creating markers and infowindows & then the directions thing.

    Thanks!

  4. @Avinash Sonee
    Here is the link to my SVN sharing all my code, I hope you learn from it. I spent roughly 3-4 months creating this and learning a lot along the way.

    http://www.rsmacfarlane.com/4th-year-project/full-source-code-of-my-google-maps-project

    Again, if you don’t understand my methods I can explain. I know it may look confusing as its not exactly efficient. Thats one reason I wouldn’t copy it lol. I don’t have time to refine it.

    What is the nature of your project? Personal or commercial?

    Cheers

  5. Hi,

    Your tutorial is great,I am stuck in a a problem from many days and really need your help.
    I wanted to display the the information from the database in the info window.Your tutorial is related to my problem but I haven’t used flex before.Please tell me any way that I can display information without using flex please.
    Please help me.It would be very nice of you

  6. Thanks for a great post! I was looking for this for weeks!
    I have a learning project where i want to display data on a Mobile map via ColdFusion call. It all works fine, markers are displayed well on proper places. When i am trying to write a MapMarkerClick handler:
    m.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
    var locationPicture:String=event.currentTarget.picture;
    var request:URLRequest = new URLRequest(“http://www.imchi.info/testimages/”+event.currentTarget.picture);
    var imageLoader:Loader = new Loader();
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void {
    var width:Number = 200;
    var height:Number = 200;
    var options2:InfoWindowOptions = new InfoWindowOptions({
    customContent: imageLoader});
    m.openInfoWindow(options2); });
    imageLoader.load(request); });

    Somehow it does not work when it comes to load event.currentTarget.picture it does not work. When i replace it with real picture name, like “test.jpg” it works fine.
    No clue how to made this work.
    Now back to your approach, when you’re making custom class to display data in InfoWindow, can you pass a data to it and how?
    Really need your help.
    Thanks in advance

Leave a Reply