0 Google Maps Android API v2 MapFragment tutorial - Implementing Map inside a Fragment

Posted by Blogger Name. Category: Advance Android , Fragment , MapView

Using MapFragment Android release MapFragment to integrate Map into fragment. using Mapfragment is quite difficult to start but very simple to handle. First of all see Generating Map Key for Google Console project.  Now in Android APP API v2,  include Google play service so you need to add Google Play Service into your project.
    

See screen shot

Step 1) Change your manifest and add permission , Some permission start with you package name. So if you change package of this project than use it. My package name is com.mapfragment. Made changes to your manifest like this

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mapfragment"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:maxSdkVersion="17"
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />

    <permission
        android:name="com.mapfragment.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.mapfragment.permission.MAPS_RECEIVE" />
    <!-- Copied from Google Maps Library/AndroidManifest.xml. -->

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!-- External storage for caching. -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- My Location -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- Maps API needs OpenGL ES 2.0. -->
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <uses-library android:name="com.google.android.maps" />
        <!-- You must insert your own Google Maps for Android API v2 key in here. -->
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"

            android:value="yourkey" />
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 2) Create two xml inside res/layout folder. One contain FrameLayout ( To embed Fragment inside it) and other contains MapFragment
main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/mainl"
    android:layout_height="match_parent" >

</FrameLayout>

Step 3) Do some changes inside your main activity and create one Fragment class to integrate it with in the MainActivity

MainActivity.java

package com.mapfragment;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;

import com.google.android.gms.common.GooglePlayServicesNotAvailableException;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapsInitializer;
import com.google.android.gms.maps.SupportMapFragment;

public class MainActivity extends FragmentActivity {
    GoogleMap mapView;
    com.google.android.gms.maps.Projection projection;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        FragmentTransaction mTransaction = getSupportFragmentManager()
                .beginTransaction();
        SupportMapFragment mFRaFragment = new MapFragmentD();
        mTransaction.add(R.id.mainl, mFRaFragment);
        mTransaction.commit();

        try {
            MapsInitializer.initialize(this);
        } catch (GooglePlayServicesNotAvailableException e) {
            e.printStackTrace();
        }
    }

}

MapFragmentD.Java

package com.mapfragment;

import android.app.Activity;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MapFragmentD extends SupportMapFragment {

    GoogleMap mapView;

    @Override
    public void onCreate(Bundle arg0) {
        super.onCreate(arg0);
    }

    @Override
    public View onCreateView(LayoutInflater mInflater, ViewGroup arg1,
            Bundle arg2) {
        return super.onCreateView(mInflater, arg1, arg2);
    }

    @Override
    public void onInflate(Activity arg0, AttributeSet arg1, Bundle arg2) {
        super.onInflate(arg0, arg1, arg2);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        mapView = getMap();
        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.draggable(true);
        markerOptions.position(new LatLng(23.231251f, 71.648437f));
        markerOptions.icon(BitmapDescriptorFactory.defaultMarker());
        mapView.addMarker(markerOptions);
    }
}

Now Lets see How to display Ping on location

        mapView = getMap();
        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.draggable(true);
        markerOptions.position(new LatLng(23.231251f, 71.648437f));
        markerOptions.icon(BitmapDescriptorFactory.defaultMarker());
        mapView.addMarker(markerOptions);

Download SourceCode

Tweet

Komentar →