7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 InfoBoxes

Markers help spruce up your map, but they don’t provide much context. With InfoBoxes you can provide data about your markers.

Related Links

3.3 InfoBoxes

So we've been able to add markers to our map and customize them and also add events on to these markers. And in this lesson, we'll focus on adding info windows when those markers are clicked. So in our plunker, we can see that we're adding this marker and we're just providing the lat and the long and a custom icon. And right now our add marker function doesn't actually return anything. So if we go to our Mapster, and then down here at the bottom of our add marker function, we'll return the marker. So back at our main script, we'll set a marker variable for it. So now that we have the marker variable, we'll add an info window onto the marker. So just like we've done for every single component, we've tapped into the Google Maps name space and [UNKNOWN] up that object. And info windows are no different. So to create an info window we'll store it in variable and we'll call it newGoogle.maps.infowindow. And just like the previous components, they'll take in an object literal. And this object literal just needs one property called contents. And we'll set this content to, I like food. And now that this info window is created, we need to open it up. So we can call a function for it. We can say info window.open. However it's not opening up, and that's because we need to tell it where to open. First we need to set it to the map, so we can say map.gMap and then we see it in the top left. And the next parameter will tell us where to center it to. And in this case we can just provide in the marker. So now you can see we have the info window right over the marker. However, if you want it to be opened when the marker is clicked on, you're going to have to set up an event for that. So inside of the object literal for the add marker function, we could set the events and within the callback, if we create and open the info window when we click on it, we can see that we get the info window. However if you wanna add an info window to every marker this can be a lot of code to do so. So we can take this code and we can abstract it into our library. So rather than specifying an event, we can just provide a string for the content. And ideally, with this content property, all we'd have to do is click on that marker and it'll open up that info window. So go into the Mapster library and below where we're checking for an events, we'll check to see if there's content. And if there's content we'll set an event for it. So we're using the _on function. We're creating an object. We're setting the event name to click. And within the callback, we're setting the content of the info window and then we're opening it up to this.gMap and then the marker. So now if we click on the marker, we can see we have, I like food. So in our main script file, we can go and we can create another marker. And if we set the content to another string, when we click on that, we see we have, I like rice and if we click on the other one, it says I like food. So we can easily add info windows just by abstracting that logic into our Mapster library. And now that we have these content strings we can actually even add a bit of HTML to customize them. So we'll wrap the first one in a div, and then we'll set a style attribute and we'll set the color to a red. So now when we click on the marker we can see that we get, I like food, but the color isn't red. So we can use HTML and CSS to customize the info windows. So in this lesson, we're able to take the info window content and abstract it into our Mapster library. And within our Mapster library, we set a click event. So every time a marker is clicked on, if it has a content string, it'll open that up in an info window. So now that we're gonna be able to add multiple markers to the map, we're probably gonna want to make sure we can keep track of them. And surprisingly enough there's nothing within Google Maps that natively keeps track of your markers for you. So in this case, if we were to tap into the gMap, we can't say map.gMap.markers. So there's no need of collection of markers within Google Maps. So if you wanna keep track of the markers on your map, you're going to have to do it yourself. So in the next lesson, we'll write our own construct that helps us keep track of our markers.

Back to the top