BRETT MORGAN: Hello, and welcome to
this week's Map Studio.
I'm Brett Morgan, one of the developer relations engineers
working with the maps team here in Sydney.
This week, I'd like to take you on a tour of using Google
Maps with Dart.
What is Dart?
I hear you say.
Dart is a new programming language from Google designed
to bring structured programming to web
applications.
This includes things like classes, libraries, package
management, and tooling.
Here you can see the most visible tool in the Dart
project, the Dart editor, available at dartlang.org.
This tool is based on [INAUDIBLE] frame work, and is
also available cross platform.
To get started, let's create a new application.
I'm going to call this one MapsApp.
First thing I always do when starting a new project is make
the darn thing actually runs.
So here we go, launching it up, and making sure it reacts.
That looks good to me.
We have a working tool chain.
So the next step, and one of the things I mentioned that
was great about Dart is that it has packages.
In this case, I went to pub.dartlang.org and found
that there was a package that wraps the JavaScript Google
Maps API up in a nice and Dart-friendly way.
So once I save this pubspec.yaml file, you'll
actually see the packages included in this application
will grow to include Google Maps and all the things that
Google Maps depends on.
So now we can actually go ahead and start writing a maps
application.
The first thing to do is put a div on the screen, this one
here, that will include the map.
The second thing is to make sure that we include the
Google JavaScript API for maps.
Next--
and this is something I keep forgetting to do-- is to make
sure the map canvas actually has a height.
What I'm doing here on both the body and the map canvas is
making sure that we take 100% of the screen.
Next, let's write some Dart code.
As I was mentioning before, it has
tools, and it has packages.
So what we have here is the first one, Dart HTML, gives us
the ability to reach into the dom and use CSS selectives to
pull nodes out of the dom, or elements in this case.
The next thing is the Google Maps dot dart file.
It includes object wrappers for things like map options.
So traditionally in JavaScript, this map options
is a bare JavaScript object with key value pairs.
In the Dart version, we actually have typed setters
and getters for each of these attributes of map options.
So we know that zoom takes a number.
Map type ID takes a map type ID object, so on and so forth.
And we wrap that all up, throw it into a Google
map, and off we run.
And we have a working map.
Now, the next step is that I like my maps to be on the
screen and be nicely visible, but I'm not quite sure what
numbers to put in here to pull out the
specific detail I want.
So what I'm going to do now is I've added a pair of changed
list nodes to the map, one for the zoom level
and one for the center.
So now what I'm going to do is when I rerun the project, I
can turn around and center the map where I want it, zoom in,
get the location in Sydney that looks--
how about there?
Maybe a little bit further in.
That looks good to me.
OK, now I have some magic numbers.
Now that I have these magic numbers, printed so
beautifully in the console here by Dart, we can put them
back in the source code and rerun the application.
That looks a whole lot better.
Now I can actually see a chunk of Sydney that I'm interested
in walking around.
If you're watching our Google I/O announcements, either live
at the venue or online afterwards, you'll know that
we released a new set of map tiles.
How do we get to these from Dart?
Well, this is the JavaScript package that I was talking
about up here.
This allows us to reach into the JavaScript context and set
true to this part of the tree here.
And this will turn around and allow for a new set of tiles
to be pulled in by the Google Maps API.
As you can see, a much better set of colors, and I think a
much more readable map.
The next step is--
of course, with any map-- is to put a whole bunch of red
dots on it.
So I have a data.json file I prepared earlier.
This data file is care of the places API, which you can look
up on Google Maps.
And what we have here is a set of lat longs and a bunch of
restaurant names.
So what I want to do now is to put this on the map.
First thing is first, let's head into the Dart.
And you can probably guess what comes next.
We're including a package that allows us to turn JSON objects
into native Dart objects.
The next thing we're going to do is we're going to write a
function that works at Dart structure and pulls out what
we're interested in, ie, the lat long and the name.
So what's happening here?
We're making a request back to the server to get the
data.json file, this one here.
And then, once that is successfully retrieved, we run
this inline function--
it's a nice inline anonymous function, for those of you
keeping score at home--
to actually parse the data, walk through, and then create
a set of markers to put on the map.
Now, the most important step when creating something like
this is to actually go look at it.
So there we go.
Hopefully I've lined everything up correctly and
will now have the map.
Look at that, a map with red markers.
So I can zoom in here a bit, hover over things.
And we'll see titles of pizza places around Sydney.
What have I shown you here?
I've shown you how to easily use Google Maps from Dart.
Just a handful of lines of code has us visualizing JSON
data on a map.
Please reach out to me on Google + if
you have any questions.
Thank you.