18 Replies Latest reply on Mar 30, 2009 12:47 AM by rahimhaji

    Google map in Flex or Flash

    rahimhaji Level 1
      Dear Friends,

      i need to insert google map in my flash or Flex applicaiton. what should i do? i search in net and got this link,
      http://code.google.com/apis/maps/documentation/flash/basics.html.

      i tried that too, iam getting error, pls help me to create the google map in flex or flash.. i got struct up.. pls..

      Thanks and Regards,
      Syed Adbul Rahim
        • 1. Re: Google map in Flex or Flash
          Cesare Rocchi Level 2
          which error? can you be more specific?
          flex or flash? did you set up the API key?

          HTH
          • 2. Re: Google map in Flex or Flash
            rahimhaji Level 1
            Dear Mr.casere,
            Thks for your reply. i found the following code in google site. copied and pasted in Flex 3 builder.


            <?xml version="1.0" encoding="utf-8"?>
            <!--
            Copyright 2008 Google Inc.
            Licensed under the Apache License, Version 2.0:
            http://www.apache.org/licenses/LICENSE-2.0
            -->
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*" layout="absolute" width="100%" height="100%" viewSourceURL="srcview/index.html">
            <mx:Panel title="Google Maps API for Flash Demo" width="100%" height="100%">
            <maps:Map
            id="map"
            key="ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj 4g"
            mapevent_mapready="onMapReady(event)"
            width="100%" height="100%"/>
            </mx:Panel>
            <mx:Script>
            <![CDATA[
            import com.google.maps.MapEvent;
            import com.google.maps.Map;
            import com.google.maps.overlays.Marker;
            import com.google.maps.MapType;
            import com.google.maps.LatLng;
            import com.google.maps.LatLngBounds;

            private function onMapReady(event:Event):void {
            map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);

            var bounds:LatLngBounds = map.getLatLngBounds();
            var southWest:LatLng = bounds.getSouthWest();
            var northEast:LatLng = bounds.getNorthEast();
            var lngSpan:Number = northEast.lng() - southWest.lng();
            var latSpan:Number = northEast.lat() - southWest.lat();
            for (var i:int = 0; i < 10; i++) {
            var newLat:Number = southWest.lat() + (latSpan * Math.random());
            var newLng:Number = southWest.lng() + (lngSpan * Math.random());
            var latlng:LatLng = new LatLng(newLat, newLng);
            map.addOverlay(new Marker(latlng));
            }
            }
            ]]>
            </mx:Script>
            </mx:Application>

            But it is not working it is giving set of errors; as mentioned below:

            Severity and Description Path Resource Location Creation Time Id
            1046: Type was not found or was not a compile-time constant: LatLng. maps/src maps.mxml line 28 1238067546411 1559
            1046: Type was not found or was not a compile-time constant: LatLng. maps/src maps.mxml line 29 1238067546411 1560
            1046: Type was not found or was not a compile-time constant: LatLng. maps/src maps.mxml line 35 1238067546411 1563
            1046: Type was not found or was not a compile-time constant: LatLngBounds. maps/src maps.mxml line 27 1238067546411 1558
            1046: Type was not found or was not a compile-time constant: Map. map1/src map1.mxml line 5 1238067660662 1566
            1046: Type was not found or was not a compile-time constant: Map. maps/src maps.mxml line 10 1238067546411 1557
            1046: Type was not found or was not a compile-time constant: MapOptions. map1/src map1.mxml line 16 1238067660662 1567
            1120: Access of undefined property MapType. map1/src map1.mxml line 19 1238067660662 1570
            1120: Access of undefined property MapType. maps/src maps.mxml line 25 1238067546411 1562
            1180: Call to a possibly undefined method LatLng. map1/src map1.mxml line 18 1238067660662 1569
            1180: Call to a possibly undefined method LatLng. maps/src maps.mxml line 25 1238067546411 1561
            1180: Call to a possibly undefined method LatLng. maps/src maps.mxml line 35 1238067546411 1564
            1180: Call to a possibly undefined method MapOptions. map1/src map1.mxml line 16 1238067660662 1568
            1180: Call to a possibly undefined method Marker. maps/src maps.mxml line 36 1238067546411 1565

            pls tell me how can i set the API key? i did not do any.

            i have to tell my management whether it is possible to make the google map in flex or flash? is it possible in flash?

            pls help me.. i am in urgent situation.

            thanks and regards,
            Syed Abdul Rahim
            • 3. Re: Google map in Flex or Flash
              Richard_Abbott Level 3
              Syed Abdul Rahim,
              the API key is one you get from Google when you register as a developer with them. I went through that process a while ago but other things intruded and I never got around to following it through. Unless you have got that key (the one that starts ABQI in your code) yourself, then my guess is that the sample code contains a dummy key that does not in fact function at runtime.
              Richard
              • 4. Re: Google map in Flex or Flash
                rahimhaji Level 1
                Dear Mr.Richard,

                Thks for ur info. Now i have registared for my site and got my own key from google. but still it shows the same error..

                pls help me..

                Thanks and Regards,
                Syed Abdul Rahim
                • 5. Re: Google map in Flex or Flash
                  _Natasha_ Level 4
                  You need to download an sdk for google maps. HERE
                  And add this library to your project (put it to lib folder).

                  At Google site it's written a special resume "How to start?". I think it's usefull.
                  • 6. Re: Google map in Flex or Flash
                    rahimhaji Level 1
                    Dear Natasha,

                    Thanks a lot, it works, but it shows the error "Initialization failed: please specify an application URL". where can i add this appplication url.

                    pls help me..

                    thanks and regards,
                    Syed Abdul Rahim
                    • 7. Re: Google map in Flex or Flash
                      _Natasha_ Level 4
                      Do you create AIR Application project or Web application? (type of the Flex project)

                      Also check if you add only map_flex_1_9.swc to project.
                      • 8. Re: Google map in Flex or Flash
                        rahimhaji Level 1
                        Dear natasha,

                        i am creating air applicaiton. as u said, i put only map_flex_1_9 only in the lib folder. but still same status. i can run the project, once the window screen comes it gives the error message on the screen,

                        Initialization failed: please specify an application URL

                        pls tell me, if i want to create google map in use in my site (html or php).

                        Thanks and Regards,

                        Syed Abdul Rahim
                        • 9. Re: Google map in Flex or Flash
                          _Natasha_ Level 4
                          There are some differences if you create AIR Application. And there is a special part on google maps site.

                          For AIR Application Map must have attribute url and it must be the some as that your registered when signing up for an API key.
                          If you create key for site www.my-perfect-site.com you shold write
                          <maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
                          url=" http://www.my-perfect-site.com" key="your_api_key"/>

                          • 10. Re: Google map in Flex or Flash
                            rahimhaji Level 1
                            Dear Nathasha,

                            Thaks a lot. it is working fine. i have created stand alone air applicaiotn and it is working fine now. Thks for ur guidence.

                            Pls tell me, i need to put this same google map in my website (using html or swr). my website is created by php and html. hw can i use flex or flash to put the google map in. pls tell me how to make swf and call in html. Thaks for ur kind help...

                            thks and regars,
                            Syed Abdul Rahim
                            • 11. Re: Google map in Flex or Flash
                              _Natasha_ Level 4
                              For your site you need swf file. For creating you should create "Web application" project in FB with the same source, as your AIR Application except uri attribute for Map.

                              Also project create a html file for site (in bin folder), so you can use it as example to embed this swf to your site.
                              • 12. Re: Google map in Flex or Flash
                                rahimhaji Level 1
                                Dear Natasha,

                                Thks a lot. as web application also works fine. i will try to embed the swf in bin to a html file. thks a lot.

                                pls tell me one more thing, in this map zoom and unzoom button is not coming. when i click on map it is getting zoom. i dont know how to unzoom it. same time if we have zoom button it is easy to handle. pls tell me how to insert that zoom unzoom an dmoce arrow buttons?

                                Thaks and Regards,
                                Syed Abdul Rahim
                                • 13. Re: Google map in Flex or Flash
                                  _Natasha_ Level 4
                                  You can add all controls as you can see on Google map.

                                  // zoom control
                                  import com.google.maps.controls.ZoomControl;
                                  private function onMapReady(event:Event):void {
                                  ...
                                  map.addControl(new ZoomControl());
                                  }

                                  The same code may be for ScaleControl, OverviewMapControl, MapTypeControl, PositionControl.
                                  • 14. Re: Google map in Flex or Flash
                                    rahimhaji Level 1
                                    Dear Natasha,

                                    Thks for ur code ya. i entered the same code to create zoom option, as follows: But i did not get any zoom control on the screen. pls note that the following code is for AIR applicaion. i done the same for webpage by removing the url attribute.

                                    <?xml version="1.0" encoding="utf-8"?>
                                    <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

                                    <maps:Map xmlns:maps="com.google.maps.*" mapevent_mappreinitialize="onMapPreinitialize(event)" mapevent_mapready="onMapPreinitialize(event)"
                                    id="map" width="100%" height="100%" key="my pwd" url="my site name here>
                                    <mx:Script>
                                    <![CDATA[
                                    import com.google.maps.controls.ZoomControlOptions;

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

                                    // zoom control
                                    import com.google.maps.controls.ZoomControl;
                                    private function onMapReady(event:Event):void {
                                    map.addControl(new ZoomControl());
                                    }

                                    private function onMapPreinitialize(event:Event):void {
                                    var myMapOptions:MapOptions = new MapOptions();
                                    myMapOptions.zoom = 14;
                                    myMapOptions.center = new LatLng(40.736072,-73.992062);
                                    myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;
                                    this.map.setInitOptions(myMapOptions);
                                    }

                                    ]]>
                                    </mx:Script>

                                    </mx:WindowedApplication>

                                    pls help me. how to bring the zoom control and other controls on the screen?

                                    Thanks and Regards,
                                    Syed Adbul Rahim
                                    • 15. Re: Google map in Flex or Flash
                                      _Natasha_ Level 4
                                      All is correct except event handler for mapReady.
                                      mapevent_mapready="onMapReady(event)"
                                      • 16. Re: Google map in Flex or Flash
                                        rahimhaji Level 1
                                        Dear Natasha,

                                        Thanks a lot, it works fine! i can insert all these controls. Thanks a lot.

                                        is there any option to show the labels. when i click on my overlay button. i mean, if i click on the baloon, i has to show a label with details like place name or other details.

                                        pls help me ya.

                                        Thanks and Regards,
                                        Syed Adbul Rahim
                                        • 17. Re: Google map in Flex or Flash
                                          _Natasha_ Level 4
                                          There are many examples for this on Google site

                                          Procedure of finding places by geolocations is called Geocoding. Example here

                                          Also you can put point on map without info - Markers. There are many examples at the first page I mentioned.
                                          • 18. Re: Google map in Flex or Flash
                                            rahimhaji Level 1
                                            Dear Natasha,

                                            Thanks a lots, it is working fine. Thnks for ur guidance and all examples.. keep in touch,

                                            Regards,
                                            Syed Abdul Rahim