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

    Customized Google Map

    Kumidan Level 1

      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);
      this.addChild(map);

      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));
           map.addOverlay(m);
      }

       

      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

            m.addEventListener(...)

             

            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();
                          imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,
                              function(event:Event):void {
                                  var options:InfoWindowOptions = new
                                      InfoWindowOptions({
                                          customContent: imageLoader,
                                          pointOffset: new Point(0,-30),
                                          drawDefaultFrame:true
                                      });
                                  map.openInfoWindow(e.latLng,options);
                              }
                          );
                          imageLoader.load(request);

                       

                      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.