4 Replies Latest reply: Mar 10, 2014 3:34 PM by dajj123 RSS

    Google map for mobile in Flashbuilder 4.6 - Full implementation

    gsainson

      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_GOOGLEMAP_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 !