With the release of Apple’s iOS 6 the device’s maps have changed from the usage of Google maps to using Apple’s own mapping service. Fortunately, very little has changed when working with map annotations across iOS versions 5 and 6.
Today we are taking a closer look at some of the features when utilizing map annotations. A map annotation requires a latitude and longitude value to tell the map where to display the annotation. Although this is all that is required to display a pin on the map, if you want to detect click events on your map pins, then you will need to add a title to the annotation.var myannotation = Ti.Map.createAnnotation({
latitude: latitude, //coordinates
longitude: longitude, //coordinates
animate: false, //it won’t animate the pin
title: “My Title”, // will be required if you need to detect a ‘click’ event
subtitle: “My Subtitle”,
image: ‘images/my_annotation_image.png’ // can be used to replace the default pin
});
The click events are registered to the map view itself and the annotation clicked is specified in the event object. It is also possible to add subtitles and images to your annotation to customize the display of information. Another great feature is the ability to use custom images for your map pins.MyMapView.addEventListener('click', function(e){
if(e.clicksource === 'pin'){
Ti.API.info("The Pin at Latitude: " + e.annotation.latitude + " Longitude: " + e.annotation.longitude + " was clicked.");
}
}
The only caveat being that the center of the image is placed at the specified latitude/longitude values. Possible workarounds are extending the transparent area around your image so that the base of your pin is centered in the image.
Minimizing the size of your custom image also helps due to there being less error in the offset. Hopefully, an offset property will be released soon!
Changing the custom pin image of an annotation during runtime is a little trickier. In order for the appearance to be updated, the annotation must be removed and added back to the map view.
Armed with these features, creating a map-based app can be accomplished efficiently with effective results!
Happy Mapping!
Sign up for the Shockoe newsletter and we’ll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.