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.
- Using Eclipse, create an Android project and name it “GoogleMaps”.
- Add permissions to use Internet in Android application by adding code to the AndroidManifest.xml file.
- Create a new layout “main.xml” under layout folder of the application.
- Finally, create an Android class (MainActivity.java) file under package of your “src” folder.
- 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.
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>
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:
- 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:
The URL contained in the