Custom Interactive Maps with the Google Maps API 15 Street View Panoramas Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

google has a whole arsenal of services
for us to use and tandem with our map
and one of them is the Street View
service we can project our maps location
to a street view so next to our map we
can have the Street View being shown of
the location in our map so imagine on
our map if we had an element at the top
of the map that showed us what currently
was in street view well to do that we're
going to need a div on top of the map
now we can either just push this map
down by having a div with the relative
position or we can overlay it with a div
with an absolute position and we're
gonna go with a div with an absolute
position because we're gonna show how
you can overlay elements on a map so
create a div and we'll give it to the ID
of pip pano
and that stands for picture-in-picture
because having the Street View panoramas
at the top of the page is a bit like a
picture and picture so now in our style
that CSS will set the styles for our pip
pano
we'll give it a height of 200 pixels and
a width of a hundred percent and we can
see that it bumps down our map so to
change that will add the position to
absolute and we'll make sure to give it
a top of 0 and a left 0 as well and to
have a better idea of what it's going to
look like we'll give it a background for
now and our background isn't showing up
and that's because we need to set a
z-index and now we can see our pip pano
div so we don't need to have the
background so we'll get rid of that so
now we'll focus on setting up the
panorama with the JavaScript API so
within our library we'll create a method
and we'll call it set pano in set pano
we'll take an element as well as options
and the element will be what we're
projecting the panorama to so to create
a panorama we'll create a variable for
it and just like we've done before with
creating objects we'll create a new
Google Maps dot panorama and this
panorama takes in the elements as well
as the options
so in our jQuery UI widget we'll set up
a function for set pano and rather than
passing through the elements of the set
pano and the map we'll just pass through
a selector and then using jQuery we'll
that element and passing through the
jQuery object won't work so we need to
use the array notation to get the HTML
element and this will actually only work
for one HTML element since we're just
grabbing the array of zero so if we
wanted to work with multiple we'll have
to iterate through the selector so we'll
use jQuery x' each to iterate through
the set of elements so for each of the
elements will fire off this callback
function and then we'll set the pano to
the elements and one thing that sticks
out to me right now is the use of this
and this callback function so to ensure
that it's our library let's create the
self variable and now we'll set it to
self dot map so now we'll go back to map
stir and we need to change to do Street
View panoramas so now in script jeaious
we'll call the set panel function we'll
pass through the Pitt pano ID and then a
blank object so we can see that we have
our Street View right here but we
haven't set the location of our street
view so Street View takes in a position
object and that takes a lot and along so
we'll just copy this lot and long up
here and now you can see that we have
the Street View set however there's no
definitive link between these two
components you want to be able to move
the Pegman on this map and have it move
on the panorama so back in our Maps our
library we can set the link by calling a
method on our map and that sets Street
View and we can set that to the panorama
so now you can see we have this Pegman
and if we move him somewhere random
it'll change it in this panorama right
here so now we've set the link between
our Street View and our Google map but
our panorama isn't set up to fire off
any events fortunately we've written the
attach events function so we can call
this dot underscore attach events we can
pass through the panorama and then we
can pass through options dot events
however we only want to fire this off
there's events so let's go back into our
script j/s and let's set some events so
the first event we can fire off is if
the position has changed
and if the position changed we'll alert
it changed so we get changed right off
the bat and if you move on the street we
also get the changed box so one common
feature that people want to do with the
street view is set the street view to a
certain point of view so when it loads
down it loads to an angle like this
rather than the default angle that's
straight ahead
for example let's put in this different
Latin long right now we just see this
dirt Hill but if we turn it all the way
around we can see the Golden Gate Bridge
and that's a much better point of view
than what we saw with that dirt hill so
when we load this map we want to see
this image rather than the default one
so to change that we can customize the
options with the POV object and that
stands for point of view and the POV
object has two properties heading and
pitch and as you can see if you don't
have the heading and pitch properties it
won't show Street View at all so don't
include POV as a property if you're not
going to set the heading in the pitch so
heading in pitch are both based off of
360 degree values and heading controls
whether the Street View image goes left
or right so if we set it to 100 it'll go
a hundred degrees to the right and with
pitch if we set it to 50 it'll go fifty
degrees up and we set it to negative 50
it'll go 50 degrees down
so even if you set this to 360 degrees
you would be exactly where you started
so let's move the heading 200 degrees to
the right and we see the Golden Gate
Bridge so remember to use the point of
view property when you're trying to set
what your Street View is located and
there's even a vent we can set from the
point of view and that's called POV
changed and for POV changed I'm gonna
log change to the console rather than
alerting it because it will show a lot
of boxes if I alert it so I'm gonna move
this up and now I'm going to check it in
the console and we can see that we had
changed alert many times in the console
so there's still a lot of custom events
you can fire off for the panorama
specifically you can even fire off when
the street is changed and a street and a
panorama is referred to as a link so
we'll change it from POV change to links
changed and the links will change when
we change roads and you'll get multiple
links back when you're at an
intersection so we need to pass through
back the event arguments and then actual
panorama itself because if you remember
in the callback we pass back the object
that we're setting the events on and in
this case it's extremely helpful because
we wouldn't have access to the panorama
otherwise so when the links change we
can call panorama get links and this
will return all the current links and
we'll make sure this is get links so now
we'll take this guy and we'll drag them
onto another spot of the map and this
will change what road is on the stained
geing the links and we can see that we
have this array of objects returned and
if we open them up we can see that we
give 40th Avenue because that's the road
that we're currently on so Google Maps
provides us a way to project Street view
from one map to another div and from
there we can set the heading in the
pitch from the Street View as well which
controls where the Street View is being
seen from and we also can fire off
events from Street View as well