The MarkerImage object

GMAPSapi provides some defaults

markers
We might want to have more and
also design our own markers or use
other types of markers
The MarkerImage object allows us to
use and image of our choice
We can resize it, select part of the
image, the anchor and the scale
 Interacting with markers
We can develop JS code to
Drop markers on a specific geographic
region
Make the dropping a pyrotechnic
experience
We will use animation to implement
that
 HTML side of things
We can have the usual HTML 5 code
to support a map application
We will add a button to perform the
dropping of markers
Please refer to the next slide of the
HTML code
 Variables
We will use some global variables:
For the map
For a geographical map of our choice
To define a neighbourhood
To create an array of markers
 Initializing
We will then use the usual
initialization function
 Handling button events
We can now develop code to handle
the added button
The button will drop markers
This will happen in an animation
The markers can be moved with the
mouse
The code is in the next slide
Adding markers
 A note on animation
Google Maps API provides two types of
animations
DROP: marker drops from the top onto the
map at a given location
BOUNCE: marker starts bouncing
The latter is extremely irritating, as the
marker keep on bouncing, although it
might turn out to be useful, especially if
you wish to keep alive a location in space
you have visited before
 How to toggle behaviour
We can add a new behaviour,
triggered by a mouse click for
instance
One click will start the bouncing,
another stop it, making the marker
behaviour more interesting
The next two slides show you how to
implement this
 Adding a customisable
marker
In the HTML code we will add a
button
This will allow us to drop a marker at
the current location
In addition, it will allow us to scale
the marker
To do this we pass the width and height
scaling parameters as follows
 The JS code handling the
events
On the JS side, we want to do two
things:
Have a function that drops the marker
A method to implement the bouncing
behaviour
Another method to stop and start at will
the bouncing
The next slide illustrates how to do this
The JS code
 Mouse event handling
We might want to have a different
reaction to specific mouse events
For instance normal look, when
hovering, clicking or selecting
Google Maps API allows the change
of the marker, according to the type
of event
Marker colour changing dynamically

To implement this we will require

An icon/marker in three different colours
To define three different mouse events
Hovering, clicking and neutral
 HTML5 side
We will start with defining a button
that drops a marker at a specific
location

The marker will be associated with a

JS function that takes latitude and
longitude as the two parameters
 The icons
We have now two options
Either we have a larger icon and then
select parts of it to be displayed
Or we use three separate icons with
three different colours
We will do the latter
See the next slide the code for this
part of the implementation
 Implementation of three
markers
origin

Origin is situated at the top left corner of the icon

Anchor and size are measured from the Origin point
The Size and Point objects are used to define the three
elements
 The marker and event
handlers
We can now define the marker with
an icon
We decided to use the normal icon, red
in colour

We can then define the even

handlers
 hovering

normal

clicking
The entire code
 Weather forecast
Let us say we wish to add weather to
your map
We would like to have a selection of
likely weather at a specific location
We can do this using the HTML5
selector together with a switch in JS
Let us see in the next slides how to
implement this
 HTML5 side
We will at first create a selection in
the HTML part of the code

We will then pair this with a button

that requests the coordinates on
where to drop the weather forecast
 The JS code
We can now implement in JS the
function
We will first prompt the user for the
coordinates

Please do recall the bounds for

latitude and longitude
The switch in JS
 Moving to the desired
location
We can now move to the desired
location
This can be done automatically, as
we have seen before
The entire function
 InfoWindows
We have seen how to use InfoWindows
They are just HTML containers
As such they can be filled with whatever
information you wish
Two ways to implement InfoWindows
Provide the window a string that contains all
the HTML
Provide a reference to an existing HTML node
Already existing
Or created with JS code
 String example: HTML
We will have the usual HTML side of
the code
 String example: JS
We will populate the initialize
function and then call it the usual
way with DOM
 String example: JS
We will create a marker, any would
do
We will add an event listener to it
This will allow the triggering of the
information window
 The new JS code
We can now write HTML code as a
string

We will then use it to display the

wanted information
All JS code
 Embedding videos in
infoWindows
Images contain small information
From time to time one would like to have
a video showing the beauty of a place, or
a souvenir of time spent during a holiday,
or perhaps some professional information,
for instance on the local architecture
We will add a button create a new marker
in a location of our choice with a video of
our choice
 The JS code
We will at first define a marker at a
position of users choice
In order to do so, we will prompt the
user for the coordinates of the
position
 Attaching a listener
We will then attach a listener to the
marker
This will trigger when the mouse clicks the
marker
At the same time, we will set up the video
parameters in a document that will then
be passed to the information window
Please refer to the next slide for the code
implementing that
 JS handling the clocking of the
marker

Here, if we wanted, we could also add some

code that changes the looks of the marker,
while the video is playing
 Watching a live camera
Let us say now that we wish to add a
live camera to an infoWindow
This could be done in many ways
I have chosen to find a live camera at
a Web site in Chicago filming pandas
in a zoo
I have then embedded the Web page
in a new InfoWindow
We will add a new button to trigger
all this
HTML5 and the JS backbone
 Embedding a Web page
We want to add code to the event
listener, to be able and embed the
Web page
 Supported video
The following table shows what video
formats supported by HTML5
 How to embed detailed
maps
As you must have understood by
now, as long as HTML supports it, we
can embed just about anything in an
information window
We are going to try something great
now: we will embed a detailed map,
at a highest zoom, of a position
chosen by the user
We will use New York City as an
example
 HTML side of things
We will first create a new button
This button will trigger the change in
focus on the map and will display a
detailed map of the location where
the marker has been placed
 JS side
We will at first create the JS code that
handles the button events
The whole thing will be very similar
to previously seen examples
 Building the detailed map
In the listener we want to
Create a new div
Add this as child to the map
Then we will simply create a map in this div that
more or less follows the usual implementation
What is a DIV
The <div> tag defines a division or a section in
an HTML document
The <div> tag is used to group block-elements
to format them with CSS
The listener
 The InfoWindow
We can now embed the whole thing
into an infowindow
We will use the usual code to do so
We will create an information window, if
it does not exist
We can then set the contents and open
it off the maker
Th
e wh
ole
co
de
 Heatmaps
When we have statistics about a
natural phenomenon, such as the
recent floods, we might be interested
in having a means to display the
accrued data
Data can come in many shapes and
forms, but geographical data comes
with coordinates
The simplest heatmap is the one that
displays density of measurements on
 HTML side
We are going to create a new button
This one will trigger the creation of
the map
Ideally we would like another process
to generate the data and some JS to
display it
In this case we will simply add the
data generation in our function that
handles the button event
 JS code
We are going to implement the JS
part of the solution
This will use some global variables

The variable ppoints will hold an

array of coordinates
 Random coordinates
We have seen this before: we used
the Math.random function to create
locations at random
Remember that function outputs a
random number uniformly distributed
in [0,1)
If we have a geographic location, we
can therefore use it to generate
points scattered around the current
location within a radius
 Uniformly distributed
scatter
The following set of instructions
simply creates random locations and
pushes them into the defined array
ppoints
 Creating the heatmap
Now we can create the heatmap
Then we can move
 Gaussian/Normal
distribution
Alternatively, we could draw
numbers from a Normal distribution,
the bell curve
This will allow us to have a higher
density near the centre and lower as
we move away from that position
We can define another function that
returns a random number drawn
from a Normal distribution see
next slide for the code
Code for Normal distribution

We can then
replace the
Math.random as
follows