Amit Sharma

Android implementation of Google Maps JavaScript API v3 – Tutorial

| Posted by

One of the most popular categories of mobile apps is location-based services (LBS) which track your location, and may offer additional services such as locating amenities nearby, as well as offer suggestion for route planning, and so on. One of the key ingredients in an LBS app is maps, which present a visual representation of your location.

Google Maps provides high-resolution aerial or satellite images for most urban areas of the world. Google launched the Google Maps API in June 2005 to allow developers to integrate Google Maps into their websites. Its current version is 3.0.

Final Result
Google Maps Android API Implementation

6 Steps to implement Google Maps JavaScript API v3 to Android application

  1. Using Eclipse, create an Android project and name it “GoogleMaps”.
  2. Add permissions to use Internet in Android application by adding code to the AndroidManifest.xml file.
  3. Create HTML file (gmaps.html) with JavaScript under assets folder of Android project.
  4. Create a new layout “main.xml” under layout folder of the application.
  5. Finally, create an Android class (MainActivity.java) file under package of your “src” folder.
  6. Press F11 to debug the application on the Android emulator. Now, your app will be loaded with basic map features where you can zoom in/out, change view to satellite. Figure shows the output of the project.

Here is the step-by-step tutorial to implement Google Maps JavaScript API v3 to Android application:

1. Using Eclipse, create an Android project and name it “GoogleMaps”.

2. Add permissions to use Internet in Android application by adding following lines in bold to the AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.soigne.googlemaps"
	android:versionCode="1"
	android:versionName="1.0" >

	<uses-sdk
		android:minSdkVersion="8"
		android:targetSdkVersion="18" />
	<uses-permission android:name="android.permission.INTERNET"/>

	<application
		android:allowBackup="true"
		android:icon="@drawable/ic_launcher"
		android:label="@string/app_name"
		android:theme="@style/AppTheme" >
		<activity android:label="@string/app_name"
			android:name=".MainActivity" >
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
	</application>
</manifest>

3. Create HTML file (gmaps.html) with JavaScript under assets folder of Android project as:

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0; padding: 0 }
			#map-canvas { height: 100% }
		</style>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true">
		</script>
		<script type="text/javascript">
			function initialize() {
				var mapOptions = {
					center: new google.maps.LatLng(28.6100, 77.2300),
					zoom: 8
				};
				var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
			}
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
	</head>
	<body>
		<div id="map-canvas" />
	</body>
</html>

Above HTML file will be explained as:

  • It is recommended to declare a true DOCTYPE for your HTML page. Here, it is declared as HTML5 using the simple HTML5 DOCTYPE as shown below:
    <!DOCTYPE html>
  • Viewport Meta tag is used to control layout on mobile browsers. Properties of “content” attributes of viewport are:
    Property Description
    Width Width of the virtual viewport of the device. Enter a number (pixels), or the keyword “device-width” to set the viewport to the physical width of the device’s screen.
    Height Height of the virtual viewport of the device. Enter a number (pixels), or the keyword “device-height” to set the viewport to the physical height of the device’s screen.
    initial-scale Initial zoom of the webpage, where a value of 1.0 means no zoom.
    minimum-scale Minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user is not able to at all.
    maximum-scale Maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user is not able to at all.
    User-scalable Sets whether the user can zoom in and out of a webpage. Set to yes or no.
  • Next, CSS is defined for <html>, <body> and the map container <div> (named map-canvas) where they’ll take 100% of the height.
  • Loading Google Maps API: Google Maps are loaded to your application by using <script> tag as:
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>

The URL contained in the