React Native Maps with Marker & Callout

hey everyone what's up this is Simon from galaxy. Dev and in this quick win I want to show you how you can easily use a map view in your react native application I found this to be unbelievable easy so I wanted to do this quick video and cover the basic round in like 10 minutes so you'll be up and running with a map view in just a matter of minutes so what I did so far is I created an expo application as I want to use Expo but you can actually also use it with a react native CLI and I was using the TS template so I got file based routing out of the box I then deleted everything in my folder here uh which destroyed my layout so I now have to do another index. TSX uh putting in a default page and then also putting a new underscore layout file next to it and that should hopefully uh fix my view again I can then just return a simple stack navigation using Expo router and if I run npx Expo it should immediately bring up my preview again which I broke previously good Additionally the most important command to use the map is NP Expo install react native Maps so this oh yeah of course could like this this here is the important and the critical part that you want to do so you can check out the map view in the Expo documentation it's actually a fairly long document we're going to talk about this here in the end about the deployment uh for now I just wonder why my views not coming up uh okay yeah it's let's do this again let's just refresh this press I and here is my application now finally loading on the screen you also want to change the title so it doesn't look that ugly you can just go ahead and give your stick screen a name that it will look like this okay nothing fancy nothing map related just want to cover the basics so if we would follow the usage here and we have installed the package I will just grab that code put it in here and that was that was not what I wanted to do why is my m not coming up um probably because uh how what I did I do I should see my me I should really see my mebs oh my it was working all the time you destroyed the whole tension that was so great I just wanted to put it in and show you that it worked like in one second anyway here it is here is our map uh we can even do this easier I can remove this and use flex one in here and if you don't want uh styling just want the map to full the whole Space you can just use uh stylesheet do absolute fill and you see as a result same behavior in the map fills our view good so that is the starting point for the map you see this is on the iOS simulator using Apple maps you can if you want to you can use it usually people want to use a Google with it so in that case you can simply change this and use the provider uh and I don't recommend you use a string you're going to break break a lot with that you should use provider Google for your application if you change that immediately it becomes a Google map instead by the way this is usually focusing on what you select for the simulator uh so on iOS on your Mech device you can go to Features location and then add something like a custom location so this comes up or you can use a few of the Apple previously defin it and then it will set basically the location for your emulator so how do we work with the map this is just displaying the map so let's talk about a few of the basics the first thing that you usually want to do is you want to set an initial region for the map that means when the map loads it will focus on this region so I can now just go ahead into the map and say hey my initial region is this and now we see when the map loads I'm suddenly here in San Francisco somewhere as this is uh the initial region that I have specified this won't change so if you put this now into a state and change your initial region it won't change so you really have to set in that case uh the region so you could keep a state in here and then just use your initial region as the initial region and the state the region can be changed if you want to that would be one idea Additionally you can of course also change styling you can change a bunch of things I highly recommend that you check out the documentation here on the um on the react native map and especially the map view component so we've covered provider and region and this is all you can do really there's a lot you can do with that component uh just showing you two more things so what you could do as well is beyond that saying hey show the user location uh which will result in the user location showing up here so this is where I'm currently placed or you could also additionally add uh show where is it show my location button so now I'm of course covering this with my head but I could now use this to dive into uh where my user is currently Focus if I move away I would go back there so these are just the cool minor things about Google Maps that make the usage of the map view really really easy um beyond that there are a few more things that I want to show you so first of all I want to show you that you can also control this of course from code so what you can do is you can start by defining a me ref and then telling this use rev it is of the type map view okay and then we assign our map rev to the map here so this goes in uh actually oh can be undefined okay okay cool cool uh what's your problem with that oh it's really I mean it's an um is it the right map view from react native Maps uh mutable yeah that's always the problem with I think I used it like this before didn't I I don't want to make this a typescript tutorial so therefore I will just say that this could also be any um then we'll of course remove our typings a bit but it should work for now anyway um so let's add a button we can add a button let's add a button to the top bar I will just use uh navigation use navigation equal use navigation from the Expo router and then we can simply add a button that will call a focus map function so let's do con Focus map equals something something and then if we want to place a button to the top we could just do it like this so this is just using the navigation package and putting a touchable opacity in the header right slot that will then call our Focus map you can place a button everywhere this tutorial is not about uh about creating a button it's about the react native map so here is the focus button and if I click it nothing happens because so far we're not doing anything let's say you want to focus on a specific location so you could come up with the coordinates like this one for the green Bas stadium and then you could go ahead with the me rev. current and then you can call a bunch of features so I really hate that I can I just do it like this uh if I do it like this you would have the code completion for everything so really uh it's possibly undefined yeah I don't care right now uh and in my case I would probably pick any M to region and then I would pass in the Green Bay Stadium region so if I now click on Focus see what happens we're immediately here and seeing the beautiful Lambo field in Green Bay Wisconsin um this is just one way you can do a whole lot more if you get the reference to your map you can can call all um not the events but you can call all the methods on this so we have used animate to region but you could also use animate camera for example so if I would change this to animate camera uh we would have to change this and say uh please Focus uh the center on the Green Bay Stadium and then you could even have another object saying okay please for the duration like this like 3 seconds long if I do it like this it's not changing the zoom we should probably change the zoom in that case as well uh let the zoom change to I don't know 10 let's see yeah that's better that's a whole lot better that's even like a flying movie I like that one so you see this is the way how you could interact with your map from code this is of course only the one way it also works the other way so you could set up a function that watches when the region changes let's do a simple on region change function and we once again have great typing for all these functions usually uh only besides the my MEAP ref not working with the MEAP VI ref so I could what is this Legacy map view mutable object map view undefined is not assignable legacy ref what is this what really like what oh my um so how can we use this well we can simply plug into not the methods but the events of the map view again I highly recommend the map view document it shows you everything you should really study this uh documentation if you want to use a map so now I can go ahead and say on region change if I would use un region change this would actually be called the whole time let me show you um you see my lock is going crazy when I do it instead I probably recommend you want to use on region change uh complete that would do put a lock once when the region Chang actually has finished so really when the user is done and then you could maybe calculate I don't know new places or display new markers on the map oh that brings me to something yeah that's what I wanted to show you as well thank you thank you for mentioning that so you can of course also display markers on the map that's also a very common thing I have seen um what you might need to do maybe you want to do like a marathon and you want to display some cool uh locations along the view so I've created uh this file here this markers TS with some markers in San Francisco and some San Diego so just let to longit to the usual stuff you know and let's see how we can display that on our map because again that is just so easy it's just so unbelievable easy and that's why I wanted to show I actually felt bad about making this video but still I learned this I didn't know it and then I want to show you so this is like the classic YouTube thing I don't know if YouTube will punish me for that but anyway uh I hope this is helpful and and if it is leave up uh leave a thumbs up and of course stay subscribed for even more in-depth videos now I have changed my map view to have um something inside so now I can iterate my markers I can say markers. map and for every marker and probably I also want the index we can now create our own marker component for the key I will use the index because I don't really have uh an ID for the marker of course that is not very recommended uh you should use something unique for that additionally we also of course need some coordinates and the coordinate should be uh the marker I can just I think I can just pass in the marker and voila with about yeah well if we say like three lines of code we now get our markers displayed here none of the box I can click on them and nothing happens yeah I can I think yeah well with a double click I can of course Zoom now if you want to also make them a bit more useful you can handle the Press event on a marker as well so let's say uh Con on marker selected equals marker I will now use any because I don't really have the type for that and present an alert from react native so alert. alert and then print out the marker name now I can pass this in and use the on press here of the marker and let's see I click this and I get nothing uh I click this and I get nothing why am I not getting anything uh let's try and do a Reload uh still nothing is it marker oh yeah we need to pass that to onm marker selected right uh so UNM marker selected get the actual marker and with that boom we can do this in a better way oh no this is like going I hate it when my map turns you can actually disabled this with a settings as well so now I can click on my markers you can also change the appearance of a marker or what you maybe want is also a call out so we can dive deeper we have now nested markers inside the map but inside that marker uh let's see I want to do this with a new line inside that marker I will move the closing bracket here uh I will place a call out so that is the little wide view above the marker we can once again have something like an onpress event here of that call out and in that view you can actually have your own styling like I can say padding pading 10 yeah that's not something and then text uh Simon all right if I do it let's remove that if I do it like this we see up here and I probably you probably don't want to have like an onpress for the marker and also for the call out I think that's probably not a good idea here now we see I get this cool little popup and of course I could also just instead run like change the text font size or uh use the marker. name in here again and if I then click on the marker it would show the information and you could just create your own little call out and again the call out could also be pressed so if you want to press the call out just do another function call out pressed and then on the call out on pressed it's as easy as that let's see wondering I do actually put out a lock right yeah so if I click a marker or click this we can see this huge object here uh with all the information from actually not just the marker but also in general that point used uh on our map so I really wanted to make this a quick 10-minute video actually it went to 50 minutes already uh but showing you how you can add those markers you see actually we have them in San Diego as well nicely placed and we now have the basics covered for adding a map for uh changing some of the properties for using um code to actually control the map or react to things happening in your map you should know understand how to use markers and call outs and beyond that there are two more things that I just want to highlight the first one is that we on Galaxies have also now a full course with even more details on this like changing the map style using Google Places to um create a view like this here where you can enter something and then search for it you can change the styling and we will also talk about polygons um about drawing on the map and even clustering our map so check it out on galaxies. dev the reactnative maps course is now available beyond that this course also shows something else and that is going to production mode um if you want to use Google Maps in your app you see with Expo go this just works it just works because Expo included some keys here and made this work with Expo go however in your own application you won't have them and if you want to use Google Maps you need to set up a Google Cloud key um you need some certificates for uh Android you need to create a specific key and even for iOS you pretty much need to do the same as you need that um project from the Google Cloud API a key and all of this needs to be configured correctly in your app Json in Expo so that was just a little cevad because it won't work immediately in your production environment but if you want more information about that check out the course on galaxies and beyond that I just hope you enjoyed this quick win about react native Maps make sure you hit the like And subscribe button and I will catch you in the next video so until then Happy coding Simon

Channel: Simon Grimm

Views: 13,972

Keywords: react native maps, react native, react native tutorial

Id: _IyWSsFXLcA

Length: 16min 48sec (1008 seconds)

Published: Tue Nov 14 2023