- Apps in the Mobile/Social/Local Internet
- Google Maps APIs Power Mobile/Social/Local Apps
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Google Maps APIs Power Mobile/Social/Local Apps
Now, let’s take a detailed look at how Google Maps APIs power these apps behind the scene. The Google Maps API Family offers a comprehensive set of APIs, partially listed in the following sections.
Maps JavaScript API V3
The Maps JavaScript API V3 makes it very easy to embed a map in a web app or native mobile app in matter of minutes. A feature recently introduced by Gowalla called Highlights (see Figure 1) is a good example use case, as highlighted on TechCrunch, where users of the Gowalla app can add highlights from their travels and share those favorites with friends on Google Maps.
)
In just a few simple lines of JavaScript like the following, you get an interactive map:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/**Called on the initial page load.
*/ function init() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(-33.866, 151.195),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
</script>
The Maps Javascript API V3 leverages on the W3C Geolocation API when browsers
support it, and you can use the following code to detect a user’s location on both desktop and mobile:
function getUsersLocation() {
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.panTo(pos); }, function() {
// Can find the users location
}); }
}
The Maps Javascript API V3 also offers a slew of new features such as Styled Maps, Custom Street View, Traffic & Bicycle layers, and KML & Fusion Table layers, in addition to custom markers, custom controls, and Direction services.
Other apps like foursquare, loopt, brightkite, and yelp all use the Google Maps Javascript API to show places on a map. See the Google Maps Javascript API V3 Demo Gallery for more ideas and interesting use cases.
Static Maps API
The Static Maps API can be used for creating location-specific map images such as thumbnails. They are particularly handy when a browser does not support JavaScript (e.g., on some mobile devices). They are also handy in serving location-specific thumbnails on-the–fly—for example, on where.com. The following example contains the URL of a static map image:
See the Static Maps API documentation for details on the URL parameters—e.g., marker, zoom, and label.
Street View API
The Street View API is part of JavaScript API V3 as a service, and developers can either enable Street View on a map or add custom Street View. To enable it on a map, all you need to do is set streetViewControl to true in mapOptions, as follows:
var mapOptions = {
...
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Now the map will appear with a Street View Pegman control. You can even overlay Markers and InfoWindows on top of Street View.
You may also want to implement a custom control with direct access to Street View tiles, or if you are even more adventurous, you may want to set up your own custom Street View and go inside for indoor views. See all the details at the Street View API documentation.
Places API
The Places API allows developers to query places near a location by radius, ideally suitable for apps with a check-ins feature. For example, Booyah uses Places API to power check-ins in their MyTown app.
Currently, it offers two kinds of requests:
- Place Search Request
- Place Detail Request
The former is designed for querying places in a certain radius centered at a point with the following syntax:
- http://maps.google.com/maps/api/place/search/output?parameters
where output can be either json or xml, and parameters location and radius.
Maps API for Flash
The Maps API for Flash is good for animation and rich interactivity. A recent app by Tripline uses it to retell the story of Amelia Earhart’s fateful circumnavigation in animation. Again, it’s straightforward to add a map with a few lines of ActionScript as follows:
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
See the detailed tutorials at the Maps API for Flash documentation.
Geocoding Services
Another common need for many location-based apps is geocoding, which is the process of turning an address into latitude and longitude or vice versa. Many aforementioned apps use the Geocoding Services for server-side geocoding as well as client-side geocoding within JavaScript, which can be done as follows:
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
return results[0].geometry.location);
});
In general, client-side geocoding is recommended because usage is metered per client IP address, and it’s a lot harder to exhaust quota limits. See this site for best practices.
Mobile APIs
On the mobile front there are also native APIs like MapView Native library for Android and Map Kit Framework by Apple for iOS devices.
For example, on Android you may implement a map using MapView as follows:
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import android.os.Bundle;
public class MapsActivity extends MapActivity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
@Override
protected boolean isRouteDisplayed() {
return false;
}
}
And on iPhone, you’d do something like this:
#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
@interface MapViewController : UIViewController<MKMapViewDelegate> {
IBOutlet UITextField *addressField;
IBOutlet UIButton *goButton;
IBOutlet MKMapView *mapView;
}
@end
and override the following method like this:
(void)applicationDidFinishLaunching:(UIApplication *)application {
mapViewController = [[MapViewController alloc] initWithNibName:@"MapView" bundle:nil];
[window addSubview:mapViewController.view];
[window makeKeyAndVisible];
}
Although these native APIs offer tight integrations with devices, they are often not kept up to date with the latest and best features of Google Maps APIs. It is recommended that mobile mapping be implemented using an embedded browser within native apps in order to take full advantage of the latest features in the Maps JavaScript API V3. See my Informit article for more information.
The MapView for Android and Map Kit for iPhone are the horsepower for mapping needs behind almost all the natives apps on Android and iPhone, from companies like foursquare, Gowalla, loopt, yelp, and where. They complement the Google Maps API family to provide a complete coverage from desktop to mobile in powering many of the location-based social apps.