Google Maps JavaScript API Episode 3 - Markers

hey everyone and welcome to the third video in my javascript maps api tutorial series where in this video we're going to be going over markers so you can add objects to your google map to designate points lines areas and much more and the maps javascript api calls these objects overlays so overlays are essentially just images on your map and there are many types of overlays and the overlay we will be focusing on today is markers so markers are those classic red pinpoint things that you see on google maps whenever you search a location specifically markers display single locations on the map the javascript maps api allows us to customize markers such as changing their color their shape or even use an entirely different image as the marker by default a marker uses a standard image that red pinpoint thing that you'll see in a second but we can make them display custom images instead and when we do this markers are then referred to as icons so this is just some terminology to know and because of this both markers and icons are objects of the class marker so let me first make a new one here video3.html and i'm just going to copy actually the stuff from our first video and paste it in here close this out as well and then instead of loading this let's load this with live server okay cool so we have a fresh map object right here and so as i said a marker is made with the class marker so remember we made our map with google.maps.map well a marker is made with google. maps dot marker so to create a marker we create an instance of the marker class and so the google maps marker constructor takes an object or takes a marker options object as an argument specifying the initial properties of the marker so i'm just going to make a variable called marker options set that equal to an empty object and a required key is position and so what this does is it specifies a latitude and longitude object identifying the initial location of the marker so we know how to make one of those it's the class led lng and then let's pass in the latitude and longitude eight three two and then negative eighty seven point six two three one seven seven believe that's correct and then also though another key that we need to use it's not required but this puts it on our map so see how we have we use the key map to place it on this map object here so the map that you provide in here so you had multiple maps or something is um the map that this market will be placed on and then of course we pass this into our constructor here so marker options and now you can see here it is so this is the classic little red marker and let's just say look you can see it just moving around now so let's do 45 for that let's zoom out and you can see it's all the way up here now so the map property here isn't required so you may think it would be required but it's not and the reason is that is because we can actually use a method called set map so if i end this and i do we can do marker dot set map and then of course we pass in a google maps map object and let me turn this to your original so we can see it so that's another way that we can set the marker on the map so if we create the marker but don't specify the map the marker is created but not displayed on the map so this is how you add a marker to a map but to remove a marker from a map you can you use the same setmap method but you pass null as the argument so what i'm going to do is let's just do a set timeout of course we pass in a function and let's say after three seconds because this is in milliseconds we want our marker to disappear so we'll do marker.set map to be null so let's wait and you can see it's been now disappears after three seconds so if we set map to null that's how we remove the marker from the map but just note this doesn't actually delete the marker but rather it just removes it from the map if you want to delete the marker you should remove it from the map and then also set the marker itself to null so delete it you do that and then you pass in null and that would completely delete the marker but now to make multiple markers all we need to do so say you want to create multiple of these all we need to do is create multiple marker objects so what i'm going to do is i'm going to create a triangle in lake michigan just to demonstrate this real quick so first let me center over there with this and then keep this the same so you could see and then let's zoom out to i don't know eight cool just like this and so for our first one let's change this to 42 and this to negative 86 so we have one marker up there and now if we wanted to create a second marker let's just do that marker options two equal to this and position and let's just copy and paste this here except change this to negative 87 or sorry negative 87 and then let's create a second marker so marker two equals new google dot dot maps dot marker and then let's pass in marker options two and of course let me get rid of this and then let's do marker two dot set map to be map so they didn't display because i misspelled this so now let's try that so you can see we have two markers here now and then let's just add a third one so let's do marker options three set that equal to an empty object and position this but let's just do for this one just 42 and negative 87 and then let's create our third marker let's pass in marker options three and then marker three dot set map to be our map cool so we've created a triangle of markers so that was just i don't really know why i did that to be honest i guess it was just because i could show you how you can use multiple markers so don't be afraid to do that but let's go back to just our original marker so like this but so we know we now know how to add and remove markers from our map but let's focus now on how to customize them and one way we can customize our marker is to change the image used to display a marker and remember when this is done the marker is now called an icon and to change the icon displayed as our marker we use the key or the icon key and our marker options object provided to the marker constructor so here we just use the key icon and then what we pass it is um let's say an image file that we want to use so what i've done is i've added an image file here called witcodemarker and this dot dash means basically from the current location we are in and then i'm going to do with code marker and let's hit save and i believe it's not loading because i forgot to tag on the extension so png and i still spelt it wrong so add an r here now if we can move up you can see we have this giant this giant pen that i made so this will be the new so whatever we specify is here can be the image that replaces that default red icon or that red marker so essentially what this icon property here takes is the url of an image and the maps javascript api will then size the icon automatically meaning if we zoom in and out the size adjusts respectively so you kind of saw that if i'm zooming in you can see it kind of gets smaller zoom out it kind of gets bigger but we can also set the icon outside of the constructor by using a set icon method so basically anything isn't required in one of these options we can use it later with a different with a method so we can do set icon so you could like dynamically change your icon based off this method so i do that you can see we get the um the custom one again and so of course what we pass in here again is the url to the image now let's start talking about adding text to a label and this is known as a marker label and a marker label is a sequence of characters that appear inside a marker and once again we can make this label inside the marker options object that is passed to our marker constructor so we just use the key label and let's say let's do wit codes place so i'm escaping that this apostrophe right here and let's see this and if we zoom out sorry if we hover over it you can see now we have text over here as well saying wait code's place and then of course we can instead of doing this this way we can of course like we did set icon we could dynamically do it being like set label and passing that in here and then if we go scroll up you can see we have whip codes place again and we can also set a tool tip on the marker which is essentially just the text that shows up on the hover and um basically the same way as a label so to do that to add a tool tip we use the key title and let's say um subscribe to whip code as the title and then if we and then if we come over here and we hover over this you can see we get that little tooltip so subscribe to wic code and then once again we can do this with our with a method just like so we could do it dynamically you can do marker.set title pass this in and then scroll up hover over this and you can see we get that title again and now the next thing i want to talk about is an interesting topic known as optimizing markers so optimizing a marker means enhancing performance of your website by rendering many markers as a single static element and this is useful if in your website you require a large number of markers so the maps javascript api itself decides whether a marker will be optimized for example when there is a large number of markers the maps javascript api will try to render these markers with optimization however we can of course explicitly state if we want a marker to be optimized or not and this is done with the keyword optimized so in here in our marker options object we would do optimized and then true and so this is a good time to talk about marker optimization because it impacts marker accessibility making a marker accessible basically means allowing a user to click on it by adding a click event listener and because setting optimize to true makes the markers static we need to make sure that our marker is optimized set to false for it to be accessible because remember if it's optimized that means it's static but we want to be able to work with it so let's make it so when we click our marker its latitude and longitude are displayed and to do this we first need to add an event listener to our marker with the method add listener so marker dot add listener and we will be we will go over javascript maps api events later on but for now know that each maps javascript api object exports events or exports events and we can listen for them with the google maps add listener method and the event we want to listen for um is a click event and then what we supply is a callback method that receives a mouse event of the type google.maps.mouse event which is decorated with some useful information so it's given a google maps event is supplied to our callback function and now let's make it so when we click on the marker we print its latitude and longitude in an h3 tag so what i'm first going to do is i'm going to go here and i'm going to create an h3 tag and i'm going to give it the id info and um also i'm going to change some of the flex properties here i'm going to change flex direction to column so that it will be on top as opposed to in a row but now let's go back down here and work in our method so to do this i'm going to do document.getelementbyid and we gave it the id info and we're going to set the inner html equal to latitude and then we'll add on our google maps event we can access a property lat long like this and then we can have a function lat which will return the latitude and then we can also do longitude and then add on this the same way dot flat long dot ln g so of course i'm going to be going over um all of this stuff more as we go over over events but just know for now this is how we can access the latitude and longitude but let's try this out now so let me click on this and so when i was clicking on this it wasn't working and the reason is because i need to make this a capital l so this is a capital l and this is a capital l and now let's try it again so if we click on this you can see we get printed latitude and longitude so that's a little cool thing we can do by um working with our our markers and adding events to them so that is how we can make a marker interactive and it is also a little glimpse of what we'll be learning about when we start talking about the javascript maps api events but now let's start talking about animating a marker and animating a marker means giving it movement and to make a marker animated we use the markers animation property so within here we use the key animation and this property takes an argument of the type google dot maps dot animation and actually sorry it's not a constructor but it's actually a constant and so one of the options we can pass to it is drop so let's see what happens if we do that well actually let me move the center of our map back to or to whatever it is with where the marker is so that we can see it fall better so this and this here press save and so there you go you can see it fall down so by clicking this you can see each time it loads it drops into place so this makes it so the marker drops from the top of the map to its final location when the marker is first placed on the map and so you can imagine that this type of info that this type of animation is usually specified during the creation of the marker and also as a side note when animation stops the marker's animation property will revert to null and then the other animation value that is accepted in the marker constructor is bounce so we have drop right here we also can do bounce and so you can see this makes our marker start bouncing and the marker will continue to do this until its animation property is set to null so to set the animation besides using the constructor you can use the method set animation so let's make it so that after five seconds the marker stops bouncing so i'm gonna do let's do it here set timeout and in our function we're gonna do marker dot set animation to null which will make it stop bouncing and we're going to do that after five that's fifty thousand after five seconds have passed so you can see it's bouncing at the moment and then it stops after the five seconds because we set the animation to null and you may have also guessed that because we have a setter for animation we also have a getter called get animation so we can check to see what the current animation of a marker is at a given time so let's use that h3 tag again to display the current animation of the marker so what i'm going to do is i'm going to copy this i'm going to delete this listener that we had and in here after that timer we're going to set that equal to marker.get animation so usually when we have a set like set icon set label we also have a getter of course but let me show you the animation one so let's do that there and then let's also put this out here and let's do marker dot get animation click save and you can see we have the value of one at the moment which corresponds to bounce because these are just going to be constants and then you can also see that because it's going to be null this is just set to null and we have nothing put up there so if we set this for drop i believe the value might be 0 or 2. so you can see it's set to 2. so these are just constants that represent that animation essentially now the final thing i want to go over about markers is how to make them draggable meaning making it so you can drag a marker to a different location on the map and this is really easy this is just done with the key draggable and we just set that equal to true so now if we get this i can you can see i can move it around we also get a nice little x which basically marks this you may think this pointer here is where it's pointing to it's actually this little x just because of the way the icon is that i made but that's a draggable property that you can use but so this was um my video on learning about markers in the javascript maps api if you have any questions let me know in the next video we are going to be working with um info windows so those are all usually used along with markers to give information about a certain place but so we're going to be working with those so i guess i'll see you in the next video thank you for watching

Channel: WittCode

Views: 1,376

Keywords: wittcode, WittCode, google, javascript maps api, google javascript maps api

Id: tmdtH1hwlDo

Length: 19min 56sec (1196 seconds)

Published: Mon Oct 11 2021