Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated per Alan's comments in TIDOC-3362

...

Code Block
linenumberstrue
languagejs
langjavascript
const Map = require('ti.map');
const win = Ti.UI.createWindow();
const mapview = Map.createView({
    mapType: Map.NORMAL_TYPE,
    region: {
    latitude: 37.389569,     longitude: -122.050212,
            latitudeDelta: 0.1,     longitudeDelta: 0.1},
  },   animate: true,
    regionFit: true,
    userLocation: false
});
mapview.addEventListener('complete', function(e) {
    Ti.API.info('complete');
    Ti.API.info(e);
});
mapview.addEventListener('error', function(e) {
    Ti.API.info('error');
    Ti.API.info(e);
});
mapview.addEventListener('loading', function(e) {
    Ti.API.info('loading');
    Ti.API.info(e);
});
mapview.addEventListener('regionChanged', function(e) {
    Ti.API.info('regionChanged');
    Ti.API.info(e);
});
 
win.add(mapview);
win.open();

...

Code Block
linenumberstrue
languagejs
langjavascript
const Map = require('ti.map');
const win = Ti.UI.createWindow();
const annotations = [
	Ti.    Map.createAnnotation({
		        latitude: 37.389569,
		        longitude: -122.050212,
		        title: 'Appcelerator HQ',
		        subtitle: 'Mountain View, CA',
		        animate: true,
		        pincolor: Ti.Map.ANNOTATION_GREEN,
		        leftButton: 'appcelerator.gif'
	    }),
	Ti.    Map.createAnnotation({
		        latitude: 37.331689,
		        longitude: -122.030731,
		        title: 'Apple HQ',
		        subtitle: 'Cupertino, CA',
		        animate: true,
		        pincolor: Ti.Map.ANNOTATION_RED,
		        rightButton: 'apple.png'
	    }),
	Ti.    Map.createAnnotation({
		        latitude: 37.422502,
		        longitude: -122.0855498,
		        title: 'Google HQ',
		        subtitle: 'Mountain View, CA',
		        animate: true,
		        image: 'google.png',
		        leftView: Ti.UI.createButton({
			            title: 'leftView',
			            height: 32,
			            width: 70
		        }),
		        rightView: Ti.UI.createLabel({
			            text: 'rightView',
			            color: '#fff'
		        })
	    })
];
const mapview = Titanium.Map.createView({
    mapType: Titanium.Map.NORMAL_TYPE,
    region: {
    	    latitude:37.389569,
    	    longitude:-122.050212,
        latitudeDelta:.05,
        longitudeDelta:.05
    },
    animate:true,
    regionFit:true,
    userLocation:false,
    annotations: annotations
});

win.add(mapview);
win.open();

We just created an array full of annotations, then passed that array to the MapView for use when it was created. Even if we had only one annotation, we still need to pass it to the MapView as an entry in an array. With the array of annotations constructed, we are ready to display them in a MapView. Here's what it looks like on Android and iPhone, respectively.

...

Code Block
linenumberstrue
languagejs
langjavascript
const Map = require('ti.map');
const win = Ti.UI.createWindow();
const annotations = [
	Ti.    Map.createAnnotation({
		        latitude: 37.389569,
		        longitude: -122.050212,
		        title: 'Appcelerator HQ',
		        subtitle: 'Mountain View, CA',
		        animate: true,
		        pincolor: Ti.Map.ANNOTATION_GREEN,
		        leftButton: 'appcelerator.gif'
	    }),
	Ti.    Map.createAnnotation({
		        latitude: 37.331689,
		        longitude: -122.030731,
		        title: 'Apple HQ',
		        subtitle: 'Cupertino, CA',
		        animate: true,
		        pincolor: Ti.Map.ANNOTATION_RED,
		        rightButton: 'apple.png'
	    }),
	Ti.    Map.createAnnotation({
		        latitude: 37.422502,
		        longitude: -122.0855498,
		        title: 'Google HQ',
		        subtitle: 'Mountain View, CA',
		        animate: true,
		        image: 'google.png',
		        leftView: Ti.UI.createButton({
			            title: 'leftView',
			            height: 32,
			            width: 70
		        }),
		        rightView: Ti.UI.createLabel({
			            text: 'rightView',
			            color: '#fff'
		        })
	    })
];
const mapview = Titanium.Map.createView({
    mapType: Titanium.Map.NORMAL_TYPE,
    region: {
    	    latitude:37.389569,
    	    longitude:-122.050212,
        latitudeDelta:.05,
        longitudeDelta:.05
    },
    animate:true,
    regionFit:true,
    userLocation:false,
    annotations: annotations
});
mapview.addRoutevar route = Map.createRoute({
	    name: 'myroute',
	    width: 4,
	    color: '#f00',
	    points: [
		        {latitude:37.422502, longitude:-122.0855498},
		        {latitude:37.389569, longitude:-122.050212},
		        {latitude:37.331689, longitude:-122.030731}
	    ]
});

mapview.addRoute(route);
win.add(mapview);
win.open();

After we add the route to the existing MapView, we get the following map on iPhone.

...