Add a Google Map to your Flutter app - Geocasts

oh hey you caught me feeling pretty relaxed I'm so relaxed because I only have to maintain one code base to cover my Android iOS and web experiences I've been using flutter [Music] the flutter framework is a multi-platform UI toolkit that's powered by the dart platform that means you write your code in Dart and flutter builds native Android iOS and web interfaces from that single Dart source flutters widgets incorporate important platform differences like scrolling navigation icons and fonts to provide full native performance if you'd like to learn more about flutter check out the links in the description below you can use the Google Maps flutter plugin to add maps to your application based on Google Maps platform data and imagery by the way I've linked the tutorial version of this video in the description so you can copy the code more easily as we go along you'll quickly learn that user interfaces in flutter are composed of widgets we're going to use flutter to build a mobile app featuring a map widget here's what it'll look like when we're done first you'll need to set up your flutter environment you'll need the flutter SDK and a text editor the flutter documentation will walk you through setup steps to install the flutter SDK on your computer and set up your test devices next I'll set up my code editor I'm using Android studio here but you can use your preferred editor here I'm installing the flutter plugin to Android Studio the easiest way to get started with flutter is to use the flutter command line tool type flutter create and a name to generate all the required code for a simple starter app you can also initiate this from Android Studio using the file menu selecting new flutter project choosing flutter under generators and selecting the platforms you want to Target now you'll use the command flutter Pub ad Google Maps flutter to add the Google Maps letter plugin as a dependency to your app if you're targeting Android or iOS you'll need to edit basic configuration files for those platforms for example here's one line you'll want to specify in the build.gradle file in Android similarly you'll want to specify which platform version in the Pod file for iOS you'll also need to add your Google Maps platform API key to important files based on the platforms you're targeting this involves the Android manifest file in Android the app delegate file in iOS and the script loader in a web page the snippet here shows an insecure way of adding your API key to your Android manifest file so I recommend using the secrets Gradle plugin instead see the link in the description for instructions to update this with the secrets Gradle plugin one of the recommended best practices for securing your API Keys is to use a separate API key for each platform and you can do that by adding different API keys to each of these files each API key can be restricted to just one Android package name iOS bundle identifier or web domain now you can add a Google map to your app backup under the lib directory there's a file main.dart where the application source code goes at the top of the file import the Google Maps flutter package that you installed as a dependency earlier the file has some default code for the starter app to feature a Google map you have to change the default code for a stateless widget to a state full widget because a Google map holds state then Define what a state looks like for this widget this is where you specifically add a Google map controller when you override the build method for this stateful widget add the Google map to the body of the widget a map needs to describe the initial camera position defined by a center called the Target in the flutter plugin and a zoom level these coordinates correspond to Sao Paulo in Brazil you also need to specify the Callback method to call when the map is done being created so we call that on map created in the Callback we assign the Google Map controller to the map controller that's it run the flutter app in your emulator or connected device to see that beautiful map now we're going to add markers to the map to learn how to do that let's take a look at the reference documentation for a marker I'll find that by going to the home page for the plugin and clicking on the link under documentation for the reference documentation click into the library for Google Maps flutter and you'll see a list of classes in the library you'll see the classes for Google Map and Google Map controller that we used earlier so you can learn more about the options for both of those and if you scroll down further you'll see the marker class you can see that marker requires a marker ID property and we can also provide the position property to specify where it should show up on the map back in the main.dart file we're going to literally add the marker to the Google Map object that you created earlier below the initial camera position property Define the set of markers that belong to the map in that set these lines construct a new marker giving it an ID of Sao Paulo and the city's latitude and longitude for the position as soon as you save your file flutter hot reloads so you can see the new marker just for funsies I'll add another marker to the set for Santiago in Chile and if I zoom out or pan over on my emulator I can now see the marker on Santiago 2. now I'm going to challenge you using that same reference documentation see if you can figure out how to add an info window to the marker you just made info windows are the little window that pops up with extra information when you tap on a marker in this challenge try adding an info window that shows the name of the city that the marker corresponds to I'm giving you a hint of where to look in the marker class documentation let me know how it works out for you in the comments below thanks for watching and happy mapping [Music]

Channel: Google Maps Platform

Views: 10,956

Keywords: google map flutter, google map dart, map in flutter, pin on a map flutter, multi platform map, cross platform map, maps api flutter, maps api dart, maps package flutter, maps package dart, maps plugin flutter, map plugin dart, Google Maps Platform, Google Maps, Add Google Maps to your app, Adding Google Maps, code Google Map, Map API, Google Maps API, API Keys, Maps Developer, Maps Developers, Flutter

Id: 54eX4wx2je0

Length: 7min 1sec (421 seconds)

Published: Tue Sep 26 2023