Google Maps JavaScript API Episode 4 - Info Windows

hey everyone welcome to the fourth video in my javascript maps api series where here i'm going to be talking about info windows so in the javascript maps api an info window is an overlay that displays content in a pop-up window above the map at a specific location remember an overlay in the javascript maps api is an object on the map that is tied to latitude and longitude coordinates the content and information window displays can of course be customized but it is usually text and images so an info window does what the name suggests it displays information about a certain location and the info window is made of two parts a content area and a stem and the stem is attached to a location on the map and the content area has the content that you want to display so let's get started by adding an info window to our map as you might have guessed an info window is an object of the type info window so what i'm going to do i'll create this down here actually and i'll just do const info window set that equal to new google i can spell google write.maps dot info window like this and then the constructor of the info window takes an infowindow options object as an argument so i'm going to call it infowindow options and set that equal to this and then one of the options the info window object takes is content so the key content and the content is the content that we want to display so say i just want to have an info window that says subscribe to wic code like this so that'll be what is displayed on the info window and then next we need to specify where we want this info window to appear and this is done with the key position so position like this and what we pass is an object of the type lat long and you've seen um me do this quite a bit throughout the series i'm just going to do the shorthand for this where i'm going to do lat 42 long of minus 87 so this is essentially shorthand for new google.maps.latlong and then there are some other options that i will go over in a second but for now let's just make our info window appear on the screen so i'm going to save this and and you may notice of course that when we create the info window and actually let me just pass in the window info window options but of course you notice that when we create the info window it does it isn't explained displayed on the map automatically to make it display you actually have to call the method open so open like this and then what this open window or this open method takes is an info window open options object so you can kind of see a pattern here so this is open open options i'll just call it this and then one of the options this object takes is the map that we want our info window to be displayed on and so this is essentially oh didn't set that equal this is essentially you know connecting our info window to our map object that we created and then so of course we pass in our indo info window open options and now you can see the info window on the map so you can see it just says subscribe to wic code like this let me also just zoom out i put as in the middle of the ocean let me change this so we're not all the way out there just copy this whole object and paste this in hopefully there we go okay that's better so then we're subscribed to whitcode this is the info window and then of course real quick just in javascript because the map we we can just type in map like this if we wanted to and it still works because map the object here um if the key is also the name of the variable we can just put it itself just a quick side note but i'm gonna so you might see that but i'll just keep it that way is it um i think it makes more sense and then let's talk about more options for this open open options object and one of those is anchor so anchor like this but before i actually explain this anchor option more i want you to know that you can attach an info window to a marker and in fact you typically attach an info window to a marker so so far we have just been attaching our info window directly to the map but if we want to attach our info window to a marker we can use the anchor anchor property in our info window open options object so let's just real quick let's actually create a marker so in the last video we learned all about these um let marker equal to sorry made a whole video and already forgot new google.maps dot marker like this and then let's just pass in what we need is the position and let's do this again so the center of our map that's going to be our position and then for our map it's of course going to be our map and then for anchor let's par pass in our marker like this and now you can see that our info window is attached to our marker or you can see the anchor of it is essentially pointing to where the marker is so you can see that the anchor property contains an anchor point or a position to open the information window and if the anchor position is null or undefined then the info window will open at its position property so this position here and then i just want to go over another option for this info window open options object and that is the focus property or it's should focus actually what we do is so should focus like this and then this this option specifies whether the focus should be moved inside the info window when it's opened so if i set this to true it means that the focus should be applied to the info window when our when we open the info window to demonstrate this actually is when we load this you can see its focus because you can see that x already is like looks like it's been clicked on so if i press the enter key it disappears but if we press say should focus to false if i you can see we don't have that anymore if i press enter nothing happens but then if we say click on this then we can exit out of it that way and now just something you should take note of is um what position takes precedence when we specify a position in our info window open or in our info window options object versus when we provide our info window open position object and anchor so if we provide a position here versus an anchor here and you have seen already that the anchor actually overrides the position we have here so we change this to like 50 for example you can see that it's still attached to this marker so just when it comes to precedence what we set the anchor to here will override this position value but now let's talk about some other options we can pass to our infowindow options object and remember this specifies the initial parameters for displaying the info window and so we have set the content and position but there are two other options we can specify and one of these is pixel offset just like the word pixel offset and this pixel offset is an offset from the tip of the info window to the location it is anchored to and usually you don't need to specify this field as the default value is good enough but let's check it out real quick and so what this pixel offset takes is an object of the class size so it's new google top maps dot size and then you pass in whatever you want i'll go over these values real quick let's say we pass those you can see where we are now is we're over here not sure why you'd want to do that but that's something to know or to note but this size constructor here takes the property's width and height so this first option is the width and the second is the height so technically it's 265 here and 215 here away from the anchor and also of course we can add negative so let me add a negative here and you can see now the marker is up here or sorry our info window has moved up here and if i change this to negative 265 it'll move to the left so it's essentially just like an x and y graph when it comes to this property here but now the final option let me get rid of this that i but the final option i want to go over for the info window options object is max width so max width like this and this argument as its name suggests specifies the maximum width of the info window in pixels because by default an info window changes size or changes its size to fit its content and it also auto wraps text if the info window fills the map but if you specify a max width then the info window will auto wrap the text and information to keep to keep that with so let me just add like some jargon in here and then let's say we set this to be 200 like this you can see what we get is actually a scroll bar but it stays at 200 width and the reason we get a scroll bar i think is because this is all seen as one word but if we do this now you can see it's still 200 we don't have that scroll bar anymore but we um it's it's wrapped and kept a max width of 200. and also just note that if the info window reaches the maximum width and there is no vertical room on the screen then the info window might actually expand vertically so just keep that in mind but now so far we have just been setting the content of the info window in the constructor but we can specify the content of the info window outside of this by using the set content method on our infowindow object so in this object here so let's say we get rid of this content here and then let's change add a semicolon to this let's do info window dot set content and i say subscribe to whit code here save this you can see we have subscribed to wic code displayed so it's just a way to set the content dynamically but now let's talk about closing an info window so you may have noticed that by default the info window remains open until the user clicks the x at the top right or press the escape key or if we do like should focus true here press enter that's another way to remove it but you can actually close the info window programmatically by calling its close method so let's close our info window after three seconds have passed using set timeout of course pass in a function and then we're going to say in three seconds or three thousand milliseconds we use infowindow.close so this close method is what will close it now let's save this and there it's you can see it's closed after three seconds so if you want to close an info window programmatically you can use the close method and then just as a side note when an info window is closed the focus moves to the element that was in focus prior to the info window being opened so if we had another info window in focus before we closed another one the focus would move back to the other info window but also just note that if that element is unavailable then the focus would move back to the map so for example let's refresh this and then watch what happens when this closes you can see our map is in focus now see how it's outlined in blue because we didn't have anything else so the focus moved back to the map and like most things in this api or in javascript honestly this is customizable and so to do that we add a listener to our info windows object that listens for a close a close click event so we would do info window we'd add a listener to it and it would be close click like this and then we can pass in a function and so what would whatever would happen here we could handle our focus in here essentially or we could also just do whatever we want when the info window has closed and we will of course be learning more about events as this series progresses so i'm not going to go too in depth on this but just know that this is in fact possible but now let's talk about moving an info window so we have so far only set the position inside the info window constructor but we can actually use a method called set position as well on the info window so let me demonstrate that real quick by just showing you the method of course infowindow.set position and then of course this takes an object of the class lat long like usual so let me pass in this here and also get rid of this and let's pass in that there cool and then let's say we have our anchor let's also get rid of our anchor for a second and also let's get rid of our timeout cool and you can see we've set the position to be wherever this is now so just know you can use this method to change the position set it dynamically so it's not whatever you put in this options object to go into the constructor here won't be set in stone and um now something also let me go back to where we were at the position here and let's get rid of this so we're back in chicago with our info window showing so um i also want to show you that you can move the info window by attaching it to a different marker in the infowindow.open method so let's create another marker real quick i'm just gonna do marker two ooh that maps dot marker and then in here let's pass the position of i don't know let's try to make it close 41.88 let me just copy this and i'll change like the last two numbers or so so paste this and let's do a oh forgot closing price here what was it i forgot what that was it was a two so let's change that to like a four and let's change this to like a nine see where that went cool so we've made that there and then of course we need to add this to the map can't forget to do that so add that to the map and then let's zoom out on our map and then let's actually just i'm actually just going to copy and paste this i don't know if i can mix something up but i'm just going to make this quicker do that and then let's change this 8 and then let's also change this to say 42. cool so you can see we have our other one up there now let's use our open method to change the marker so what i would do to do this is let's do a set timeout again and then after three seconds three thousand milliseconds we will call infowindow.open and then we can pass instead is actually a marker so let's pass marker two and let's see what happens after three seconds i'm sorry that's not right actually what i had supposed to do is we change the anchor property to let's say marker two and then we'll just call the open method again this time path it with the anchor changed so now let's see what happens cool so you can see after three seconds we move our info window from this marker to this one here so you can see all sorts of different things we can do with this but so i just changed the this what is in here access because it's an object access the anchor property set it equal to our other marker here and then just called open again but now let me get rid of this and just have it away originally because now i want to go over the um the final thing i want to show you which i still think is the coolest is that the content string we pass to the info window can also be html so what we're passing to this set content can be customized html so we can essentially customize the content inside it however we want to so let's say i want to do let me use the this so i can do new lines do es6 syntax and i'm going to say let's add an h1 so if you know any html come in handy here we could say subscribe to wic code and then underneath this let's add a paragraph tag let's just say i hope you enjoyed this video and then we can also let's add an image and i believe i have an image already in here called wic code marker.png so then let's add this so whipcode marker.p and g don't forget to close that and cool so look you can see we have made our own um you know our own uh content window our very own customized info window using html and then of course we can add some css so let's say we wanted our h1 say we wanted the color of the text to be red if we save this you can see now we get the h1 as the color red or say for the paragraph tag we want to add some style and we want to make the background color to be blue and now you can see that our paragraph tags background color is blue so you can do whatever you want you can make really cool customizable information windows and of course you can see it's just still anchored to our marker object but so of course just saw that we can customize the content of the info window but the info window class itself does not offer customization in other words we can't really change the shape like the shape of this the stem etc of our info window if you wanted to do something like this we would need to come implement our own customized pop-up and we of course will be doing that later in this series but until then you've seen that there's a lot you can do with the basic info window but so this is my shape on or this is my sorry my video on info windows the reason i said shape is because the next video we're going to be going over shapes with the javascript maps api so be on the lookout for that if you have any questions or comments leave them in the comments below and i'll try and get back to you but besides that thank you for watching and i'll see in the next video

Channel: WittCode

Views: 402

Keywords: wittcode, Wittcode, JavaScript, JavaScript Maps API, API, Google Maps, google maps, javascript maps api

Id: tNHCs_wv21Y

Length: 19min 57sec (1197 seconds)

Published: Mon Nov 08 2021