Ionic 5 Google Maps: Get started & create custom markers - Part 1

in this video I'm going to be showing you how to integrate Google Maps in your ionic application we're going to be creating an application with a Google map complete with these custom markers that have information windows when clicked and in a second part we'll be able to use Google Maps Navigation so stay tuned if you like this channel and our content please head over to our online store code swag code at UK forward slash shop which has a shop especially for developers where we sell cool tech like this 2 terabyte nvme m2 SSD from Samsung which is blazing fast it has read and write speeds of up to thirty five hundred megabits per second and all kinds of other awesome tech so please head over to the store and support this channel so the first thing that you need to do is to head over to the website console dot developers.google.com and it's going to open the last project that you are working in you need to make sure that you are logged in to your Google account and then again proceed so if you come here to the top left corner on the down arrow button you can see a list of your projects and you can create a new project [Music] so here's the create project button okay now we can select a name for our project so I'm gonna call this code so I mapped denim so I'm going to call this the code swag map demo and I'm gonna leave the organization like and click create [Music] [Music] [Music] [Music] okay so we need to refresh to view the newly created project [Music] okay so after having gone back to the dashboard for the dashboard you just need to go to the navigation menu maybe add services and then dashboard and you'll see a list of your recent projects so let's go to code so I could map demo right so we need to select up here where it says enable API and services and this takes us to the API library so we want to click here it says Maps JavaScript API and then next click enable after the API has been enabled we want to click on this credentials tab and then we want to click on credentials in api's and services in order to create new credentials when the page loads will click on create credentials and we want to create an API key so this creates our API key so we want to make sure that we copy it and save it in a safe location so next we need to head to our command line okay so here we are in our command line and we want to initiate a new ionic 5 project so we do that by running the command ionic start and press enter and we'll be prompted to select our framework we're going to use angular and we need to enter a project name and we need to select a starter template we want to use the blank template so that's going to download and extract the blank starter we want to I'm just going to say yes to this just in case to integrate with the capacitor but I don't think we'll be making use of capacitor in this project okay so we want to declare in creating an ionic account I already have one and that's it our project has been created so next we want to navigate into our project folder we'll do that by CD and the name of our folder and that's it we're inside our folder I'll just clear the screen okay so next we want to open the project in our code editor I use Visual Studio code so with Visual Studio code you can simply type in code space and a period press ENTER and that will open your project in Visual Studio code so the next step is to look for a file called index.html we'll find it under source and here it is index.html and what we want to do now is to enter a script tag inside the head so inside this head section we want to so this is the script tag that we need to enter and the source and then here where it says key and then equals we need to paste in the API key that we copied so let's paste that in so if you require this text don't worry if you check the description there's gonna be a link to all this stuff that you need to type in so no need to worry about that everything is available so okay after we've entered the API script we need to also add a sync defer all right so that's it let's press ctrl s or command S on a Mac in order to save and that's it let's close this so the next step is we want to go to source and then app and home page and we want to open up home dot page dot HTML we're also going to be making use of home that page dot a CSS and home dot page dot t-- s so just open these one time and close this sidebar so in home dot page dot HTML I want to delete all this content except for the header okay so after deleting all the content inside content I want to replace it with a div with hash map and we're gonna give it an ID of map and I'm gonna save that next we want to go to the typescript file home dot paged RTS and the first thing that we want to do is to import the view and element ref casas from angular core okay so after the imports but before this at components decorator we want to type in declare VAR google any so we just need to do this because when we are calling the google api you may get an error saying google is undefined so we do that in order to avoid that error so inside our home page class we need to create a variable called map of type any okay and then we need to create a method called show map and this is the method that we're going to call in order to display our google map you okay so this is the code that we need to display our map let me just run through it so first of all we import the classes view child and element ref from angular core and we declare that variable that I was talking about which we're making use of down here this Google variable so what we're doing is inside the class we are creating a variable called map and this is gonna hold our map and using this view child decorator we are grabbing onto the map which is I believe this one right here and we are also making use of element ref so inside the show map method we are first of all creating a constant containing a location so this is a latitude and longitude based location which is going to be the starting point for our Google map so our Google map will be centered around these coordinates and then these are the options for our map we are telling it that this center should be location which is the coordinates here this is the initial zoom level of 15 and this option here the disable default UI that means that when we render our map it won't have the zoom in and zoom out buttons that you usually have with a Google map so that means we're gonna have just the map only and no UI controls that come to fault with Google Maps and then we're saying that this dot map this map variable here is now going to contain a new Google map which is containing this map element ref and also containing these options so this part is what actually renders the map this part contains the options that we are using to customize our particular map and then finally we have this method here called ion view did enter now iron view did enter is one of the ionic lifecycle methods I think I'm gonna create a video about this in future about the ionic lifecycle but essentially what ionic puted enter does or what ionic does is that each time we open the page ion view did enter this method will be run so each time we open our home page this dot show map method will be called and this dojo map will create a new map using these options and render it on to this div that we created here so that's it this should initially render our map so let's press ctrl s on a with on a Windows machine to save or command s on a Mac and then let's run this application in our browser so in order to run the application in our browser we need to head to the command line and inside our command line we need to run the command ionic serve so that's going to build our application and run it in our web browser okay so we're getting this Google is not defined reference error which is what I was talking about before but usually this happens I'm not sure why it happens but the quick fix is we'll need to stop our server and then just restart it again so let's do that so going back to the command line we need to press ctrl C that will cancel the running process and let's just say why to confirm and let's let's go back and in the code editor I just wanna make a quick you know let's just let's save that okay so we just want to restart the ionic serve process okay so the okay so everything is fine here in the console there's no error message but we're not getting anything in our map here so okay I know what the problem is we need to head back to the code right so the problem is that we need to so this div right here doesn't have a height that's why nothing is showing here it has a height of 0 so the fix is to go to home that page dot s CSS and I actually want to make this the first entry so we need to select that map and give it a height of 100 percent so we should save this and when we get back to the browser you'll find that the map renders as expected okay so this is awesome we have a Google map it's running as expected and yeah that looks great so we have the map centered around our chosen location so next let's look at how we can add custom markers to this map so we want to put our own custom markers in our own locations so for that we need to head back to the code and we're gonna be working in home that pages RTS okay so like I showed you in the beginning we want each of our markers to have an info window so we need to create a variable for those info windows so we're gonna have info windows and it's gonna be of type ne and right now I'm going to set this to an empty array next we want to have an a very an array variable called markers and this one is gonna contain our markers and I'm going to set this equal to this list of locations that have already prepared so the array is so this is basically an array of objects and each object represents a marker the object has a title and a latitude and a longitude you can actually put any other custom information that you may want like for example a description of the location or whatever but I just simply have a title and then a latitude and longitude and then we're going to use this latitude and longitude information to place it at the appropriate location on the map and also the title so that we know which marker we're actually looking at and then both and then all this information is gonna be in the info window so when you click on the info window it will give you the title and the latitude and longitude all right that's great so next we need to create a method that's going to place the markers on our Google map you ok so I have created this method called add markers to map and as you can see here we have this squiggly this red squiggly line and I add info window to maka the method doesn't exist yet so let me create this and then I'll explain everything you okay so we are done creating the necessary functions let's just go through all this code and I'll explain what it all means okay so once again we want to add markers custom markers to our map complete with info windows so first we have this method called add markers to map and that method takes in and it takes in a parameter called markers so if you go up here you remember that our markers are the markers array is an array of objects all right so it's gonna take in that array and then what we're doing here is we're looping through each of the objects in that particular array let me adjust my screen up here so that we can see so one object so we have this object here and down here we're looping through we're looping through all the objects so we're saying let's marker of markers so this marker is then gonna contain that object so the first thing we're doing is we're creating a variable called position and then we're using the Google Maps let longitude class in order to create that position object so then we use the latitude right here and the longitude from the marker in order to create this position object and then next we are creating a marker object from again the Google Maps API library so we're creating a marker object we're calling it map marker and we're setting its position to be this position objects that we created up here right so this position object is going to be the position property of the marker object the map marker object and the title of the map marker is going to be set to the value of our marker title so this data right here is is now gonna be the title of our marker object and then we have some additional properties that we are adding I think these are the compulsory properties every marker needs to have a position and it needs to have the title and then this is additional information that we are adding we're adding in the latitude and the longitude we could have very well have had a description property so for example we could have a description for the Canadian Embassy and then we would add it here we would add the description here so that when our marker is opened it can have a description and then we have our map marker object and now we are attaching it to the map using this set map method and then we are attaching it to our map this dot map which is the map up here which is the actual map that we are rendering in our view okay so back down here and then finally we are adding an info window so we're using the add info window to mark our method and we are taking that marker that we created and we are attaching an info window to it so this add info window to marker is another method that we created so if we come down here I'll explain the method right so for every marker that we are creating we'll pass in the marker object to the add info window to marker method and the first thing that we do is we first create a variable called info window content so our info windows they render regular HTML so we have a div which we've given an ID of content we have an h2 header and the h2 header we are assigning this marker title so once again if I scroll up this title of our marker we are putting it inside an h2 and then here we have to paragraph tags and we are attaching the marker latitude and the marker longitude right here so as I was saying before we could have had a description inside this object so what we simply need to do is we would put in some mock-up that would contain the description all right and then we close our div tag here so this whole part this whole thing over here is some HTML markup and these variables where we're putting in the custom information for each marker so all of this is gonna get assigned to this info window content variable so once we've assembled our info window content here we are actually creating the info window the info window object right so we have an instance in the we have a class called info window inside the Google Maps API and then here we are creating an instance an object an instance of that class so it has a property called content and the content for each info window is going to be this that we create the markup and the particular very the markup and the particular variables for that particular info window all right so after we have so we have created the info window right so for each marker that we're passing in to add info window to marker we want to add an event listener so the we use the add listener method and it takes in two parameters the first parameter is the type of listener so we are putting in a click listener and the second parameter is the function that we want to run each time that we have the click listener activated so each time that we click on a marker we want to first of all close all info windows that occur we open and then we want to open the particular info window for this marker inside this particular map and then once we have attached the click listener to our marker we want to take the info window and we want to push it into our array of info windows so if we scroll up here remember we have this empty array of info windows so that means that each time we add an info window to a marker we then add that info window to our info windows array and then finally we have this method for closing all the info windows so remember each time we click on a marker we want to first close any open info windows so to close the open info windows all we are simply doing is we are looping through these info windows inside our info windows array so all the info windows that have been added into this we want to loop through that and close any open info windows so we loop through all the info windows we close them and then after that is done after we closed all the info windows then we open the particular info window that we want so we do this so that we avoid having two info windows open at any one time so that means at any one time each time we'll click on a marker it opens only the info window for that particular marker all right so that's great let's press ctrl s to save our command s on a Mac and let's open the application in our browser and test it out ok so once again we are having this era that Google is not defined like I showed you before we simply need to restart our server this error only occurs when you're testing in the and the browser it won't happen in a live application so let's go back to our server in the command line so we just press ctrl C to cancel yes to confirm and then run ionic serve once again and this will reopen another instance of the test browser it's a bit annoying but that's one of the bugs with the Google Maps JavaScript API okay we have our map open but nothing is happening our info windows are not showing that's because I made slight oversight what we need to do is we need to go back to our map you know show map variable and make sure that we are adding the markers okay so we are back in our code and we need to go to the show map variable and right here after rendering our map we need to add the markers to the map so I just simply up here I just created the method but we're never calling the method so we need to call the method down here and we'll say we'll say this dot add markers to map and add the array of markers okay so now after we save this and reload our page everything should work okay so that's it our info windows are now rendering as expected so as you can see we have our title here's chop-chop Brazilian steakhouse and it's an h2 header and we have our latitude and longitude as paragraph telex if I click on another marker you can see that the old marker closes and the new marker opens which is the behavior that we expect and this is the case for each infowindow I can also close the info window with this little X right here in the top right corner and also if yeah if I click on anything else and the map also nicely moves to center around the info window all the code for this tutorial is available on the code swag website just click on the link in the description below and you'll be able to access the code repository when you do download to the code to your machine make sure that you register a new Google project and you use your own API key because I'm gonna delete my project and you won't be able to use my API key thank you very much for watching this tutorial in the next tutorial we're gonna add a button here for navigation so when we click on a particular marker inside the info window we'll have a little button that if we click we can navigate from our current location to the location of the marker so make sure that you've subscribed to my channel so that when that tutorial is up which is gonna be in the next few days you'll get a notification so make sure you hit the subscribe button click on the little bell icon so that you get a notification when that tutorial is up please make sure to like this video and share it with your friends and if you love the tutorials that I create and you want to support this channel so that I can create more content please head over to call swag code at UK forward slash shop I have a shop an online e-commerce store for developers where you can buy awesome gadgets and awesome merchandise especially for developers thank you very much and see you next time you

Channel: Code Swag

Views: 26,561

Keywords: ionic 5, google map, google maps api, custom markers, ionic maps, ionic for beginners, ionic geolocation, ionic geolocation tutorial, ionic geolocation example, ionic google maps tutorial, ionic google maps, ionic google map integration, ionic 4 google maps, ionic 5 google maps, ionic 5 google maps tutorial, cordova google maps tutorial, ionic map markers, ionic map navigation, ionic google maps directions, ionic 4 google maps marker, google maps api ionic

Id: gSaDDxLbKSs

Length: 33min 57sec (2037 seconds)

Published: Tue Apr 21 2020