Question

I am making an app in which i have to show Map in my Application.
I am able to show map and able to add Markers using annotation on Mapview.

Problem is
1> I am not able to show multiple markers on map.

So any body can help me how i can add multiple markers on Map.

Thanks,

Rakesh

Answer 1

Here is a map class that I use. You would include this map.js file in your window and call map.init and pass in an array of map annotations to add, the center lat/long, the top and bottom positions of the map, and optionally the lat/long delta. If you want to dynamically add annotations after the map has already been created then you can call the other functions in the class to do so:

var path = Ti.Platform.name == 'android' ? Ti.Filesystem.resourcesDirectory : "../../";

var map = {

    top: 0,
    bottom: 0,
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1,
    display: "map",

    init: function (annotations, latitude, longitude, top, bottom, delta) {

        if (top)
            map.top = top;
        if (bottom)
            map.bottom = bottom;
        if (delta) {
            map.latitudeDelta = delta;
            map.longitudeDelta = delta;
        }

        map.createMap(annotations, latitude, longitude);
        map.createOptions();
        map.getLocation();

    },

    createMap: function (annotations, latitude, longitude) {

        map.mapView = Ti.Map.createView({
            mapType: Ti.Map.STANDARD_TYPE, animate: true, regionFit: false, userLocation: true,
            region: { latitude: latitude, longitude: longitude, latitudeDelta: map.latitudeDelta, longitudeDelta: map.longitudeDelta },
            annotations: annotations, bottom: map.bottom, top: map.top, borderWidth: 1
        });
        if (!isAndroid) {
            map.mapView.addAnnotation(annotations[0]);
        }
        map.mapView.selectAnnotation(annotations[0]);
        win.add(map.mapView);

    },

    createOptions: function () {

        //map/satellite displays.
        var mapDisplay = new ImageView({ image: path + 'images/map/satellite-view.png', width: 70, height: 49, zIndex: 2, top: map.top + 5, right: 5 });
        mapDisplay.addEventListener('click', function () {
            if (map.display == "map") {
                map.mapView.setMapType(Titanium.Map.SATELLITE_TYPE);
                mapDisplay.image = path + "images/map/map-view.png";
                map.display = "satellite";
            }
            else {
                map.mapView.setMapType(Titanium.Map.STANDARD_TYPE);
                mapDisplay.image = path + "images/map/satellite-view.png";
                map.display = "map";
            }
        });
        win.add(mapDisplay);

        //crosshairs.
        if(Ti.Geolocation.locationServicesEnabled) {
            var centerDisplay = new ImageView({ image: path + 'images/map/crosshairs.png', width: 49, height: 49, zIndex: 2, top: map.top + 5, right: 80 });
            centerDisplay.addEventListener('click', function () {
                if(map.latitude != 0 && map.longitude != 0) {
                    info("setting user location to " + map.latitude + " / " + map.longitude);
                    //center map.
                    var userLocation = {
                        latitude: map.latitude,
                        longitude: map.longitude,
                        latitudeDelta: map.latitudeDelta,
                        longitudeDelta: map.longitudeDelta,
                        animate: true
                    };
                    map.mapView.setLocation(userLocation);
                }
                else {
                    info("Can't get user location, lat and long is 0!");
                }
            });
            win.add(centerDisplay);
        }

    },

    createAnnotation: function (title, subtitle, latitude, longitude, isLocation, addToMap) {

        var mapAnnotation = Ti.Map.createAnnotation({
            latitude: latitude, longitude: longitude,
            title: title,
            subtitle: subtitle,
            animate: true
        });
        if (isAndroid) {
            mapAnnotation.pinImage = path + (isLocation ? "images/map/blue-pin.png" : "images/map/purple-pin.png");
        }
        else {
            mapAnnotation.pincolor = isLocation ? Ti.Map.ANNOTATION_PURPLE : Ti.Map.ANNOTATION_RED;
        }

        if (addToMap)
            map.mapView.addAnnotation(mapAnnotation);

        return mapAnnotation;

    },

    updateAnnotation: function (mapAnnotation, title, subtitle, latitude, longitude, isLocation) {

        if (mapAnnotation) {
            map.mapView.removeAnnotation(mapAnnotation);
            mapAnnotation = map.createAnnotation(title, subtitle, latitude, longitude, isLocation);
            map.mapView.addAnnotation(mapAnnotation);
            map.mapView.selectAnnotation(mapAnnotation);
        }

    },

    addAnnotation: function (mapAnnotation) {

        map.mapView.addAnnotation(mapAnnotation);

    },

    removeAnnotation: function (mapAnnotation) {

        map.mapView.removeAnnotation(mapAnnotation);

    },

    selectAnnotation: function (mapAnnotation) {

        map.mapView.selectAnnotation(mapAnnotation);

    },

    createRoute: function (name, points) {

        var route = {
            name: name, points: points, color: "#7c74d4", width: 4
        };
        map.mapView.addRoute(route);
        setTimeout(function () { map.mapView.regionFit = true; }, 700);

    },

    getLocation: function() {

        Ti.Geolocation.preferredProvider = Ti.Geolocation.PROVIDER_GPS;
        Ti.Geolocation.purpose = "testing";
        Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;
        Ti.Geolocation.distanceFilter = 10;

        if(!Ti.Geolocation.locationServicesEnabled) {
            //alert('Your device has GPS turned off. Please turn it on.');
            return;
        }

        function updatePosition(e) {
            if(!e.success || e.error) {
                info("Unable to get your location - " + e.error);
                return;
            }
            info(JSON.stringify(e.coords));
            map.latitude = e.coords.latitude;
            map.longitude = e.coords.longitude;
            Ti.Geolocation.removeEventListener('location', updatePosition);
        };

        Ti.Geolocation.getCurrentPosition(updatePosition);    
        Ti.Geolocation.addEventListener('location', updatePosition);

    }

};