Tip:
Highlight text to annotate it
X
CHRIS BROADFOOT: I think we're live.
LUKE MAHE: Welcome.
Hello, and welcome to another Maps API Hangout.
CHRIS BROADFOOT: Yep.
So today, we'll be doing some interview with Jason Sanford,
who you can see down in the bottom, down there.
So a quick introduction.
I'm Chris.
I work on the Google Maps API Developer Relations Team.
LUKE MAHE: And I'm Luke.
I also work on the Maps API team down here in Sydney.
CHRIS BROADFOOT: And Jason, do you want
to introduce yourself?
JASON SANFORD: Yeah, sure.
I'm a web developer at MapMyFitness.
So we've been using the Google Maps API for quite a few years
now, so a pretty big customer, I think.
So been doing lots of fun stuff lately, converting some
apps over from v2 to v3.
So we'll chat about that a bit today.
LUKE MAHE: Cool.
CHRIS BROADFOOT: Cool.
So Jason, let's just get a bit of background on what you've
been working on.
So could you give us a little bit of history, what you're
interested in, sort of your background?
Do you have a GIS background?
JASON SANFORD: Right.
So I've been in the geo business for maybe six, seven,
eight years now.
Worked in local government for a while.
Then went over to work in the private sector at Ubisense,
doing some real-time location work as well as building web
mapping applications for a lot of electric utilities using
Google Maps API, as well as lots of other crazy tools.
So that was a lot of fun.
And just a few months ago, I joined the MapMyFitness team.
I've been helping out with our new route engine, which uses
the Google Maps API extensively.
So that's been a fun project.
But to be completely honest, I've only done a very small
percentage of the work with this route engine.
I've jumped in a few places where I was needed, but I've
got a co-worker that's done a lot more of the work.
But I know a lot of what's happening.
Not much of the credit goes to me for this.
CHRIS BROADFOOT: Cool.
So can you--
I mean, you've only been there for a few months.
But can you maybe give some insight on why they chose to
use the Google Maps API?
JASON SANFORD: So the Maps API for us is pretty important.
So a lot of the reason we use it is because of the
directions.
So it's much easier to map a route from here to 10 miles
away if you can just click two points instead of clicking 20,
30 points along the way.
So you can click a point at your start, click a point at
your destination, and then manipulate the route along the
way as you see fit.
But usually with the directions service, you
generally get the route you want on the first
try, which is huge.
It's a big time-saver for our users.
Street View is also a pretty big enhancement, mostly for
the directions and the pretty good quality maps.
CHRIS BROADFOOT: Cool.
Yeah, I was checking out your new routing stuff.
It's pretty slick, nicely customized as well.
Although I didn't see where you guys are
using Street View.
Can you talk about that?
JASON SANFORD: You know, we haven't used it much.
I guess we're essentially just using the standard Street View
control that comes with the Maps API, so the peg man drag
and drop on the map.
Just the standard use there.
So coming from v2, I'm not sure if we have
that ability or not.
LUKE MAHE: Yeah, [INAUDIBLE].
And so you talked a bit about going from v2 to v3.
Do you want to just tell us about that experience?
Was that an enjoyable one?
JASON SANFORD: Yes.
Yes and no.
So it is great.
The API is much better.
It's very well-organized.
But our tools are pretty--
I want to say complex, but they're not.
Just these one-off things we're doing, they're fairly
complex things on the back end.
So my co-worker Matt, who is responsible for building most
of this, he spent a good while working on it.
And it was kind of a necessary thing to do,
since v2 is out soon.
I'm not sure how soon, but the clock was ticking, so it was
time to make the leap.
CHRIS BROADFOOT: Yeah, so I think [INTERPOSING VOICES].
Yeah, I think-- so there's a three-year deprecation policy.
And I think that three years is up in May next year.
JASON SANFORD: Right.
LUKE MAHE: So if you haven't started moving across, you
really ought to now.
JASON SANFORD: Right.
So that was a pretty big project, but it's been good.
It's been well worth it.
So we released our site today, with some pretty
good reviews so far.
So people are excited.
LUKE MAHE: Awesome.
CHRIS BROADFOOT: Yeah, I saw there was a bit
of buzz going around.
That's great.
JASON SANFORD: Yeah, a little bit.
Enough buzz to make us sweat for a few hours.
But it was good.
CHRIS BROADFOOT: That's a great problem to have.
JASON SANFORD: Right.
LUKE MAHE: Until your server catches on fire.
CHRIS BROADFOOT: Yeah.
JASON SANFORD: Right.
CHRIS BROADFOOT: Cool.
So do you want to give a bit of a demo of the--
so you ported the existing map from v2 to v3, but you've also
released this new routing engine that
has additional features.
Is that right?
JASON SANFORD: That's right, yeah.
So we're using lots of cool new things, like the bicycle
layer and using cycling directions, and adding a few
other custom layers that you guys have released recently.
So, yeah, I can give a demo.
That works.
CHRIS BROADFOOT: Cool.
JASON SANFORD: It's my first Hangout here, so I'm not sure
exactly how to switch screens.
CHRIS BROADFOOT: So I think if you go in the top left,
there's a Screen Share button.
JASON SANFORD: Gotcha, OK.
And I pick Desktop or Google Hangouts.
Let's choose this.
So how's that?
Do you see yourself?
LUKE MAHE: Inception.
CHRIS BROADFOOT: Yeah, very Inception-like.
JASON SANFORD: All right.
And so now you see our homepage up there?
CHRIS BROADFOOT: Yeah.
JASON SANFORD: OK.
So this is kind of the whole redesign of the site.
Not really here to talk about that, but we've
changed lots of things.
And while we switched this, we figured it was time to release
our new route engine, which we've got here.
So the first thing you see is that we customized the map
based on what site you're at.
So MapMyFitness has a number of websites.
MapMyRide.
As you can see, I'm out here.
So on this site, we turn the bicycle layers on by default.
You can turn those off if you want.
And if you visit any of the other sites, like MapMyWalk,
or MapMyHike, MapMyTri, all of our other websites, those are
turned off, because a lot of people just aren't
interested in those.
So we'll turn them back on here.
So you can see it defaulted to my location, where I'm at now.
So if I wanted to start mapping a route, I could just
click right there.
And I could just start clicking my way around to
figure out where I wanted to go, or where I did go.
But I'll undo those changes.
Because one of the great things we can do is just have
your start location, and then come up here to the Search
bar, and just type in any address.
So this was a park I went to the other day.
CHRIS BROADFOOT: So is that the Elevation API down there?
JASON SANFORD: Yeah, so that's the Elevation API as well.
CHRIS BROADFOOT: Cool.
JASON SANFORD: I'll show you that in just a second.
So my second point is that part that I just clicked on.
So now we can just kind of see our whole
route that we generated.
As you can see here, it jumped quite a ways over to this nice
bike path, which is pretty handy.
You wouldn't want to go up any of these other semi-major
roads if you've got these nice bike paths over here.
But what you might want to do also is just take this route
and drag it over to a slightly different bike path.
So we're using Google's draggable directions for that.
We can add any points along here, and drag them wherever
we see fit.
If you notice at the bottom, the elevation should be
updating as the route is updating.
And as you mouse over the elevation, you'll see that
location on the route, and get a very specific elevation in
the chart down there.
LUKE MAHE: That's nice.
CHRIS BROADFOOT: Cool.
What do you--
JASON SANFORD: So we can--
CHRIS BROADFOOT: Oh sorry, go on.
JASON SANFORD: No, go ahead.
CHRIS BROADFOOT: Oh.
So what are you guys using for the chart down below?
JASON SANFORD: Highcharts, which is a paid but very
affordable JavaScript charting API.
So it uses SVG, unless you're in IE, and then it does that
crazy VML stuff.
But yeah, it's worked really well.
I see it a lot around the internet.
As I've implemented this, I've looked around, and lots of
people were using that, so it's pretty powerful.
So maybe you've mapped that route, and you want to come
back to where you started.
We've got this handy Double Back button that will just
kind of take you out to where you are, and
then all the way back.
And then you get your total mileage set to 13.74 miles,
and you're back at your start here.
And then from there, you could save your route.
It also saves these directions that you can change.
You can just say whatever, and that'll change that cue note.
So if you wanted to print these directions, your custom
notes here would print out as well.
CHRIS BROADFOOT: That's cool.
JASON SANFORD: Yeah.
CHRIS BROADFOOT: A nice little touch.
LUKE MAHE: Could I go and send these directions off to my
Garmin device, or something like that?
JASON SANFORD: So we do allow export of GPX.
I don't think those--
I'm almost positive those directions are
not included in that.
So something sort of like that that we do is, if you say you
are going to do this workout, you can check Send to Phone
here, and if you're logged in, and you have our app on your
phone, it will send that route to your phone, and draw it on
the map, so you can follow it as you're riding, or running,
or whatever.
LUKE MAHE: Can you also share the route with friends?
JASON SANFORD: Right.
Yeah, so you can make this route public, and so anybody
with a link can see it.
Or you can have your MapMyRide or MapMyRun friends see it.
But what most people typically do is make it completely
public, and then post it to Facebook, or Twitter, or
whatever social network they're into.
CHRIS BROADFOOT: Cool.
JASON SANFORD: But yeah, you can definitely
send this to whoever.
LUKE MAHE: So what were some of the biggest challenges you
think you ran into when you were building this?
JASON SANFORD: One of the bigger challenges was today.
So we released this, and we love these bicycle directions.
What we didn't realize until we released it today is that
the bicycle directions may not be available
outside of the US.
So that was a lot of our fault.
We didn't do, apparently, enough
debugging in other areas.
So that's something we can work around for, for sure.
Most of the difficulties were not really Maps API-related,
but your typical web development problems, working
around different browser bugs and whatnot.
So yeah.
LUKE MAHE: The joys of being a web developer.
JASON SANFORD: Right
CHRIS BROADFOOT: Well, we do a lot of work to ensure that the
Maps API works on many different browsers.
We've got a lot of automated testing, so we have all of our
tests running continuously on the many,
many different browsers.
LUKE MAHE: And devices.
CHRIS BROADFOOT: Many mobile browsers, yeah.
JASON SANFORD: Cool.
LUKE MAHE: It's very impressive to see, a wall of
phones all running tests.
CHRIS BROADFOOT: Yeah.
JASON SANFORD: Yeah, that would be cool.
So yeah, that's pretty much my demo that I was able to pull
together in two or three minutes.
There's lots of other cool things you can do.
We show these distance markers here.
You can enable and disable those, and change the interval
you show those on.
Turn the bicycle paths off.
We've implemented the weather layer.
So if you want to see how the weather is going to be if
you're about to run out the door and go for a ride or a
run, you can see that maybe there's this storm coming, you
shouldn't go right now.
So yeah, having lots of fun with the Maps API.
[INTERPOSING VOICES]
CHRIS BROADFOOT: Yeah, especially because you can put
cloud cover on those maps [INAUDIBLE].
LUKE MAHE: Yeah.
JASON SANFORD: I thought we had traffic here.
Maybe I just don't see it.
But anyway--
CHRIS BROADFOOT: What else can you do?
Do you guys use Styled Maps at all?
JASON SANFORD: You know, we don't.
We've thought about that, just to maybe cater them
to each of our sites.
So each of our sites has a sort of specific style, mostly
just color-based.
A lot of our runners--
LUKE MAHE: Yeah, you could do it so if it's running, pop up
some other paths, and get rid of roads that are
not going to be used.
CHRIS BROADFOOT: Or in bicycling, you're done with
the bicycling layer.
But maybe if you're walking, you can expose some of the
paths through parks, or something like that.
JASON SANFORD: Yeah, exactly.
That's a good idea.
We hadn't thought about that.
So yeah, lots to do there.
So this is really just our first iteration.
It's gotten lots of good feedback.
Lots of things to change, maybe, but it's
been a lot of fun.
LUKE MAHE: Kind of what we like to hear.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: Well, thanks for that.
JASON SANFORD: Yeah, no worries.
CHRIS BROADFOOT: Cool.
So outside of MapMyFitness, have you got anything else
you've been working on?
I saw you had a-- was it a vector layer for the Maps API
a while ago?
JASON SANFORD: Yeah, that was a lot of fun.
So I'm not sure if I'm still screen sharing or not, but--
LUKE MAHE: You are.
CHRIS BROADFOOT: Yeah, you are.
JASON SANFORD: So this is essentially just a library
that lets you add lots of other vendor-based web GIS
stuff on top of Google Maps.
So if you're an ArcGIS Server user, or a CartoDB user,
Arcturus, lots of other providers, we've got a few
others planned as well.
So it just lets you easily add in these layers on the ArcGIS
Server, just throw them right on top of Google Maps with
some semi-customizable infowindows.
I guess this one down here uses--
well, that's not what I wanted.
This one here uses Google Chart APIs, and lets you just
do lot of crazy symbology and whatnot.
So it's been a few months since I worked on this
project, so I don't remember too, too much about some
specifics here.
But it was a lot of fun.
CHRIS BROADFOOT: So on the ArcGIS side, was there much
work there?
Because I think there's an existing utility library.
Do you use any of that?
JASON SANFORD: No.
This was built basically--
at my previous job, we had the need to just pull in data from
all these different services.
Some of it may be live, and some of it may be just like,
give me all the data in this one service or layer.
So this is built on the notion that you can load live data or
just some static data, just give it to me and show it.
A few of these are semi-live, so as you pan the map here,
you'll get more features.
Obviously, you don't want to load every county in the
United States in one load, so these only load the individual
bounding dots.
So as you pan the map, you get more features.
So yeah, lots of different options.
Lots of decent documentation, I think, of things you can do,
like styling infowindows, or styling actual features,
controlling the scale range, and whatnot.
CHRIS BROADFOOT: Yeah, that
documentation looks good, actually.
I want to steal that template.
[INTERPOSING VOICES].
CHRIS BROADFOOT: That's Twitter Bootstrap.
JASON SANFORD: It is, yeah.
[INTERPOSING VOICES]
CHRIS BROADFOOT: Is that a JSDoc output?
JASON SANFORD: No, I don't like that.
I like code and documentation separate, but that's just a
personal thing.
CHRIS BROADFOOT: Yeah.
JASON SANFORD: But yeah, this is the deal.
Not so recent version of Twitter Bootstrap.
It's really good for people like me that aren't super good
with design.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Oh, it makes everything look beautiful.
LUKE MAHE: It does.
It's nice.
They've got a lot of the basics done right.
You can just use them all.
CHRIS BROADFOOT: I hope it doesn't get too over-used.
I quite like it.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Cool.
LUKE MAHE: Cool.
CHRIS BROADFOOT: So we might go through some news, look at
some cool maps that have come out.
Have a look at Airbnb and the Made in New York map that came
out recently.
And then just go through some stack overflow questions.
So let's go through it.
I'll just start presenting here.
So first bit of news, we have renamed--
LUKE MAHE: Google--
CHRIS BROADFOOT: Oh yeah, so-- you go ahead.
LUKE MAHE: Yeah, we've renamed Google Earth Builder.
Now it's called Google Maps Engine.
CHRIS BROADFOOT: Yeah, I'll just pull up the
blog post for that.
LUKE MAHE: You should have started where it was a window.
CHRIS BROADFOOT: Yeah.
I should have organized this.
LUKE MAHE: I spent a while playing with that today.
CHRIS BROADFOOT: OK.
Yep, so it's just a rename.
Oh yeah, and there's also the launch of the Google Maps
Engine grants program.
So if you're a nonprofit, and you want to use what was
previously Google Earth Builder, you can now apply for
a grant to get access to this new product.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Very cool.
So what else?
Oh yeah, so came across this great library last week called
Overlapping Marker Spiderfier.
LUKE MAHE: Oh yeah, I saw that.
That's pretty cool.
CHRIS BROADFOOT: Sort of a new way to solve the too many
markers problem.
LUKE MAHE: Yeah, it was an interesting approach to
clustering.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: We've tried this many a time.
CHRIS BROADFOOT: So we mentioned it, I think, three
times at our last Hangout that Luke and I wrote an article on
too many markers, so what happens when you
have too many markers.
How do you solve it?
And these guys have re-implemented the sort of
spiderfication that you find in Google Earth.
So let's just have a quick look at their demo.
OK, so when you click on a group of markers, they sort of
expand and fan out so you can see each individual one.
And it's kind of cool.
A little white line shows you where the marker was precisely
on the map, and you can click each individual marker.
LUKE MAHE: So this is an interesting approach where the
user doesn't really care about how many markers are there,
just that there's a bunch there for some reason.
So when you click on them, you can show them
all at the same time.
So it's pretty cool.
CHRIS BROADFOOT: Yeah.
So that's over on GitHub, Overlapping Marker Spiderfier.
LUKE MAHE: He would have tried that so many times.
CHRIS BROADFOOT: OK.
So what else?
You got any show and tell, Luke?
LUKE MAHE: Not really today.
CHRIS BROADFOOT: OK.
LUKE MAHE: I've shown everything.
Do you want to show a couple map of the weeks?
CHRIS BROADFOOT: Yeah.
So this week's map is Airbnb.
So if you're not following our developer blog, go over and
subscribe in your favorite RSS reader.
It's googlegeodevelop ers.blogspot.com.
So this week's map of the week is Airbnb.
And these guys just really kick *** at user interface.
LUKE MAHE: Yeah, it's really nice where it isn't just
showing what's in data, and just works really cool.
CHRIS BROADFOOT: So let's go and have a look.
So I think you can now--
LUKE MAHE: Actually, I was on this site the other day
looking for--
CHRIS BROADFOOT: Let's pretend like we're
going on holiday together.
LUKE MAHE: Yeah, let's.
Where do you want to go?
CHRIS BROADFOOT: Let's go to New York.
LUKE MAHE: OK.
CHRIS BROADFOOT: Oh, wow.
My internet's really slow.
OK, where am I going?
New York.
Cool, nice autocomplete there.
What else?
When do we want to go?
Let's go tomorrow.
LUKE MAHE: All right.
I'm sure our boss will let us have time off.
CHRIS BROADFOOT: Yeah.
So once we do our search, we can go over here.
We can get the list view.
Wow, that's pretty cheap, $81 a night.
JASON SANFORD: You'd better grab that fast.
CHRIS BROADFOOT: Yeah.
We can go over and look at the map instead.
So I was actually looking for a place to stay
in New York, and--
LUKE MAHE: Not with me?
CHRIS BROADFOOT: Not with you.
I'm sorry, Luke.
LUKE MAHE: Aw.
CHRIS BROADFOOT: Yeah, and a map would have been great to--
because apparently I don't want to stay in some
parts of New York.
LUKE MAHE: I've heard that.
CHRIS BROADFOOT: Apparently.
Apparently.
Oh, so these guys have solved the too many
markers problem as well.
LUKE MAHE: Yeah, so this is similar to the marker cluster
where they're just putting a marker with a number that says
how many are there.
And then as you zoom in, they're basically just
re-querying and splitting up that number.
CHRIS BROADFOOT: So what happens?
So where do I want to stay?
I think we want to stay way up here.
LUKE MAHE: Yeah, let's stay in that Meatpacker area.
CHRIS BROADFOOT: Meatpacker, all right.
Let's--
LUKE MAHE: And the office is over there to the left.
CHRIS BROADFOOT: Putting--
oh, OK.
Well, that's interesting.
I was expecting to click on that marker, and it shows me--
it would be cool if it did that spiderfication, or zoomed
in or something, but it didn't.
$230.
OK, that seems expensive.
LUKE MAHE: That's in Australian dollars.
CHRIS BROADFOOT: Yeah.
But yeah, this is pretty cool.
So we've got some sidebar here on the right, so I
can filter by price.
Maybe I just want to say I won't spend
any more than $100.
Wow, lots of results.
And where do I want to stay?
I want to stay in Harlem.
This is what my friend told me.
LUKE MAHE: All right.
CHRIS BROADFOOT: Cool.
Great.
LUKE MAHE: It would be a bit of a commute.
CHRIS BROADFOOT: And yeah, what do I want?
I want a kitchen.
Cool.
So what happens now?
Do I go over--
LUKE MAHE: It would be cool if they hooked this up with the
Places API, so you could see kind of what's around.
CHRIS BROADFOOT: Yeah, like a Walk Score kind of thing.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Yeah, that would be cool.
So we've got this little map up here in the right.
It's pretty cool.
Nice.
OK, great.
So that's--
LUKE MAHE: And do you want to show the
other map of the week?
CHRIS BROADFOOT: Oh, do you have any
comments on their site--
LUKE MAHE: I do not.
CHRIS BROADFOOT: For the review?
It's pretty good.
LUKE MAHE: It is pretty good.
CHRIS BROADFOOT: It's going--
I wonder if they have Street View--
LUKE MAHE: My only comments are the buttons on the top
right don't match the buttons on the front page.
CHRIS BROADFOOT: Ah.
LUKE MAHE: But that's OK.
CHRIS BROADFOOT: Oh, yeah, so they've got some
Street View up here.
That's a great idea.
So we can sort of explore the area.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Marilyn's famous.
Cool.
Well, these guys are using an old version of the API.
LUKE MAHE: It doesn't have the pancake.
CHRIS BROADFOOT: Yeah, no--
so in the Maps API 3.8, we added Click to
Go, which means that--
say I'm on maps.google.com.
If you click anywhere inside the panorama, you'll be zoomed
off to that different panorama.
LUKE MAHE: And if you click on the wall, it'll zoom
and face the wall.
CHRIS BROADFOOT: Yep.
So it looks like these guys are also animating through the
panorama to just sort of give you a look around.
One suggestion here.
It would be really cool to just put a marker on where the
place actually is.
So if you put a marker in Street View, it'll sort of sit
in its place and move around as the panorama moves around.
Yeah, that's my only suggestion here.
Yeah, that's quite nice.
Oh, cool.
So they might be using the Places API here to just sort
of show you what's around.
LUKE MAHE: That's cool.
I like that.
CHRIS BROADFOOT: Yeah, that's nice.
LUKE MAHE: And I'd say oh, they're giving you a rough
idea of where it is, because they don't want to show you--
that's why they're not putting a marker in Street View.
CHRIS BROADFOOT: Oh, right.
They don't give you the address.
LUKE MAHE: For privacy reasons.
CHRIS BROADFOOT: Ah.
LUKE MAHE: Smart of them.
CHRIS BROADFOOT: OK.
So I understand.
Well, maybe Street View doesn't make so much sense,
because you don't actually know where it is.
Somewhere around here.
Cool.
Nice.
OK, what's next?
So--
LUKE MAHE: The other map of the week.
CHRIS BROADFOOT: The other map of the week was--
LUKE MAHE: The Made in New York.
Which was using the marker cluster.
CHRIS BROADFOOT: Yeah, so let's take a look at that.
So I heard on extremely poor authority that Mayor Bloomberg
actually coded this himself.
LUKE MAHE: Well, given how easy the
marker cluster is, sure.
I quite like the UI.
It works quite well with kind of the [INAUDIBLE].
So I feel it's pretty nice.
CHRIS BROADFOOT: Let's start.
LUKE MAHE: There's lots of tech
companies in New York hiring.
CHRIS BROADFOOT: Yeah.
Cool.
So this is using the marker cluster, which Luke designed.
Actually, the thing I like about this site is that they
didn't space the clusters too far apart.
They've sort of brought them in together so they sort of
sit next to each other.
LUKE MAHE: It sort of gives a heat mappish sort of feel.
CHRIS BROADFOOT: Yeah.
It's sort of a bit more interesting, sort of makes it
look a bit more dynamic.
And they're actually using a really nice star map here.
So we'll have a look at that in a sec.
But it looks like they've simplified the roads, made
them white.
It just looks really nice.
So as we click here, we zoom in, and we
can see all of these--
what are they?
Oh, they're hiring companies.
LUKE MAHE: Yeah, and so you can filter on the right.
CHRIS BROADFOOT: So I can filter digital companies, and
then select individual ones with this nice--
LUKE MAHE: Game Changer.
CHRIS BROADFOOT: Yeah, it's really nice.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: So it looks like they're using--
what is it?
LUKE MAHE: Fonts API?
CHRIS BROADFOOT: Yeah, Fonts API or CSS3 fonts.
It looks nice.
LUKE MAHE: Yeah, well done.
CHRIS BROADFOOT: It's great.
LUKE MAHE: It solves a problem.
It's nicely done.
It works well.
CHRIS BROADFOOT: Yeah.
So let's have a little bit of a look at the code.
LUKE MAHE: Because that's what you want.
You want everyone looking at your code live.
CHRIS BROADFOOT: Yeah.
So we'll just pull up the HTML.
We can sort of see how they've structured this.
Let's see some things that they've done well, maybe give
some recommendations.
Oh, come on.
OK, we can look through the--
LUKE MAHE: Look through the JavaScript?
CHRIS BROADFOOT: Oh, god.
OK, my laptop's a bit--
LUKE MAHE: There we go.
CHRIS BROADFOOT: Oh, I'm not even up there.
LUKE MAHE: Oh, you're projecting--
CHRIS BROADFOOT: Oh yeah, there we go.
LUKE MAHE: There we go.
CHRIS BROADFOOT: Cool.
So the first thing I see is they haven't compiled their
JavaScript or [? identified ?] it.
So immediate speedup there.
LUKE MAHE: Just on download time and caching--
CHRIS BROADFOOT: Yeah, but it's great, because we can
just have a look through.
LUKE MAHE: Yeah, because if this was all As and Bs, it
would be quite difficult to read.
But you can see the first bit there.
They've got their style map.
CHRIS BROADFOOT: Yeah.
So the great thing about JavaScript and just the web is
you can just look through people's code.
So I really like this map style, so I can go through
their code, have a look at what they've done.
So you can see they've made all the roads white.
What have they done here?
They've sort of lightened the road labels, re-colored the
water, and turned off transit lines.
LUKE MAHE: So if you like this style, you can borrow it?
CHRIS BROADFOOT: Yeah, so--
LUKE MAHE: And change it?
CHRIS BROADFOOT: Yeah, so they didn't actually use
simplified.
They just made it all white.
LUKE MAHE: Looks good.
And they used jQuery.
CHRIS BROADFOOT: So that doesn't look
like map-related stuff.
So we've got a fair bit of customization on the map here.
That looks great.
So the other thing we can see here is they're using one
infowindow for the whole page.
LUKE MAHE: Which is brilliant.
CHRIS BROADFOOT: Yep.
So as I click on multiple--
as I click on them and then go over here and click on another
one, we're not opening up multiple infowindows.
We're just re-using the one infowindow.
Yeah, what else?
All right, so yeah, you can see how they're
using marker clusterer.
So they've got a bit of customization here on the
click event.
LUKE MAHE: Yep.
So basically when you're clicking on the marker
cluster, they are hiding the
infowindow, hiding the details.
And if they're zoomed out too far, they're going to--
I can't read the bottom part of that.
CHRIS BROADFOOT: If it's zoomed too
far out, then they--
LUKE MAHE: And they're populating
the list on the right.
CHRIS BROADFOOT: Oh, right.
Oh, so this is cool.
So say we're zoomed-- there's two companies that are really,
really close to each other, maybe in the same building,
and I click on them.
It just tells me there's two companies here.
So this is another great solution to too many markers.
If they're in the exact same position, you could do the
spiderfication, or you could just open the infowindow and
say what's underneath.
LUKE MAHE: Yeah.
Because the marker cluster has a nice thing where you can
[? listen to ?] click events.
So when you click on a cluster, they'll tell you how
many markers are actually in that cluster, and all the
markers that are in the--
CHRIS BROADFOOT: Yeah.
Cool.
So a whole bunch of other stuff.
Have a look through if you're interested in it.
So let's just take a quick look at their HTML.
Looks like they're using--
LUKE MAHE: Some nice ASCII art at the start.
CHRIS BROADFOOT: Yeah, that's great.
Yes, so they've done a great optimization, which is just
putting all the JavaScript at the end of the page.
Which means it loads after the rest of the contents there.
Oh, and they're using a Maps API key, so they can track
their usage.
Definitely recommend that if you're using the Maps API.
So they're loading jQuery from the Google AJAX libraries.
LUKE MAHE: And nicely you can see here is when they're
loading up the source tag, they're just doing slash
slash, which means if they're on HTTP or HTTPS, it will just
use the correct protocol, and you won't get
mixed content warnings.
CHRIS BROADFOOT: Yeah, it's good practice to be in.
LUKE MAHE: One caveat is, if you're loading something just
off file, file colon slash slash, it won't work.
CHRIS BROADFOOT: Yeah.
So loading off the AJAX libraries that use Google's
content delivery network, so you'll probably get a speed
up, and chances are your users will
already have jQuery cached.
So that's great.
LUKE MAHE: OK, those were maps of the week.
CHRIS BROADFOOT: Cool, yeah.
So--
LUKE MAHE: Go to some questions?
CHRIS BROADFOOT: Yeah, let's go to some questions.
So we didn't really have any on our Google Moderator.
I'm a bit sad about that.
Yeah, so we didn't really have any on our Google Moderator.
So we're just going to go through some stack overflow
questions that we thought were interesting, or weren't
already answered.
LUKE MAHE: And then those playing at home can go and
answer the questions before we get a chance
to, and get the points.
CHRIS BROADFOOT: Yeah, exactly.
Yeah, I'm not going to go in and put the answer in.
LUKE MAHE: You have to [INAUDIBLE] to
go watch our Hangout.
CHRIS BROADFOOT: Yeah.
Just post a link to the video.
So this first one is how to tell KmlLayer about your
custom map projection.
So this is an interesting one.
So it looks like he's got a custom map projection for some
[? Russian ?] tiles, and he also uses the default
projection.
But when he uses KmlLayer, it doesn't work, obviously, with
the custom projection.
So, unfortunately, KmlLayer renders the tile server-side.
So if you're using some funky projection, there's not really
any way that we can get that over to our server to move the
markers around.
LUKE MAHE: Going to have to convert your stuff to Mercator
projection.
CHRIS BROADFOOT: Yeah.
So either go and try to get tiles that are in Mercator
projection, or I think the easiest thing in this case
would be to use geoxml3, which will bring down your KML file,
parse it, and go and add markers to the
map as regular markers.
LUKE MAHE: Which is fine as long as your KML
file is not too big.
CHRIS BROADFOOT: Yeah.
Yeah, either that, or you could probably fake it.
If you're only showing a KML layer, you could sort of
pretend that--
do some funky projection.
I don't know.
It's probably possible, but geoxml3 is the easy way.
Cool.
So next one is how to bind an infowindow as a
property of a marker.
So we don't really do this very much.
LUKE MAHE: And binding is kind of an overloaded word here,
because we've got the concept of [? MDC ?] where you
actually do bind.
So are they kind of thinking like, I've got a marker, and I
want to set a property which is a reference to my
infowindow?
CHRIS BROADFOOT: Yeah, I'm not sure.
LUKE MAHE: Technically you can do that in JavaScript, because
you can add properties to any object.
You want to be careful that you're not using a property
that already exists, or that we may use one day.
So naming the property something like underscore
underscore, some prefix, underscore infowindows 38
equals my infowindow.
And then when you have a click event on the marker, you can
just go to this dot underscore underscore infowindow 38.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: And there's your reference.
CHRIS BROADFOOT: Yeah.
So if you actually want to bind them together, you can
bind the map property.
But you've got to be careful to unbind that if you ever
want to open that infowindow on a different marker.
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Yeah.
Otherwise, they'll all be bound together, basically.
LUKE MAHE: Or you can bind their position together as
well, if you just want them moving positions.
So if you've got a marker and you're dragging it, you want
the infowindow to follow.
CHRIS BROADFOOT: Yeah.
But I see here there's also a similar question, how do I
clean up an infowindow when the
associated marker is hidden?
I think there's a great answer down here.
Or maybe not.
I mean, this looks pretty similar.
So basically, you want to listen to the map changed
event on the marker, and then do something based on that.
LUKE MAHE: Yeah, visible change is probably
not the right one.
Map change is a better option.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: Because when you remove a marker, you set map
change to be null.
And so you could do--
it really depends on your use case, but you may do something
where do I have a variable that says the
infowindow is open?
And if it is, then hide it.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: And this may trick you when you've got multiple
markers, and one hides, and you're not really sure.
So it really depends on your setup, and what you're
actually trying to achieve.
CHRIS BROADFOOT: Yeah.
Yeah, perhaps if you're using one infowindow, you could set
a property on the infowindow that points to a marker that
was last opened.
And then when you're deleting markers, go and check to see
if those two are equal.
And if they are, then you close the infowindow,
something like that.
Yeah?
LUKE MAHE: Yeah.
CHRIS BROADFOOT: Cool.
So there's one more here.
Well, actually we've got two more.
So animated lines with arrows between two coordinates.
So we actually did something similar to this in one of our
slide decks.
LUKE MAHE: Yeah, we had us flying from Sydney to Perth.
CHRIS BROADFOOT: Yeah.
So if we go over to the documentation, there's some
really useful utility functions
for spherical geometry.
So if you know the two points--
so if you just go and search for a spherical, what you
probably want to use is interpolate.
So your From Lat Long is wherever you're going from.
Your To Lat Long is wherever you're going to.
And then you can call this function as you're animating,
and keep updating fraction, which is the third parameter.
And then that returns a Lat Long, and you could then use
that to update a polyline or move a marker from
the From to the To.
Yeah.
LUKE MAHE: Bonus points if you do it in an animation frame.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: Then you get nice performance.
CHRIS BROADFOOT: Yeah.
So in terms of arrows, at the moment, we don't have any
arrows on polylines.
But there's an open feature request for that.
LUKE MAHE: So star that, and we'll let you
know if it gets done.
CHRIS BROADFOOT: Yeah.
You could probably fake it with a little marker as an
arrow, and move that.
LUKE MAHE: And then kind of rotate it, and see if there's
still something if you wanted to try and
get the bearing correctly.
CHRIS BROADFOOT: Yeah.
Yeah, or an overlay view.
LUKE MAHE: Mmm.
CHRIS BROADFOOT: If someone wants to create an overlay
view that just has an arrowhead that can be rotated,
that would be pretty cool.
LUKE MAHE: Do that in Canvas as well.
CHRIS BROADFOOT: Yeah.
LUKE MAHE: Yeah, lots of cool ways.
CHRIS BROADFOOT: OK, so draw a polygon from
user-entered vertices.
OK, so he's got a list of coordinates, and just
wants to draw them.
So the first thing you've got to do is get these coordinates
into an array of Lat Longs, which is the format that we
use to draw polygons.
So if you actually have it in a text field like that, you'd
probably want to maybe split on commas, and for every
second one, you can get the Lat Long pair out of it.
LUKE MAHE: And then with that array, you can then create a
new polyline object.
CHRIS BROADFOOT: Polyline, yeah.
[INTERPOSING VOICES]
LUKE MAHE: And then add that to your map with that array,
and you've got a line.
CHRIS BROADFOOT: Yeah.
But if you haven't seen it already, you should take a
look at the drawing editable polylines, which lets your
users go and draw polylines on the map, and polygons.
Cool.
So that's it.
LUKE MAHE: OK, I think that's it for us today.
CHRIS BROADFOOT: Jason, are you still there?
Looks very dark.
JASON SANFORD: Yeah, I turned off for a second.
Didn't want to look too sleepy here.
It's getting late here.
LUKE MAHE: Well, thank you very much for joining us.
JASON SANFORD: Yeah, it's good to be here.
CHRIS BROADFOOT: Yeah.
Great, that's it.
Thanks for watching, those who are out there.
Jason, thanks very much for coming along.
JASON SANFORD: You're welcome.
It was fun.
All right, see you guys.
LUKE MAHE: See you later.
CHRIS BROADFOOT: See you guys.