Google Maps New Advanced Marker in Ionic Angular App | Maps Javascript API

[Music] Hello friends in this video I'm going to teach you how to work with the advanced Google Map marker because the earlier marker that Google used to provide is deprecated now and they have launched a new Advanced version of it so that is called Advanced marker we are going to check that how to work with that into our I application or with an angular application using the JavaScript Maps API so let's get started with that now at first you need to create a new project this is the command you need to run for creating a new project iic start then the project name then what kind of project you want blank project or any other tabs type then the type I have selected angular and I'm using a Stalone project that is why that's just Stalone if you don't want to use the Stalone one you can pass no Stalone or you can select their NG modules or Stalone let's get moving with that now my homepage is cleaned up everything is clean the CSS is clean now we will integrate our Maps one for integrating the map you need a Google Maps API key which I have already told in my previous videos how to get that if you do not know how to get that link is shared in the card one you can just click on the I button and you will be redirected to that particular video now so I'm not going to teach you that and in the index.html file we are going to directly integrate that into our script so this is the URL that you need to pass so maps. googleapis.com slmap API then your API key you need to pass it here the Google Maps API key that you get and after getting that you simply need to pass the libraries in the library marker is must because in the latest version you need to pass the marker in this particular way and if you want to use any other libraries you can simply pass comma and like places you want to use you can simply pass it in that particular manner after that the language I have passed and then a call bag is being passed in such a way that it won't give you any errors or any warnings actually after that the final thing is the loading ASN so asynchronous loading is very much important otherwise you will get a warning that this needs to be enabled to show the map after doing this you are good to go with the setup of your Maps API into your application now you can simply use it in the wherever you want in your application but I'm going to start off with a component for the map one to show the map at first for that I will go here and create a component so ionic G for Generate I'm going to create a component C for component and then the location will be within the homepage I will create a component called map in this particular way this is created now which you can just see here right once we get that done I just need to Simply replace it with a div where we are going to show show our map so this will be a div in which I'm going to pass a class and an identifier called map now this identifier I'm going to use it in typescript and this class we are going to use for Designing our map how much should be the height and everything any transition we want so all that things we are going to do in the scss part like the one I'm going to show you right now is this particular designing part where I have given position to be absolute height and width of 100% so that it can the full height and width you can remove the position absolute if you don't want it to be passed still it's going to work background color transparent I have given and opacity of zero and a transition of 150 milliseconds EAS in so that it smoothly Transit from opacity 0 to opacity one why because I'll be giving a condition that it will only show up when we get the marker and everything into our application then only it's going to show so that is why this particular class is being used so this visible class we are going to use it later on I'm going to show you that you don't need to worry about it just think in that way and if you don't want this opacity to be zero at the very beginning you can simply pass it here opacity one and you're good to go simply remove this one that's it but I'm going to keep it and I'm going to show you how it actually works and this m position absolute I'm going to pass it up because there were some reasons earlier why I used it but uh right now without that also it will still work pretty fine but still I want to keep the same stuff only all right after doing that in the map. component.ts file what am I going to do let me show you at first I'm going to declare where Google to use the Google Maps I'm going to declare it up now I can use google. maps anywhere I want so I'm going to start off with a view child for the identifier that we have already passed to our div in the map. component. HTML file this is the one right so this is the identifier that I have passed and because of that only this view child is going to work pretty nicely for us now import the things which are needed after doing that what's the next step what all things I need so I'll be needing some variables here first of all the center any location in DHI I have just passed it the latitude and longitude you can simply change it as for your requirement then a Google Maps one so that we can use in different functions directly without having to pass Google do maps everywhere if you don't want it you can simply skip that too and then uh map we will be keeping our map in a Global variable here that is why the marker also same the global variable one then map listener and marker listener we are going to use two listeners here that is why this listeners will come into play and this intersection Observer I'm going to explain later on because this is very interesting to work with now I'm going to start off with a function here called load map which will help us to load our map into this project now within this particular function I'm going to use maps google. maps. import Library within that I have to pass maps in order to call the map here okay this is how it needs to be done within with the latest Google Advance marker now few things I'm going to show you let me enlarge it these are some of the links for the advanced Google Maps marker this is how you can use it Advanced markers and google. maps. marker. advanc marker element that that is what we have to use here this is the class within which we have lots of properties these are different properties which we can pass directly into our Advanced map marker so yeah these are the methods and these are the events that we can use so lot of things available which is available in the documentation properly you can simply check it out and you can simply search on the internet regarding Advanced markers of Google Map you will get this links there this is the documentation official documentation of Google where I'm already watching it and yeah what's the next one now how to add an advanced marker this is a document for that using the maps JavaScript API for web so this is how for typescript you need to do that's what we have done so far for the maps one and we are going to implement this one too but I'm going to show you a little bit more about it for the CSS you can play around with this stuff and for the HTML well you can just simply look at it how to pass the key they have done it in a different way but I am using directly the URL that's going work pretty fine so you don't need to worry about it and you can look into the customization part also there is customization Advanced markers that are available you can have multiple markers even the colliding also you can simply track it down because there is a property called which one was it coll cisal Behavior so if there is any Collision then also you might do something regarding that we are not going to track that out but yes that is an option which you can explore more I'm just going to show you how exactly it works and also what is the problem in the earlier one what how we get the warning so this is how it can used you can simply check it and this is what animate markers using CSS if you want to animate just like the drop animation you have to use this particular stuff here that's where this intersection Observer comes into play we are going to work with that also so I'm not going to do go in depth of it how to do that because we are going to implement that part okay so I have shown you the little brief about what are Advanced markers let's Implement that up into our application I'll get back and this time I'm going to call my native element which is the map element ref that will indicate to our div that's what I'm going to have here and after that I need the location also but in the form of latitude and longitude so I'll get the let long in this particular Way by passing the center latitude and longitude in this way all right so this is prepared because this location I need to pass the next thing is very very important where we are going to initialize our map This is how we do that so I'm storing it in a global variable called map here where I'm initializing the map with this particular native element and I'm passing the center location Zoom I have passed at 14 you can change it as per your requirement and the most important thing is which you need to pass otherwise this is not going to work the map is not going to work is this map ID if you don't pass the map ID the map won't show up which is very important and this should be any kind of a code that you can simply pass you don't need to pass anything which is like already available or something or just pass something okay then it's going to work you can just try something with that that as per your requirement these are some of the fields if you can simply pass it up if you want to but I don't want to use anything I just want to show all the features that are available so I'm just commenting all this skiing for you so that you can try it out once our map is ready we need to render this map so for rendering what I need to do I need to inject something here let me just do that let me inject in this particular way I'm going to do that you can pass it in the Constructor also private renderer column in the renderer too but I'm going to use the inject function to implement that up that's going to be easier and almost the same part but yeah I prefer the latest version that is being produced by the ionic team for using the inject one I I'm thinking of using that in a long run that is why I'm doing so after that is done we can simply use it here now in the render what exactly I'm going to do I'm going to render to add the class called visible remember visible class that we passed in our map. scss to make the opacity one so as soon as the map is ready we are going to make the opacity one that so that it can be seen on the screen right now you cannot see anything on the screen because we haven't used it in our homepage HTML file so it's time to use it up since I'm using the Standalone project so I need to pass it in my component.ts file in the Imports one the map component to use it all right once that is done we will be able to use it after I make it a St loone one because in the map. component .ts file this is not St alone as of now I think yes so I need to make it St alone only need it for St alone project not for the not for the NG modules project there you can simply use a component or you can simply pass it in the Declaration part of the homepage module. TS file and you are good to go after that is done what I need to do I need to go to homepage HTML file and here I can simply Pass App map that's the identifier or the selector for the map all right once that is done let me pass a class here where I'm going to pass a let me call it map and in the scss I'm going to access this map class where I'm going to pass height to be let's say 100% And even if I don't do that I think still it's going to work let's try it okay so I'll just comment it up now in the map. component.ts file I just need to do one thing and we are good to go so in the NG after view in it I'm going to call because in the NG on in it sometimes it doesn't work properly so after view in it is fine I'm going to to load the map in this particular way let's check it out all right I think it was showing and it got away let me pause this class now still it's not working there we go you just need to restart once if it is not showing up it's going to work properly all right I forgot to pass the uh original key also that is why it was not working so I just pass that in the index.html file now it's fine in the homepage CSS if you don't pause this up still I think it's going to work yes it's going to work but I think it's be better if you pass it to be on the safe side want to reduce the highight to certain extent then you can do that up let's try with 30% okay so remove it and pass it here the height to be let's say 50% and there you go you have to change it from here then only it's going to work properly and I can remove that one so it's working fine so yeah I can keep it in this we make it 100% only I want to show the full screen one here okay so so map is loaded properly first part is nicely done let's move to the next part which is for adding a marker in order to add a marker after this is loaded I'm going to call a function called this do add marker where I'm going to pass the location let's create that function here Manner and pass your location we got by demanding this particular let long you make it of type any for the time being and here I'm I'm going to pass the advanced marker element get rid of the error and this will be Google do maps fine that's how it's going to work so this Advanced marker element is responsible for having our marker this is a library that is inated now I will create a marker here in this particular way using this Advanced marker element class and I'm passing the map here along with the position and making the draggable to be through GM be dragable needs to beit dragable okay after doing that you see a marker red color marker here this is how the marker is coming up so we have implemented the second part which is showing the marker now I'm going to show you the problem actually that we were facing with the earlier marker so in order to show you that marker the earlier marker let me comment this particular code here and I'm going to implement the earlier marker here so this is how we use it earlier Google do maps. marker where I'll pause the location map drag ability through and an animation also directly we can pause the Dr you've already seen let me reload it just check it out it working fine right so yeah but here we get a warning this warning as of February 21st 2024 this Mar is deprecated so please use Google's Advanced marker element that is why I'm using the second one this the earlier one and we are now using this one here okay hope you are getting it so the third step is also done I have shown you how to use the earlier marker and what was the problem with that let's move on to the fourth step which is making our marker customizable so in the customize section how we are actually going to implement we have an option to pass pin element within this particular one which is another class which you will simply check it here here there is an option of pin element in the documentation just scroll down this is the one pin element class so it represents the Dom element consisting of a shape and clip so you can work around with that there are a lot of options that are available within that you can pass the background border color and G element you can pass HTML element you can pass there and the scaling also you can play around with so let me just show you an example of how to implement that up let me create constant here which will initialize our pin element class where I'm passing the background green color background scale of two and twice as the size and all colors almost green then pass it here I'm going to use content property in which I'm going to pass marker pin do element right once I do it up let's check it out here you can see this is getting bigger and color is changed so you can play around with now let's say you don't want to pause this coloring or any other stuff you pass some custom images instead of that well you can do that too so in this particular one you need to comment this up if you don't want to use this element one you can simp that up make a copy of it that I can commment the other one for you hope it's clear now you want to use spin element you can simply uncomment this otherwise this is fine so now I keep in a commented Manner and next you can simply use another content but I need to create one using the HTML element I'm going create that so in order to create that app I will use another constant called marker icon which will be equals to document. create element I'll be creating an image element here in which I'm going to pass the source to be of a PNG uh image that I already have in my assets one in the icons this is the one which I'm going to use so what I need to do here is I'm passing the height and width of this particular ver layer on WID there like the way we do for a particular image with the CSS SP so after doing that to pass here content once again column then the marker icon you need to pass it here and you will be able to see this particular icon want to increase the size of weight you can change the height and width you will be able to see a bigger size that's how it is working all right so I have shown you you how to pass the marker along with the customization whether it is the color one HTML element or by passing a image too so this all things you can play around with but this is not it the next step which we are going to work with is very interesting because I'm going to show you how to make this particular marker dragable and also if you click somewhere else like if you click here the marker will go there and it will come to the centers so so you get the proper location of there that's what we going to let's see how it can now I'm going to implement two listeners here one is for the map listener and one is for the marker listener just the code quickly explain you right nowar first of all the marker listener will be called where this do Marker this is the marker that we are using do add listener there is a function called add listener there you can simply check it in the documentation also if you want to and you will get it there where it is this is the one this is the add listener one which you can simply apply or there is ad event listener also but yeah this is the one which I'm going to use into our application so let's try it up get back and here I have implemented the same I'm using the drag and event and you can just check the events also which you can simply pass in the document and it's already given just check it out cck event is there the drag event is there some other so whatever the event will get triggered I can simply use it I have loged the latitude and longitude you can get it in this particular way even do let long you are going to cre within that let function will give you the latitude and LG function will give you the longitude if you want the marker to be removed on click of on the marker you can simply pass this marker. map will be equals to that it will be removed on click off it so if I click on the marker it will be removed that is the code for that if you want to use it it now I don't want to do that I want to change the position of the marker and along with that I want to move the map to that particular that is what I have done so marker. position I have set to the latest location that we get out of it by dragging it and marker. map will be initialized to this and then finally map. pan will redirect you to that particular location we'll Center it up then there is a map listener also where I'm going to listen to The Click event here map dot listener and in the click listener whenever anywhere you click on the map the marker will go there and for doing so I'm going to change the marker position once again and set the marker in the map which will be to do map and move the map to that particular location making it a center of it how it needs to be done if you want to I have already loged the value of latitude let me open this particular one so that you can see what the value is coming up let's try it now so let me drag it to Kashmir gate when the Kashmir gate you can see map is moved to the center and we are getting the latitude here all right so it is changed again if I click on this one board let me click here look at this map is moved and the marker is also moved how it is work if I tend to remove some of the code let's say if I remove this particular one I think so let's try it now whether it works or not I'm going to just drag it and still it's working okay Che it out so without map do sorry marker. map you can still work with that this fod is not required you can skip that for but that is how we are working and this step is also completed we have made the map dragable and map takeable and sorry the marker dragable not the map map is also dragable but it's not going to work or give us any benefit right now all right so you can work with that also the marker is directly will Center up the position that's what you can do but I'm not going to play around with that so this is the stuff which I have implemented so far only one thing is left which is making this marker having some animation like the drop animations that we saw in the earlier marker when I implemented it in order to do that there are certain steps you need to follow and that's where intersection obser comes play so let's Implement that up now in order to implement that up I need to go to NG after view in it and here I need to initialize this intersection Observer which will be equals to new intersection Observer where I'm going to get a lot of entries so if you have multiple markers lots of markers you'll get lots of entries and every thing will be passed here that's how it's going to work and intersection Observer do unobserved at the very end of that so that is what it's being done and this particular drop class is very much important to be added we are going to see it or we are going to pass it in our glob scss where I need to pass the styling now styling part you can get it from here in the documentation it's paused where was it this is the one I think animation one so for the animation part I need to do CSS and this is what you need to work around all right this is the stuff which you need to copy let me copy the whole thing here okay up till here and this delete time I'm going to pass 0.5 seconds as it is given here I don't want to make it Dynamic if you want you can make it Dynamic also by passing this up root and in the typescript you can call where was it right here you can set the property for the delay time in this particular way but I'm not going to do that so let's get back and here let me pass it and make it of this one 0.5 seconds fine all right I think everything is good to go now the class is ready time to implement that up in our map page ES file the map component.ts file we just need to do one more thing here and we are done with this particular one so in the marker when it is loaded up when it is created after that I need to play around with this content part so how am I going to get that I'm going to create a constant called content which will be equals to this do marker. content create that content and then I'm going to make the op it of for The Styling one to be zero until the drop is being pass otherwise it's going to still show up the icon or so not the icon the marker which I don't want so as soon as the animation ends so it's going to remove it and make the opacity to be one all right till then that particular intersection Observer will come into play and work around so this is a constant we don't need to like remove it at the very end so I will keep it in this particular way so this is the code for animation part fine let's check it out whether it works or not there we go you haven't seen properly Let me refresh it once again and you see the drop event or the drop animation go our application we have implemented the animation part also I hope you have understood that and there is a slight easier version for that also if you want to I just paste the code if you don't want to use the intersection Observer you can use set timeout but I don't know how efficient it is this is how you can implement the set timeout functionality and it will give you the same exposure as it was earlier for the intersection Observer but I think intersection Observer is given by Google team so I think you should follow that part okay for the purpose they have done the same part only this particular way I just followed them that's it after this is done one more thing is left then we are done with this video so the last thing that we need to do is destroy our listeners which is very very important so in order to destroy I will use on Destroy here imported right now I need to use the NG on Destroy functionality at the very end here let's do that NG on Destroy and within this functionality I going to listen to this particular map marker and marker sorry map listener and marker listener and remove the listener from their particular ones from the Google I want to implement Google Maps event not this particular variable I'm going to remove that variable that is not in use anymore just remove it that anything else not in news I think everything else is in news so I'll just keep that and let's get down Okay so this will be removed in this particular way and I'm making this map listen null here similarly Mark listener null and removing the event listener here that's what we have done and this remove listener no remove event listener is only there so you have to remove the particular event you need to pass the event what you want to remove and The Listener this is how you need to do and we are finally done so you have seen how to work with the latest ADV marker of Google Map how to replace that and everything else the animation part the the image part for the I can one customization part believe all the things is accumulated in this particular video I hope you like this if you like make sure you hit the like button do subscribe to the channel leave a comment let me know what are your thoughts about this project and thank you so much for watching guys and I'm going to see you next [Music] time

Channel: Coding Technyks

Views: 3,137

Keywords: Angular, angular17, Angular 17 Tutorial, Angular Latest Version, Frontend Development, Web Development, TypeScript, ionic standalone, angular standalone, ionic 7, ionic, ionic tutorial, ionic course 2024, ionic 7 standalone, ionic ngmodule, angular 17 standalone, mobile app, ios app, android app, ionic framework, nested, nested modal, ui, ui screen, login screen, Biometric, fingerprint, faceid, Android, IOS, google maps, new advanced marker, marker animation

Id: 5Dx8pq_DBV4

Length: 27min 50sec (1670 seconds)

Published: Sat Mar 16 2024