So one of the first places we want to start is within the mapping service, and
the shell of the method of define called displayMarker.
And one of the first things we want to check is the map defined, and
if it's not defined, let's get out.
We have a couple of race conditions that start up once we add a couple of watch
statements.
And there are several methods within the map that could be called before
we actually have a map especially if we were trying to resolve my location.
And when we go to display a marker, the caller is going to
supply various marker options and we'll go through this in more detail in a moment.
You can think of those as hash properties that contain at least a center position,
a latitude and longitude.
So since it's really, let's go ahead and log what those options are that we
are being asked to display and let's get started displaying the marker.
Now on the following documentation page on the Google Maps API website,
does a pretty decent job at summarizing what we have to do.
We've already instantiated our map, got that.
And now we need to instantiate a marker and then assign the map to the marker.
Okay, so instantiate the marker, and set the map.
So let's go ahead and instantiate the marker, giving it the markerOptions and
set the map.
However, we're going to want to remember this marker.
We're going to want to do things with it later.
So, let's go ahead and store that marker value
in the markerOptions that we're going to manage here in a second.
So let's go ahead and remember the markers we're asked to display.
And then each marker is going to remember its Google Maps marker
within its marker property.
All right we have everything we've been working with so far.
We've remembered it.
And the next thing I want to do when I display a marker is,
adjust the boundary of the map so that it's displaying all the markers.
And to do that let's use a LatLngBounds.
This is a google.map type that will allow us to add to it, all of our marker
positions, and then, have the map fit the bounds of all of our markers.
All right, that was pretty clean.
Make sense?
So what you'll find is, although we have set a zoom level,
once we start putting markers on the page, our zoom is going to change.
And now that we have the capability of displaying a marker,
what we're going to want to do is be able to undo that.
And so, let's go ahead and
define our clear marker, where we'll walk through every one of our markers.
And we may have more to do later, but at a minimum we need to null out the map for
the marker.
And that'll cause that marker no longer to be visible.
And now that we've made the marker invisible, let's go ahead and
take it out of our collection.
Although this is general purpose to display and clear just about any marker,
what we're going to start with is displaying the origin marker.
So let's come down to that shell of a method.
So what we'll do is, we will call the displayMarker that we just defined and
we are going to pass in some properties.
And what we almost forgot to do is return the markerOptions so
that we could remember the marker that we just displayed.
Now as I mentioned earlier,
one of the primary properties to define is the position.
And for the originMarker,
we'll define the position in terms of the center of the map.
We already have that, and to help us find the marker on the map.
Let's go ahead and define a title and call it origin.
All right, that's enough for now.
We can add more later.
So in order to get our current origin displayed, we're going to have to come
over to our current subjects map component and make a few minor changes.
The first change is, after the map is initialized, we want to displaySubjects.
And since displaySubjects can actually be called from a number of different places,
as we go into displaySubjects,
we're going to verify that the map in fact exists.
But of course, if we come this route, we know the map will exist.
So obviously there's going to be another route in the future that I know about, but
I hadn't told you about yet.
So if verify that the map does exist, and then we'll go to the map.
And say clear your current markers, and now display the origin marker,
the center of the map display and with an icon.
And with that in place,
we going to hit Refresh on your map, see what kind of error that we caused.
Looks like a syntax error on the mapping service line 43.