{"id":10,"date":"2016-01-14T14:58:54","date_gmt":"2016-01-14T13:58:54","guid":{"rendered":"http:\/\/filiz.it\/?p=10"},"modified":"2016-01-22T20:33:46","modified_gmt":"2016-01-22T19:33:46","slug":"android-tutorial-adding-googlemaps-with-a-mapview","status":"publish","type":"post","link":"http:\/\/filiz.it\/index.php\/2016\/01\/14\/android-tutorial-adding-googlemaps-with-a-mapview\/","title":{"rendered":"Android Tutorial: Adding GoogleMaps with a MapView"},"content":{"rendered":"<p class=\"p1\">In this Tutorial i\u00b4m\u00a0going to create an Android app to\u00a0display\u00a0the Google Maps on a Fragment. Also i\u00b4m\u00a0going to set a marker on an\u00a0selected\u00a0position.<\/p>\n<h4 class=\"p1\"><strong>Step 1: Create a new Android Studio Project<\/strong><\/h4>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-26\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step1-300x240.png\" alt=\"create_project_step1\" width=\"300\" height=\"240\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step1-300x240.png 300w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step1-400x320.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step1.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>For the sake of this tutorial we set the API Level to 22, but lower Levels should be fine, too.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-27\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step2-300x240.png\" alt=\"create_project_step2\" width=\"300\" height=\"240\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step2-300x240.png 300w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step2-400x320.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step2.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Because I&#8217;m going to extend this app in further blog posts, I choose the <strong>Navigation Drawer Activity<\/strong> template.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-28\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step3-300x240.png\" alt=\"create_project_step3\" width=\"300\" height=\"240\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step3-300x240.png 300w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step3-400x320.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step3.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>In the next step, I stick with the default naming, but <strong>MainActivity<\/strong>\u00a0would be a suitable name as well.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-29\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step4-300x240.png\" alt=\"create_project_step4\" width=\"300\" height=\"240\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step4-300x240.png 300w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step4-400x320.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/create_project_step4.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4><\/h4>\n<h4><\/h4>\n<h4><strong><strong>Step 2: Setup\u00a0Project<\/strong><br \/>\n<\/strong><\/h4>\n<p>What else? Before starting do some config stuff&#8230;.<\/p>\n<ol>\n<li>Check that you have installed the Google Play Services\u00a0package.\n<ul>\n<li><em>Android Studio&#8211;&gt;Preferences&#8211;&gt;System Settings&#8211;&gt;Android SDK<\/em><\/li>\n<li><em>Tap on SDK Tools<\/em><\/li>\n<li><em>Now you can install\/update\u00a0the Google Play Services package<\/em><\/li>\n<\/ul>\n<\/li>\n<li>Generate API Key for the Google Maps. You can do that on the Google Developer Console: <a href=\"https:\/\/console.developers.google.com\/\">Google Developers Console<\/a><\/li>\n<li>Add dependency to your <strong>build.gradle<\/strong><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/FilHazer\/b8f6ecafa822ff929883.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/FilHazer\/b8f6ecafa822ff929883\">Gist<\/a>.<\/noscript><\/div>\n<p>4. Setup the <strong>AndroidManifest.xml<\/strong> file:<\/p>\n<p>&nbsp;<\/p>\n<p>To get access\/receive maps you have to add <em>permissions<\/em> and <em>meta-data<\/em> to your\u00a0<strong>AndroidManifest<\/strong> file.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/FilHazer\/f0ae1d4b8262bcd61b92.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/FilHazer\/f0ae1d4b8262bcd61b92\">Gist<\/a>.<\/noscript><\/div>\n<p>&nbsp;<\/p>\n<p>Create a new xml file, called <strong>google_maps_api.xml<\/strong>, for your previously geneated api key in the <em>values<\/em> folder<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-49\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_fragment_init_map-300x126.png\" alt=\"map_fragment_init_map\" width=\"300\" height=\"126\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_fragment_init_map-300x126.png 300w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_fragment_init_map-400x168.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_fragment_init_map.png 562w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>and add this lines\u00a0into <strong>google_maps_api.xml<\/strong><\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/FilHazer\/d4e30da14966c741aaa9.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/FilHazer\/d4e30da14966c741aaa9\">Gist<\/a>.<\/noscript><\/div>\n<h4><\/h4>\n<h4><\/h4>\n<h4><strong>Step3: Implement Maps<\/strong><\/h4>\n<p>In the Navigation Drawer Activity initial you have a lot of unneeded junk.\u00a0I remove the most and just let one menu item called <strong>Maps<\/strong>.<\/p>\n<p>Looks\u00a0like..<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-75\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/init-169x300.png\" alt=\"init\" width=\"169\" height=\"300\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/init-169x300.png 169w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/init-768x1365.png 768w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/init-576x1024.png 576w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/init-400x711.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/init.png 1440w\" sizes=\"(max-width: 169px) 100vw, 169px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Adding a new layout <strong>map.xml<\/strong>\u00a0and create a MapView<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-36\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/add-_map_layout.png\" alt=\"add _map_layout\" width=\"260\" height=\"133\" \/><\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/FilHazer\/9109ee28c334488224f5.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/FilHazer\/9109ee28c334488224f5\">Gist<\/a>.<\/noscript><\/div>\n<p>&nbsp;<\/p>\n<p>In the next step we initialize\u00a0the map in <strong>MapFragment.java<\/strong>.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/FilHazer\/ebc13a5e9601ff369999.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/FilHazer\/ebc13a5e9601ff369999\">Gist<\/a>.<\/noscript><\/div>\n<p>&nbsp;<\/p>\n<p>Now you should able to see the Map in the App.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-76\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map-169x300.png\" alt=\"map\" width=\"169\" height=\"300\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map-169x300.png 169w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map-768x1365.png 768w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map-576x1024.png 576w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map-400x711.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map.png 1440w\" sizes=\"(max-width: 169px) 100vw, 169px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Additional i\u00b4am\u00a0going to add a marker\u00a0and zoom in to it. You can set the zoom level between 0 and 19.\u00a0<em>0 = lowest zoom level (whole world)\u00a019 = highest zoom level (so near as possible)<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>Just add these lines into the <strong>onMapReady()<\/strong> method:<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/FilHazer\/b043b4599d7c9615eedd.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/FilHazer\/b043b4599d7c9615eedd\">Gist<\/a>.<\/noscript><\/div>\n<p>&nbsp;<\/p>\n<p>Build and Run..<\/p>\n<p>Et Voil\u00e0, la Map \ud83d\ude42<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-77\" src=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_marker-169x300.png\" alt=\"map_marker\" width=\"169\" height=\"300\" srcset=\"http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_marker-169x300.png 169w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_marker-768x1365.png 768w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_marker-576x1024.png 576w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_marker-400x711.png 400w, http:\/\/filiz.it\/wp-content\/uploads\/2016\/01\/map_marker.png 1440w\" sizes=\"(max-width: 169px) 100vw, 169px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>In the next Tutorial i\u00b4m\u00a0going to add Geofence and visualize\u00a0that in the Map.<\/p>\n<p>You can find the SourceCode <a href=\"https:\/\/github.com\/FilHazer\/Maps\">here<\/a>\u00a0on GitHub.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Note<\/strong>: Just tested on API Level 22 and 21<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this Tutorial i\u00b4m\u00a0going to create an Android app to\u00a0display\u00a0the Google Maps on a Fragment. Also i\u00b4m\u00a0going to set a marker on an\u00a0selected\u00a0position. Step 1: Create a new Android Studio Project For the sake of this tutorial we set the API Level to 22, but lower Levels should be fine, too. Because I&#8217;m going to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":82,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[5,6,7],"_links":{"self":[{"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/posts\/10"}],"collection":[{"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":56,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":193,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/posts\/10\/revisions\/193"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/media\/82"}],"wp:attachment":[{"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/filiz.it\/index.php\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}