7 Replies Latest reply on Nov 9, 2010 10:25 AM by Kumidan

    Customized Google Map


      To show a Google Map on an swf movie I use this code:


      var map:Map = new Map();
      map.key = "key";
      map.sensor = "false";
      map.setSize(new Point(350, 320));
      map.x = 380;
      map.y = 175;

      map.addEventListener(MapEvent.MAP_READY, onMapReady);

      function onMapReady(event:Event):void {
           map.addControl(new ZoomControl());
           map.addControl(new MapTypeControl());
           map.setCenter(new LatLng(41.893932,12.488177), 15, MapType.NORMAL_MAP_TYPE);
           var m:Marker = new Marker(new LatLng(41.893932,12.488177));


      Now I want that passing the mouse pointer on the marker a baloon with some informations pops up.

      How can I do that? I know I have to add and event listener like


      map.addEventListener(MapMouseEvent.ROLL_OVER, showBaloon);


      but I don't know what to write inside the function.

        • 1. Re: Customized Google Map
          kglad Adobe Community Professional & MVP

          add an event listener to your marker, m.

          1 person found this helpful
          • 2. Re: Customized Google Map
            Kumidan Level 1

            Yes, you're right, I wanted to write



            the problem is that reading the API documentation I do not understand which is the function which makes the baloon appear.

            • 3. Re: Customized Google Map
              kglad Adobe Community Professional & MVP

              doesn't info appear by default?

              • 4. Re: Customized Google Map
                Kumidan Level 1

                No, nothing pops up, even if I click on the marker.

                • 5. Re: Customized Google Map
                  kglad Adobe Community Professional & MVP

                  here's what i used in a project to create a custom tooltip:


                  var gmIcon:GMicon = new GMicon();  // GMicon() is the class of a teardrop icon movieclip
                      var markerA:Marker = new Marker(
                        new LatLng(41.912896,-87.662654),
                        new MarkerOptions({icon:gmIcon,tooltip:"Northworks"})  // this line assigns the custom icon and custom tooltip
                      map.addOverlay(markerA);  // this applied the marker to the map



                  you could make markerA's alpha 0 until rolled over.

                  1 person found this helpful
                  • 6. Re: Customized Google Map
                    Kumidan Level 1

                    I've found that what I needed was openInfoWindow().

                    I've asociated it to a listener on the marker and correctly pops up.

                    I can write text in it and I can style as I want, the only thing I can't do is to show an image inside it.


                    I've tried to use the contentHTML property in this way:


                    contentHTML: "<img src='images/img.jpg' alt='image' />"


                    but I've had no luck, both trying without quotes or changing single quotes with double quotes.


                    Any idea on how to show an image?

                    • 7. Re: Customized Google Map
                      Kumidan Level 1

                      I've tried this code


                      var request:URLRequest = new URLRequest("images/img.jpg");
                          var imageLoader:Loader = new Loader();
                              function(event:Event):void {
                                  var options:InfoWindowOptions = new
                                          customContent: imageLoader,
                                          pointOffset: new Point(0,-30),


                      It makes appear the image, but I don't know how to add elements to "customContent" in addition to the image, actually I don't either know if it is possible.