FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Keeping Track of Map Markers

There’s no native way within Google Maps to keep track of your markers. In this lesson you’ll learn how to handle keeping track of markers yourself.

Related Links

3.4 Keeping Track of Map Markers

Within Google Maps, there's actually no way to natively keep track of your markers. So, in this lesson, we're gonna create a collection, and some methods to add, remove and find markers. Currently we have two markers on this page. And we can keep track of them because we're storing them in variables. However, if we were loading multiple markers from a data base, it would be really hard to keep track of them individually. We wouldn't be able to just assign local variables to each one. So since that's not an option, we have to use an array. Inside of the constructor function in our Mapster library, we'll add a property for the markers. And we'll initialize it to an empty array. So we'll scroll down to where we're adding markers, and below that, we're gonna create a private function where we're gonna push markers onto the array. [BLANK_AUDIO] And now we'll call this private function, from inside the public function. So now we've tapped into adding the array, let's go and log out the markers to the console. So we can console.log the map.markers. And here in the console, we can see that we have our two markers. So, now that we can keep track of these markers in our array, we probably want to be able to remove them as well. So, inside of Mapster, we'll create a private remove function. So, the way we remove this marker, is we need to find the index of the marker we're trying to remove, and then if that index exists inside of our array, we can splice it off. [BLANK_AUDIO] So now that we have the index, we'll check to see if it's not equal to negative one. Because if it's not equal to negative one, then we know it exists inside of the array. And then inside of this check, we'll splice this marker off the array. [BLANK_AUDIO] So we'll start at the index, and then we'll just move over one, and that just removes this marker from the markers array. So let's test this out. Now we're calling remove market on the second marker we created, but we still see it on the map, so let's check to see the value of markers in the console. In the console we see that we just have one marker. So, why is it still appearing on our map? All we're doing right now, is we're removing the marker from the array. We're actually not removing it from the map. So, to remove it from the map, we can tap into a function on the marker called setMap, and we can pass through null. And we can see that the map updates and removes that marker. So a marker is actually assigned to a map, and a map is not assigned to a marker. And to remove the marker from the map, you just null out the map property on the marker. So now that we can add and remove markers, we should create functions where we can find markers by certain properties. In this case, we'll create a function that finds a marker by its latitude. In this function, we'll set up a for loop, and loop through all of our markers. And we find a marker that matches the latitude, we'll return it. So inside of the loop definition, we're initializing var i equal to 0. And even though we're finding var i inside the loop definition, it's actually really not being defined there. In JavaScript, all variables are hoisted to the top of the scope. So, actually, it looks like this. So, we can set var i equals 0 at the top of the scope, and instead of including it in the loop definition, we can just leave that part blank. And right now, this doesn't make much of a difference. But it's always good to write the code the way the interpreter is actually going to process it. Inside of the loop, we'll store the marker that we're iterating over into a local variable, and if you're wondering why we're not hoisting this to the top of the functions scope, it's because this is actually at the top of the loop scope. So by coincidence, we're actually hoisting the variable to the proper spot. So now we wanna check to see if the marker we're currently iterating over, has the latitude that we're looking for. And each marker has a property called position, and then from position, we can call the lat function. And we can check to see if that is equal to the lat that we're checking for. And if that's true, we can return the marker. So, let's go to our script file and test out this function. [BLANK_AUDIO] And we'll just copy the marker's latitude above. Then we'll log the results to the console. In the console we can see that we get the marker that we're looking for. So it's good that we now have a way to manage our markers. However, this is kind of a basic way to do this. Right now we can only find a marker by its latitude. And if we kept up this convention by finding markers via property, we'd have to create a custom function, for every single property to find the marker by. So the better way to handle this, is to create a collection, that knows how to manage any type of object. And since it can manage any type of object, it'll be able to dynamically find an object by any property. We'll go through and create this custom collection, in the next lesson

Back to the top