Unable to display Google Map through API in Flex SDK

Question

Hello,

I am using the mxmlc to compile the examples from google to get started in using Google Maps API in Flex 4. But after compiling the swf file the map does not load.

I've registered for an API key Downloaded and included the Maps SDK in the xml config file used at compile time C:\sdk\flex4\frameworks\flex-config.xml

<external-library-path>
    <path-element>libs/google/maps/lib/map_flex_1_18.swc</path-element>
</external-library-path>

Foo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" 
  width="100%" height="100%" key="{KEY}"/>
<mx:Script>
    <![CDATA[

    import com.google.maps.LatLng;
    import com.google.maps.Map;
    import com.google.maps.MapEvent;
    import com.google.maps.MapType;

    private function onMapReady(event:Event):void {
      this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
    }
    ]]>
</mx:Script>
</mx:Application>

Any tips on where to go from here? I can compile a basic flex project without problem and displays the components I put in so i'd imagine it's something to do with the API Key?

Thanks for the help

Answer 1

If your onMapReady function is getting called your api key is probably ok (you would get an error otherwise)

I had the exact same problem. But adding the following to the onMapReady() function seemed to fix it:

private function onMapReady(event:Event):void 
            {
                map.enableScrollWheelZoom();
                map.enableContinuousZoom();
                map.addControl(new ZoomControl());
                this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
            }

You should also consider using the latest version of the library it is now on version 20 Unfortunately, google does not yet "officially" support Flex 4 so I imagine there might be other bugs out there as well.

Note if you happen to be using https you also need to add a call to Security.allowInsecureDomain("maps.googleapis.com");