Google Map tutorial | Flutter

Google Map is widely used in mobile application for features like marker to represent your stores or any information you want and also we use live tracking in day-to-day application like zomatoes Wiki Uber is one of the best example and apart from that we use the images across this roundabout there we go so also we use a navigation feature to route from one location to other location [Music] so here we are inside vs code with a brand new flutter project what I have done here is created a home page in a separate file and it has nothing other than its scaffold okay let's go ahead and start with adding dependency and we are going to use Google Maps flutter this package you need to install either from pop spec yaml or if you want to use this command you can do that and once the package is installed we are ready to do settings on Android and iOS platform to make Google Map work okay the first thing we want is make Android version minimum version 221 and you can do that inside build.gradle and now make sure that you are inside the app folder of build.gradle you can search for it and change the minimum SDK version to 21 and compile version to whatever latest version you have on your system for me it's 31. all right so the minimum requirement on Android side done now let's move to iOS and here you need to Define that your OS should be at least 13. so just uncomment this line and Mark platform iOS should be 13. that's it on the configuration side we'll come back later on Android and as folder to provide the API key later in the video but let's go ahead and Define the Google map view and how does it look on platform let's go ahead and check that if it works without API key just we'll try to do that so inside home page I'm going to Define Google Map as the body and this Google Map by the way is coming from the package which we have installed which is Google Maps flutter and once you add this view it is going to ask you for initial camera position parameter and that you can Define what lat long you want to Target as an initial View and of course you don't want to start with the null Island on somewhere inside Atlantic Ocean so what we are going to do create a global lat long variable or maybe constant and I'm going to provide my current location which is in Dubai silicon Oasis by the way and this location will be using couple of places so that's why I have declared in global position you can declare anywhere you want it's just a variable right so this will be our Target for the initial camera position and let's try to run the application and see what happens so here is our application running and Bam it's crashed the reason because it is asking for API key and without that API key Google Maps cannot work so what we have to do we have to go on Google Cloud console and then register a project and get the API key so don't worry it's not that difficult it's fairly simple I'm just going to walk you through the procedure to create your project if you don't have any and then you can simply go to Google Maps platform and enable the API key that's it and once you have that API key in place you can use all the features of Google Map and don't worry all the links for Google Map and Google Cloud console will be there in the description so you can follow over there and just copy this API key and put it inside your project so first I'm going to put it inside Android manifest and the one in the main folder you have to open don't open the debug or any other manifest open the main 1 and then over here where you have the last metadata you can just Place one more metadata with the name and value the name is going to be Google Geo API key and the value what you have copied from Google Cloud console same thing we are going to do inside app delegate but instead of putting metadata they have their own classes and structure pretty much it works the same way it's just one or the other way of defining the API key so what you have to do inside app delegate you define like first you import the package Google Maps and then using GMS which is Google Map service services and then provide the API key it's just one and the same thing right now at this point we have both Android and iOS platform set up completely to run Google Maps and here we have our first instance of map which is pointing to Dubai but you cannot see it because of the zoom level so I'm going to give initial zoom level to 14. you can try different values by looking at the suggestion now if you just leave those initial setup thing it's quite easy to have Google Maps inside your Android and iOS platform right it's it's cross-platform and you just wrote like this simple widget of Google Maps and provided initial camera position and that's totally it flutter makes life so easy easy and that's why I love it you know later on in the video you will see what some of the other features we can achieve with flutter easily with simple lines of code which may take ages on other platform like I can't even imagine getting all this feature done in simple lines of code so let's move to the next part where we are going to define the controller first when your view is rendered when your Google Map is ready it's going to create an event called on map created and there you're going to get the instance of controller which you have to uh you know assign it to your state level variable so that you can use it later on to provide like to move the camera to update the view and do all all sort of stuff with Google Maps cool so next up we are going to talk about the markers now marker has a very uh common use case when you want to highlight some points on the Google Map to specify some of the stores or you have some like ATM or branches you want to highlight so for all those scenarios you put a marker on the map with the specific lat long and then you can have some extra details to represent that particular marker right so here I have created a map because each marker will be represented by a unique key so that at any point of time you are not going to have a duplicate marker and that I'm going to assign to markers property inside Google Map and we have to convert to set of course because marker requires a set of marker and now where we are going to put our first marker once the map is ready so on map created event I am going to call a method let's say add marker and one thing you have to make sure over here that each marker you place on the map should have unique key you cannot have two markers with the same ID right so for that purpose I'm going to accept ID as a parameter so whoever uh like whoever wants to create marker they can provide marker ID and then some information like lat long where exactly you want to place that marker and then if you want some other information like image or some asset name you can do that as well but I'm just going to leave it for now later in the video we will handle that as well so make sure you stay tuned and let's create an actual marker over here this marker comes from Google Map package which we have included so just import it if you don't get the suggestion automatically and here what I have done I have created a marker with marker ID uh now maybe I should refactor the name because marker marker ID is being repeated multiple times so I'll just call it ID okay so with this ID we created a marker ID and then location we have provided as a position argument that's all we need to create marker and of course there are additional parameters as well which you want to Define which you may Define to get some other expected results okay so let's put this marker in our map and I'm going to use ID as a key so our markers map has one instance now one item which defines with the key ID so don't get scared if you're not familiar with map and set and how we are using the keys it's just you know Dart programming nothing a big rocket science all right so let's go ahead and restart our application to see the marker because we are adding a marker on map created event and here we have it a default red marker perfect now what if we have multiples of them how we gonna distinguish between so for that purpose we have something called info window now what it does it provides a window like a white color background window where you can provide title and snippet so the title is going to be like a bold text and snippet is something you like description of that location so if you provide that and you're going to click on that marker you will see that extra pop-up window attached to that marker now before I start with custom marker image from assets folder let me point you to additional video I have for my YouTube members where I have shown how to create customized info window like Google so join any members level to get access to that video all right now let's move forward with current video so here I'm going to customize the marker with custom asset image for that purpose I'm going to create assets folder in the root directory then there will be images folder and there I'm going to drag and drop one PNG file which is going to represent my icon right and just make sure that this icon is not too big image just keep it simple like 64 or 128 by 128 pixel so here I'm using this a small shop PNG file and also we need to register we need to tell flutter to look for images in this particular folder for that purpose you can just Define asset so simply just uncomment these lines and Prof provide the path where your asset resides it's easy thing like it's a general flutter setup you might be aware just for newcomers I'm just showing that once again okay so we have the images added we have defined uh images path to flutter now let's go ahead and try to read that asset image in the form of valid marker icon for that purpose we are going to use bitmap descriptor now this thing will sound little bit uh tedious but it's not so bitmap descriptor provides a method call from asset image where you can provide the configuration and in this configuration you can Define what is the size you want what is the color maybe I guess and then you specify the actual path where your image resides right so it is in the asset folder there's images folder and then we have shop.png and one more thing to notice that this from asset image returns a future of data so you have to mark this method asynchronous and wait for that response and once you have the marker icon right you can use that in icon property of marker widget right so let's say icon is marker icon and let's give the application run again and here we should see shop icon hopefully here we have it perfect a big round of applause now if you click on that of course you have a basic uh info window and as I said you can take membership of the channel to get access to the video where I have shown how to customize that info window all right that's a little bit of promotion now let's move forward and change this image now what if you don't have that image residing inside your asset folder and there is something coming from the internet like if you want to trace one of your friend say for example that your application supports that functionality and you want to see the live location of your friend so here in this marker instead of showing just a dummy user icon you can actually fetch image from internet and show it over here so let me show you how to do that so first of all you need a URL from where you're going to fetch the image so for demo purpose I have hosted one image on GitHub and then using network asset bundle now again this is a little bit weird sounding class because we don't generally deal with these classes so just try to copy paste this line of code you don't have to mug up or remember all those things right so we're using network asset bundle and then we are defining and when then we are passing this URL parameter then we are loading and providing the unique key which is again this URL and then loading the buffer and then loading all the bytes right there's so much information in this line of code of course it's not difficult so I've just added that in description if you want to copy it or the GitHub link should be present so you can copy from there as well and now we are going to replace our icon so I'm just going to comment the first one the asset one and then here I will say bitmap descriptor Dot from bytes now instead of using from image from asset we are using from bytes and perfect here you have a person's image as a marker to the map now if that makes you excited let me tell you about a video on my Kofi Channel where I have shown in detail how to animate this marker you can achieve features like Uber zomato or any other live tracking app alright so if you find this video helpful make sure to give it a like subscribe the channel if you haven't already and you can consider buying me coffee on the coffee link given in the description below so I will see you guys in the next one till then Happy coding

Channel: CodeX

Views: 48,726

Keywords: flutter, tutorial, how to, android, ios, ui, google map, custom marker, marker with image, asset marker, custom info window, google_maps_flutter, flutter map tutorial, live location, update marker, multiple marker

Id: EYcslTjRqCY

Length: 14min 42sec (882 seconds)

Published: Sat Sep 24 2022