[Android] Native VS Webview [Google Map V3]

You must Login before you can answer or comment on any questions.

hi folks.. this are the following task i need to do in MAPS

-Create "Circle" inside the map

-Linking to markers or more using "Lines"

This makes me think for days on which will i use... So in your idea.. what should i use?? and why??

Common Problems I encounter...

//Native MAP
 
//I set up an google api key already.. clean and rebuild...
<property name="ti.android.google.map.api.key.development">0mlHjgxrzubs_Pm24B7TBX2qzIiQUQ3gYGo5x4g</property>
//This is what i added in tiapp.xml
//This shows empty grid.. (I really dont know why its not working so..)
//I do a tweak to make it show base on what i search here in the Q&A
<manifest>
            <supports-screens android:anyDensity="true"/>
            <activity android:configChanges="keyboardHidden|orientation"
                android:launchMode="singleTask"
                android:name="ti.modules.titanium.map.TiMapActivity" android:screenOrientation="portrait"/>
            <com.google.android.maps.MapView
                android:apiKey="0mlHjgxrzubs_Pm24B7TBX2qzIiQUQ3gYGo5x4g"
                android:layout_height="fill_parent" android:layout_width="fill_parent"/>
            <uses-library android:name="com.google.android.maps"/>
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
            <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/>
            <uses-permission android:name="android.permission.VIBRATE"/>
            <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
            <uses-permission android:name="android.permission.CAMERA"/>
            <uses-permission android:name="android.permission.INTERNET"/>
            <uses-permission android:name="android.permission.READ_CONTACTS"/>
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
        </manifest>
//this is my tweak in tiapp.xml
//Yes It works but... when i load the many markers.. the map just dont update it self when i move to other location.. like pinching to other places..
 
//Also i can't create Circles (for radius) and Lines (for connecting markers just like in route)
 
 
//WEBVIEW [Google Map V3]
//This loads the map as expected but.. when i try to pinch to the map..
//The webview is the one that is pinched not the map.. so it just zoom-in to the map (not acctually zooming the map)
This is my code for the both
//Native Map code
exports.thisPage = function(win){
    var data = win.xhrData; //this is the JSON data NOTE: my JSON is correct cause all the markers are placed..
    var marker = [];
    var map = Ti.Map.createView({
        mapType: Titanium.Map.STANDARD_TYPE,
        region:{latitude:14.6673667, longitude:121.0432335, latitudeDelta:0.5, longitudeDelta:0.5},
        animate:true,
        regionFit:true,
        userLocation:false
    });
        for(var x = 0; x < data.length; x++){
            if(data[x].latitude != 0 || data[x].longitude != 0){
                var annot = Titanium.Map.createAnnotation({
                    latitude: data[x].latitude,
                    longitude: data[x].longitude,
                    title: data[x].trade_name,
                    subtitle: "Address: " + data[x].address,
                    pincolor: Titanium.Map.ANNOTATION_RED,
                    animate:true,
                    leftButton: "images/no_photo.jpg",
                    myid: data[x].id // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
                });
                marker.push(annot);
                //map.addAnnotation(annot); 
            }
        }
    if(data[0].id !== undefined){
        map.annotations = marker;
    }
    Titanium.Geolocation.getCurrentPosition(function(e){
                if (!e.success || e.error)
                {
                    alert('error ' + JSON.stringify(e.error));
                    return;
                }
                var region = {
                                latitude: e.coords.latitude,
                                longitude: e.coords.longitude, 
                                latitudeDelta:0.5, 
                                longitudeDelta:0.5
                };
                map.setLocation(region);
    });
 
    var mapcont = Titanium.UI.createView({
        width: '100%',
        height: '100%',
        borderColor: '#1a0033',
        backgroundColor: '#8400ff'
    });
 
    mapcont.add(map);
    win.add(mapcont);
    return win; 
}
 
 
//My Webview code is here
var win = Ti.UI.createWindow({
    exitOnClose: true,
    fullscreen: false
});
 
var webview = Ti.UI.createWebView({
    url: 'sample.html',
    scalesPageToFit: true,
    enableZoomControls: false,
    height: 'auto'
});
 
win.add(webview);
win.open();
 
//the sample.html code is
<html>
    <head>
        <title>Sample WebView</title>
        <!-- Google Api V3 Declaration -->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/geocode/output?parameters"></script>
        <script>
            function initialize() {
                var latlng = new google.maps.LatLng(14.6673667, 121.0432335);
                var myOptions = {
                  zoom: 13,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
            }
        </script>
        <!-- End of Google Api V3 Declaration -->
    </head>
    <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>
I hope you can help me with this.. I know this is kinda long.. but please help me... explaining why do i get errors in native map is very much appreciated..

For me.. i really want to use Native coz its fast.. but.. there are some limitation in its use with the ANDROID..

Thanks for the help in advance

-Ken

— asked 1 year ago by Ken Crucillo
1 Comment
  • Two days pass... still no ideas?? :(

    — commented 1 year ago by Ken Crucillo

Your Answer

Think you can help? Login to answer this question!