Skip navigation
Currently Being Moderated

Google map for mobile in Flashbuilder 4.6 - Full implementation

Jun 10, 2012 7:40 AM

Tags: #google #javascript #stagewebview #api #map

Hi all,

 

I've trying to embed google map in a mobile app for both Android and iPhone. There are thousands of tutorial on the subject but unfortunaly most of them stop after displaying the first map ... so at the point where tricky issues start.

Of course, there are several alternate map api (like Mapquest) and they work fine with flex but these maps looks strange for an iPhone or Android user as they are used with google maps. I's why I want to use google map

 

As the flex google map sdk is not available anymore, it seems that the only way to work with google is to use google map javacript api into a StateWebView.

In order to use it, I have created a web page "googlemap.html" that call the google map api.

 

The bacic call I use is like this one :

 

   stageWebView = new StageWebView();

   stageWebView.stage = this.stage;

   stageWebView.viewPort = new Rectangle(0,80,this.stage.stageWidth,this.stage.stageHeight-80);

   stageWebView.loadURL( "http://myserver/googlemap.html" );

 

The webpage googlemap.html I call is

 

 

<!DOCTYPE html>

<html>

  <head>

    <title>Google Maps JavaScript API v3 Example: Map Simple</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,  target-densitydpi=device-dpi">

    <meta charset="UTF-8">

    <style type="text/css">

      html, body, #map_canvas {

        margin: 0;

        padding: 0;

        height: 100%;

      }

    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.8&sensor=true&key=MY_GOOGL EMAP_KEY"></script>

    <script type="text/javascript">

      // true

      var map;

      function initialize() {

        var myOptions = {

          zoom: 5,

          center: new google.maps.LatLng(49.2213, -0.3697),

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

       

        map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

 

 

        if(navigator.geolocation) {

          alert("OK");

          navigator.geolocation.getCurrentPosition(successCallback, failCallback, {enableHighAccuracy:true} );

        } else {

          handleNoGeolocation();

        }

      }

 

 

      function failCallback() {

        alert("ERROR");

      }

     

      function successCallback(position) {

          alert("YES");

      }

     

      function handleNoGeolocation() {

          alert("NO");

      }

     

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

    <div id="map_canvas"></div>

  </body>

</html>

 

 

Now this all the issues I have found, with some I have a start of a solution, with others, I don't.

 

1) Zoom issue on Android

The two fingers pinch zoom the web page but doesn't ask the google api to zoom the map (so you don't have more details on the map, you just have a zoomed picture)

The  "initial-scale=1.0, maximum-scale=1.0, user-scalable=no"  meta tag doesn't seems to give any results with all the combinaisons I have used.

I didn't managed to disable the two fingers zoom

I works fine with iPhone

I don't have any start of a solution on the subject

 

 

2) Geolocation (android)

I would like to have the stanadard blue dot and the blue circle to show my position.

I didn't found any strait way to do it (parameter on map or something like this)

There is an HTML5 call that could be used :

 

 

        if(navigator.geolocation) {

          navigator.geolocation.getCurrentPosition(successCallback, failCallback, {enableHighAccuracy:true} );

        } else {

          handleNoGeolocation();

        }

 

 

This works fine when called directly from the device web browser but not from the StageWebView. Event if navigator.geolocation is true, it never jump into the successCallback or failCallback callbacks (I have set several jascript "alert" so I'm sure getCurrentPosition is called)

The gps is activated on the android manifest (and I have the gps icon on the notification bar)

 

 

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>

    <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/>

    <uses-permission android:name="android.permission.CONTROL_LOCATION_UPDATES"/>

 

 

I think from this point my only solution is to use the Flex native geolocalisation functionnality and pass the coordinates to to map.

 

 

3) Google links

There are two links at the bottom of the map (google and use condition). The anoying thing is that clicking on them will change the map to another google page. I would like to change this to call an external webrowser.

There is may be a solution by adding a div in forground with a link to then webpage on a different target. I didn't investigate more on the subject. 

Of course, for licencing raison, these link must not be hidden ...

 

The next two point are more for information

 

 

4) javascript call

I looks like there are some way to call javascription function from Flex but also to call flex from javascript.

see

http://coenraets.org/blog/2011/07/flex-mobile-invoking-javascript-in-a -stagewebview/

http://e-skimo.com/ (see gmap component)

 

 

5) Local html file

Not an issue with this one but just for information, there is a way to use a local html file instead of a remote one (so you don't need a web site) :

 

 

    var html:String = HTML_TEMPLATE;

    var _fileStream:FileStream = new FileStream();

    _fileStream.open(_fileTmp, FileMode.WRITE);

    _fileStream.writeUTFBytes(html);

    _fileStream.close();

    stageWebView.loadURL(_fileTmp.url);

 

  

Any help on issue 1 to 3 will be welcome !

 
Replies
  • Currently Being Moderated
    Calculating status...
    Jun 14, 2012 8:55 PM   in reply to gsainson

    Hi Gsaison,

     

    Do you have any progress on these issues? Im working on the same solution right now (SWV + GoogleMaps JS v3 ) I've got some weird issue when i try to spawn a StageWebView inside a View on IOS, it appears inside a scroller and is not open for finger interaction anymore. I use the eskimo framework, but then again, nothing fancy going on there for the rest. I've tried all of the the stage.stageScaleMode options but non of them work. Got any help?

     

    Kind regards,

    Roy

     
    |
    Mark as:
  • Currently Being Moderated
    Calculating status...
    Feb 24, 2013 5:48 PM   in reply to gsainson

    I would also be very grateful for the answer to problem #2 above.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 10, 2014 3:34 PM   in reply to gsainson

    I am having an issue with a touch screen desktop windows 8.  I can drag the map around with my mouse but cant drag it with a touch any help would be great.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points