Google Maps API for Flex

As I pointed out before, it’s unfortunately not possible to use Flex components as info windows for Google Maps.
Another issue is that the map is not available as a Flex component itself, therefore it’s a bit complicated to use it in Flex.
So I thought to address these issues in a little Google Maps API for Flex that you can download here under BSD license.
With openFlexInfoWindows I also added a method that allows you to use multiple Flex components as info window at once – nicely seperated in tabs.
Find an example below:

Start Flash!
Source Code

  • Elias Monteiro

    Hi
    thanks for is one thing that was really missing in google maps
    i’ll try it and then i’ll give feedback

  • Juan

    Hi,

    I tried to add the API but I get errors using the flex.map classes. Any idea?

  • Marcus Schiesser

    What kind of errors are you getting?

  • mesdocs

    Hi,

    I tried to add a click event handler on the image component but i got an error at build time.

    Any idea ?

  • Brian Read

    Hi Marcus,

    This is great – thanks. A question: how can I populate the address component labels dynamically? I have an ArrayCollection of address information that is downloaded from a MySQL database via a PHP backend. I know the download is working – it populates a DataGrid without issue. I thought for the address Component I’d simply change the Label text field to get the data from the array via a loop. However, the label ID isn’t visible from the code – I get “Error: Access of undefined property SiteAddr” (SiteAddr being the id of the Label). Any suggestions? Thanks!

  • Javier

    Hallo,wie ghets?
    I’m working around this. I’m trying to put a panel with a text, a list of images and some videos, given the posibility to click and maximize any images and reproduce the videos by clicking. Have you made any similiar? Not ony one embeded photo, but with a photo list and events….
    Do you know where i can find some examples or demos to do this? The only that i have founded is the InfoWindowTabbedComponent example at GoogleGroups….
    I’m stucked.
    thanks.

  • Hey Marcus,

    Great component… an absolute necessity to complete the interactive map experience.

    I had a bit of trouble using your code with a tab navigator. The custom pop-ups stay visible even after you navigate away from the map.

    I tried to use the MapMouseEvent to determine when the mouse had left the screen. Unfortunately the google version does not have a relatedObject… therefore I could not determine if the mouse was still on the map or not.

    Finally, I attached an additional MOUSE_MOVE listener on ROLL_OUT and finally had a bit of success.

    Now when you roll off of the map it automatically closes. It’s a bit of a kludge, but might be helpful to someone else out there. Perhaps if you get some time you can figure out a way to make it work a bit more cohesively with your existing tool set.

    Here is some example code (please note: I am using the variable name mapContainer instead of flexMap):

    private function onMapReady(event:Event):void
    {
    //place markers, render overlays
    this.initMapControls();
    model.projectDomainManager.list.addEventListener(DomainManager.LIST_CHANGE, listChangeHandler);

    //listen for the roll out event
    mapContainer.map.addEventListener(MapMouseEvent.ROLL_OUT,
    function(event:MapMouseEvent):void {
    if(mapContainer.map.popUpIsOpen())
    {
    //need to attach a seperate listener because google’s MapMouseEvent does not have a relatedObject attached
    // therefore we cannot tell if we pointing at the popup or some irrelevant component
    Application.application.addEventListener(MouseEvent.MOUSE_MOVE, tempCloseListener);
    }
    }
    );
    }

    private function tempCloseListener(event:MouseEvent):void
    {
    if(event.type == MouseEvent.MOUSE_MOVE)
    {
    var dispObj:DisplayObject = event.target as DisplayObject;

    //determine if this is still a part of the map
    if(!containedBy(dispObj, mapContainer))
    {
    //close the window, we have rolled off of the map
    mapContainer.map.closeFlexInfoWindow();
    //remove the close listener, it was temporary anyway
    Application.application.removeEventListener(MouseEvent.MOUSE_MOVE, tempCloseListener);
    }
    }
    }

    public static function containedBy(descendant:DisplayObject, ancestor:DisplayObject):Boolean
    {
    if(descendant.parent == null)
    {
    return false;
    }
    else if(descendant == ancestor)
    {
    return true;
    }
    else
    {
    return containedBy(descendant.parent, ancestor);
    }
    }

  • Dev

    Hi Marcus,

    This is really great, thanks.
    I have a question: How can I populate multiple markers on the map?
    Any suggestions? Thanks!

  • A work well done Marcus!
    You should really make a tut. of this. I am trying to build an application that uses theese flex-components through PHP and loops to populate a map with twitter feeds. It’s not going very well. But thanks anyway!