You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by bilbosax <wa...@comcast.net> on 2016/07/25 20:50:01 UTC

Loading Google Maps into HTMLLoader is very slow the first time

I have a datagrid that has a clickable column.  When an item in the column is
clicked, a popupwindow is executed that instantiates an HTMLloader to
display a google map.  I also have javascript functions that add a couple of
markers to the map if called within my AIR app.  The first time that the
popupwindow opens, it takes like 20-40 seconds for a map to show up.  If I
close the popupwindow and click another link, it pulls the map up almost
immediately and continues to do so for each popupwindow opened thereafter. 
The question is, what is the hangup with the first map load?  Here is a look
at my HTMLloader and the HTML/Javascript that I use:

protected function initializeHandler(event:FlexEvent):void
			{
				
				/* ******* Filter Array Collection to only Display Desired Content
******* */
				
				dataArrayCollection.filterFunction = null;
				dataArrayCollection.refresh();
				dataArrayCollection.filterFunction = recordFilter;
				dataArrayCollection.refresh(); 
				
				/* **************** Create and Load a Google Map **************** */
				
				var file:File =
File.applicationDirectory.resolvePath("googleCode/TheKeyMaps.html");
				var urlReq:URLRequest = new URLRequest(file.nativePath); 
				mapLoader = new HTMLLoader();
				mapLoader.addEventListener(Event.COMPLETE, allReady);
				mapLoader.placeLoadStringContentInApplicationSandbox = false;
				mapLoader.width = compGrid.width;
				mapLoader.height = 350;

				uiComponent = new UIComponent();
				uiComponent.width = compGrid.width;
				uiComponent.height = 350;
				uiComponent.addChild(mapLoader);
				uiComponent.top = 0;
				uiComponent.left = 0;
				this.addElement(uiComponent);
				mapLoader.load(urlReq);
				
			}
			
			protected function allReady(event:Event):void {
				var latitude:Number;
				var longitude:Number;
				mapLoader.window.loadKeyMap(origLat, origLong);
				mapLoader.window.addMainMarker(origLat, origLong, blcString);
				
				for (var i:int = 0; i < dataArrayCollection.length; i++) {
					latitude = Number(dataArrayCollection[i]["latitude"]);
					longitude = Number(dataArrayCollection[i]["longitude"]);
					blcString = "<div>BLC #"+dataArrayCollection[i]["blcNum"].toString()+":
"+dataArrayCollection[i]["address"].toString()+"</div>";
					mapLoader.window.addMarker(latitude, longitude, blcString);
				}
				
			}



*And this is my HTML/Javascript file:*


<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="map"></div>
    
    
  </body>
</html>



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Loading-Google-Maps-into-HTMLLoader-is-very-slow-the-first-time-tp13066.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Loading Google Maps into HTMLLoader is very slow the first time

Posted by bilbosax <wa...@comcast.net>.
OK, so I figured it out but I only have speculation as to why it works.  I
will post it here just in case anyone ever wants to read it.  You may not be
able to tell from the scrambled HTML/Javascript code that I posted, but
there is a CSS statement that defines the width and height of the map <div>
that is used to display the map.  Based upon examples I had seen on the net,
I set the width to 100% and the height to 350px.  I guess this works when
you are using it in a browser, but I don't think that it knows how to
communicate with AIR to determine the width of the HTMLloader, which I also
had set to a percentage.  I think that google needs to be able to determine
the dimensions of your display container so that when you ask it to center
the map on a coordinate point, it knows how to set up all the coordinates
and dimensions.  So I simply set the width of my HTMLloader to a fixed size
of 1385px, and changed the CSS in the HTML file to set the <div> to a
hard-wired 1385px, and voila!, it popped up quickly every time.  Go figure.

This leads me to a related question that you may be able to help with
regarding the htmlloader.  The code that I have adds a simple "title"
attribute to a marker that you can place on the map.  I can successfully add
a map marker in the HTMLloader. When the code is executed in a browser, a
simple tooltip is displayed when you mouseover the marker displaying the
string that you set as the title.  The tooltips do not respond in the
htmlloader.  You can also create a infoWindow that opens when you click on a
marker.  I created one that works in a browser but does not work inside the
htmlloader.  Do you have any thoughts as to why the htmlloader does not
display tooltips the way that a browser does.  The map does respond to
things such as clicking on the zoom in and out buttons, and you can click on
the satellite button with no problem, so I don't think that it is likely to
be a focus issue.  Any thoughts?



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Loading-Google-Maps-into-HTMLLoader-is-very-slow-the-first-time-tp13066p13074.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Loading Google Maps into HTMLLoader is very slow the first time

Posted by Alex Harui <ah...@adobe.com>.
I meant a third-party monitor like Wireshark.

-Alex

On 7/25/16, 9:16 PM, "bilbosax" <wa...@comcast.net> wrote:

>I didn't think you could for this type of application.  I am using
>Flashbuilder 4.5.  I thought the network monitor was for RPC things like
>HTTPService.  When I enable the monitor and launch the program in debug
>mode
>and then click the link that loads the google map into the htmlloader, I
>don't see any activity in the network monitor.  Also, the google maps
>operates under https securely, so I don't know if that makes a difference.
>Am I missing something?
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Loading-Google-Maps-into-HT
>MLLoader-is-very-slow-the-first-time-tp13066p13072.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.


Re: Loading Google Maps into HTMLLoader is very slow the first time

Posted by bilbosax <wa...@comcast.net>.
I didn't think you could for this type of application.  I am using
Flashbuilder 4.5.  I thought the network monitor was for RPC things like
HTTPService.  When I enable the monitor and launch the program in debug mode
and then click the link that loads the google map into the htmlloader, I
don't see any activity in the network monitor.  Also, the google maps
operates under https securely, so I don't know if that makes a difference.
Am I missing something?



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Loading-Google-Maps-into-HTMLLoader-is-very-slow-the-first-time-tp13066p13072.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Loading Google Maps into HTMLLoader is very slow the first time

Posted by Alex Harui <ah...@adobe.com>.

On 7/25/16, 3:36 PM, "bilbosax" <wa...@comcast.net> wrote:

>I placed several trace statements in my code to see where they hangup was
>taking place.  I placed them right before the htmlloader loads, after the
>load completes and is handled by the allready method, before and after
>each
>call to the javascript functions.  Without a doubt, the hangup is
>happening
>just as soon as mapLoader.load occurs and it takes 15-40 seconds for the
>htmlloaders Event.COMPLETE event to fire.  Just thought that might be
>helpful to you.
>

You might want to try a network monitor to see if there is caching going
on that makes subsequent loads faster.

HTH,
-Alex


Re: Loading Google Maps into HTMLLoader is very slow the first time

Posted by bilbosax <wa...@comcast.net>.
I placed several trace statements in my code to see where they hangup was
taking place.  I placed them right before the htmlloader loads, after the
load completes and is handled by the allready method, before and after each
call to the javascript functions.  Without a doubt, the hangup is happening
just as soon as mapLoader.load occurs and it takes 15-40 seconds for the
htmlloaders Event.COMPLETE event to fire.  Just thought that might be
helpful to you.



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Loading-Google-Maps-into-HTMLLoader-is-very-slow-the-first-time-tp13066p13067.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.