Site icon C1CTech

Android Google Map Example

<p>This guide is a quick start to adding a map to an Android app&period; We are using Android Studio as a development environment&period;<&sol;p>&NewLine;<p>Get the full code from <strong><a href&equals;"https&colon;&sol;&sol;github&period;com&sol;arunk7839&sol;GoogleMapExample">Github<&sol;a><&sol;strong><&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;000080&semi;"><strong>Step 1&period; Create a Google Maps project<&sol;strong><&sol;span><&sol;p>&NewLine;<p>Follow these steps to create a new app project including a map activity&colon;<&sol;p>&NewLine;<ol>&NewLine;<li>Start Android Studio&period;<&sol;li>&NewLine;<li>Create a new project&period;<&sol;li>&NewLine;<li>Enter your app name&comma; company domain&comma; and project location&comma; as prompted&period; Then click <span style&equals;"color&colon; &num;008000&semi;"><strong>Next<&sol;strong><&sol;span>&period;<&sol;li>&NewLine;<li>Select the form factors you need for your app or just select <span style&equals;"color&colon; &num;008000&semi;"><strong>Phone and Tablet<&sol;strong><&sol;span>&period; Then click <span style&equals;"color&colon; &num;008000&semi;"><strong>Next<&sol;strong><&sol;span>&period;<&sol;li>&NewLine;<li>Select <span style&equals;"color&colon; &num;008000&semi;"><strong>Google Maps Activity<&sol;strong><&sol;span> in the &&num;8216&semi;Add an activity to Mobile&&num;8217&semi; dialog&period; Then click <span style&equals;"color&colon; &num;008000&semi;"><strong>Next<&sol;strong><&sol;span>&period;<&sol;li>&NewLine;<li>Enter the activity name&comma; layout name and title&period; Then click <span style&equals;"color&colon; &num;008000&semi;"><strong>Finish<&sol;strong><&sol;span>&period;<&sol;li>&NewLine;<&sol;ol>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;000080&semi;"><strong>Step 2&period;Get a Google Maps API key<&sol;strong><&sol;span><&sol;p>&NewLine;<p style&equals;"text-align&colon; left&semi;">  For getting the map api key go to <strong><a href&equals;"https&colon;&sol;&sol;console&period;developers&period;google&period;com&sol;&quest;&lowbar;ga&equals;2&period;188092840&period;1254419158&period;1526730950-593994706&period;1525417017">Google API Console&period;<&sol;a><&sol;strong>  or  watch the video how to create the Map API key&colon;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><amp-youtube layout&equals;"responsive" width&equals;"1200" height&equals;"900" data-videoid&equals;"FpHbIPVEC88" title&equals;"Android GoogleMap API Key Creation"><a placeholder href&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;watch&quest;v&equals;FpHbIPVEC88"><img src&equals;"https&colon;&sol;&sol;i&period;ytimg&period;com&sol;vi&sol;FpHbIPVEC88&sol;hqdefault&period;jpg" layout&equals;"fill" object-fit&equals;"cover" alt&equals;"Android GoogleMap API Key Creation"><&sol;a><&sol;amp-youtube><&sol;p>&NewLine;<h2 id&equals;"step&lowbar;5&lowbar;hello&lowbar;map&lowbar;take&lowbar;a&lowbar;look&lowbar;at&lowbar;the&lowbar;code"><&sol;h2>&NewLine;<p><span style&equals;"color&colon; &num;000080&semi;"><strong>Step 3&period;Hello Map&excl; Take a look at the code<&sol;strong><&sol;span><&sol;p>&NewLine;<p id&equals;"the&lowbar;xml&lowbar;layout&lowbar;file"><span style&equals;"color&colon; &num;0000ff&semi;"><strong>The app  build&period;gradle file<&sol;strong><&sol;span><&sol;p>&NewLine;<pre><code>dependencies &lbrace;&NewLine; implementation fileTree&lpar;dir&colon; 'libs'&comma; include&colon; &lbrack;'&ast;&period;jar'&rsqb;&rpar;&NewLine; implementation 'com&period;android&period;support&colon;appcompat-v7&colon;27&period;1&period;1'&NewLine; <strong><span style&equals;"color&colon; &num;008000&semi;">&sol;&sol; for google map<&sol;span><&sol;strong>&NewLine; implementation 'com&period;google&period;android&period;gms&colon;play-services-maps&colon;15&period;0&period;1'&NewLine;&rcub;<&sol;code><&sol;pre>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><strong>The Manifest file<&sol;strong><&sol;span><&sol;p>&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 2&period;0&period;98&period;1 -->&NewLine;<div class&equals;"quads-location quads-ad2" id&equals;"quads-ad2" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;&NewLine;<pre><code>&lt&semi;&quest;xml version&equals;"1&period;0" encoding&equals;"utf-8"&quest;&gt&semi;&NewLine;&lt&semi;manifest xmlns&colon;android&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res&sol;android"&NewLine; package&equals;"c1c&period;googlemapexample"&gt&semi;&NewLine;&NewLine; <strong><span style&equals;"color&colon; &num;008000&semi;">&lt&semi;&excl;--&NewLine; The ACCESS&lowbar;COARSE&sol;FINE&lowbar;LOCATION permissions are not required to use&NewLine; Google Maps Android API v2&comma; but you must specify either coarse or fine&NewLine; location permissions for the 'MyLocation' functionality&period; &NewLine; --&gt&semi;<&sol;span><&sol;strong>&NewLine; &lt&semi;uses-permission android&colon;name&equals;"android&period;permission&period;ACCESS&lowbar;FINE&lowbar;LOCATION" &sol;&gt&semi;&NewLine;&NewLine; &lt&semi;application&NewLine; android&colon;allowBackup&equals;"true"&NewLine; android&colon;icon&equals;"&commat;mipmap&sol;ic&lowbar;launcher"&NewLine; android&colon;label&equals;"&commat;string&sol;app&lowbar;name"&NewLine; android&colon;roundIcon&equals;"&commat;mipmap&sol;ic&lowbar;launcher&lowbar;round"&NewLine; android&colon;supportsRtl&equals;"true"&NewLine; android&colon;theme&equals;"&commat;style&sol;AppTheme"&gt&semi;&NewLine; &lt&semi;activity android&colon;name&equals;"&period;MapsActivity"&gt&semi;&NewLine; &lt&semi;intent-filter&gt&semi;&NewLine; &lt&semi;action android&colon;name&equals;"android&period;intent&period;action&period;MAIN" &sol;&gt&semi;&NewLine;&NewLine; &lt&semi;category android&colon;name&equals;"android&period;intent&period;category&period;LAUNCHER" &sol;&gt&semi;&NewLine; &lt&semi;&sol;intent-filter&gt&semi;&NewLine; &lt&semi;&sol;activity&gt&semi;&NewLine; <strong><span style&equals;"color&colon; &num;008000&semi;"> &lt&semi;&excl;--&NewLine; Note that the API key is linked to the encryption key used to sign the APK&period;&NewLine; You need a different API key for each encryption key&comma; including the release key that is used to&NewLine; sign the APK for publishing&period;&NewLine; You can define the keys for the debug and release targets in src&sol;debug&sol; and src&sol;release&sol;&period; &NewLine; --&gt&semi;<&sol;span><&sol;strong>&NewLine; &lt&semi;meta-data&NewLine; android&colon;name&equals;"com&period;google&period;android&period;geo&period;API&lowbar;KEY"&NewLine; android&colon;value&equals;"<span style&equals;"color&colon; &num;ff0000&semi;"><strong>ADD&lowbar;YOUR&lowbar;GOOGLE&lowbar;MAP&lowbar;API&lowbar;KEY<&sol;strong><&sol;span>" &sol;&gt&semi;&NewLine;&NewLine;&NewLine; &lt&semi;&sol;application&gt&semi;&NewLine;&NewLine;&lt&semi;&sol;manifest&gt&semi;<&sol;code><&sol;pre>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><strong>The XML layout file<&sol;strong><&sol;span><&sol;p>&NewLine;<p>By default&comma; the XML file that defines the app&&num;8217&semi;s layout is at <span style&equals;"color&colon; &num;008000&semi;"><code>res&sol;layout&sol;activity&lowbar;maps&period;xml<&sol;code><&sol;span>&period; It contains the following code or add the following code&colon;<&sol;p>&NewLine;<pre><code>&lt&semi;&quest;xml version&equals;"1&period;0" encoding&equals;"utf-8"&quest;&gt&semi;&NewLine;&lt&semi;fragment xmlns&colon;android&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res&sol;android"&NewLine; xmlns&colon;map&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res-auto"&NewLine; xmlns&colon;tools&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;tools"&NewLine; android&colon;id&equals;"&commat;&plus;id&sol;map"&NewLine; android&colon;name&equals;"com&period;google&period;android&period;gms&period;maps&period;SupportMapFragment"&NewLine; android&colon;layout&lowbar;width&equals;"match&lowbar;parent"&NewLine; android&colon;layout&lowbar;height&equals;"match&lowbar;parent"&NewLine; tools&colon;context&equals;"&period;MapsActivity" &sol;&gt&semi;<&sol;code><&sol;pre>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p id&equals;"the&lowbar;maps&lowbar;activity&lowbar;java&lowbar;file"><span style&equals;"color&colon; &num;0000ff&semi;"><strong>The maps activity Java file<&sol;strong><&sol;span><&sol;p>&NewLine;<pre><code>package c1c&period;googlemapexample&semi;&NewLine;&NewLine;import android&period;support&period;v4&period;app&period;FragmentActivity&semi;&NewLine;import android&period;os&period;Bundle&semi;&NewLine;&NewLine;import com&period;google&period;android&period;gms&period;maps&period;CameraUpdateFactory&semi;&NewLine;import com&period;google&period;android&period;gms&period;maps&period;GoogleMap&semi;&NewLine;import com&period;google&period;android&period;gms&period;maps&period;OnMapReadyCallback&semi;&NewLine;import com&period;google&period;android&period;gms&period;maps&period;SupportMapFragment&semi;&NewLine;import com&period;google&period;android&period;gms&period;maps&period;model&period;LatLng&semi;&NewLine;import com&period;google&period;android&period;gms&period;maps&period;model&period;MarkerOptions&semi;&NewLine;&NewLine;public class MapsActivity extends FragmentActivity implements OnMapReadyCallback &lbrace;&NewLine;&NewLine; private GoogleMap mMap&semi;&NewLine;&NewLine; &commat;Override&NewLine; protected void onCreate&lpar;Bundle savedInstanceState&rpar; &lbrace;&NewLine; super&period;onCreate&lpar;savedInstanceState&rpar;&semi;&NewLine; setContentView&lpar;R&period;layout&period;activity&lowbar;maps&rpar;&semi;&NewLine; <strong><span style&equals;"color&colon; &num;008000&semi;">&sol;&sol; Obtain the SupportMapFragment and get notified when the map is ready to be used&period;<&sol;span><&sol;strong>&NewLine; SupportMapFragment mapFragment &equals; &lpar;SupportMapFragment&rpar; getSupportFragmentManager&lpar;&rpar;&NewLine; &period;findFragmentById&lpar;R&period;id&period;map&rpar;&semi;&NewLine; mapFragment&period;getMapAsync&lpar;this&rpar;&semi;&NewLine; &rcub;&NewLine;&NewLine; &commat;Override&NewLine; public void onMapReady&lpar;GoogleMap googleMap&rpar; &lbrace;&NewLine; mMap &equals; googleMap&semi;&NewLine;&NewLine; &sol;&sol; Add a marker in Sydney and move the camera&NewLine; LatLng sydney &equals; new LatLng&lpar;-34&comma; 151&rpar;&semi;&NewLine; mMap&period;addMarker&lpar;new MarkerOptions&lpar;&rpar;&period;position&lpar;sydney&rpar;&period;title&lpar;"Marker in Sydney"&rpar;&rpar;&semi;&NewLine; mMap&period;moveCamera&lpar;CameraUpdateFactory&period;newLatLng&lpar;sydney&rpar;&rpar;&semi;&NewLine; &rcub;&NewLine;&rcub;<&sol;code><&sol;pre>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><strong>Run the app&colon;<&sol;strong><&sol;span><&sol;p>&NewLine;<p><img class&equals;"aligncenter wp-image-442 size-full" src&equals;"https&colon;&sol;&sol;c1ctech&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;Screenshot-2018-05-19-21&period;20&period;07&period;png" alt&equals;"" width&equals;"482" height&equals;"802" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;

Exit mobile version